首页 > 代码库 > JS 学习制作一个二级菜单
JS 学习制作一个二级菜单
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>菜单栏</title> 5 <script src="http://www.mamicode.com/jquery/jquery-2.1.1.js"></script> 6 <script> 7 $(document).ready(function () { 8 $(".nav li").hover(function () { 9 // $(this).children(".jnNav").show(); //鼠标在LI上面，二级目录显示 10 if ($(this).children(".jnNav").is(":animated")) { $(this).children(".jnNav").stop(true); } 11 // if ($(".nav li").children(".jnNav").is(":animated")) { $(".nav li").children(".jnNav").stop(true,true);} 12 $(this).children(".jnNav").slideDown("fast"); //鼠标在LI上面，二级目录显示下滑效果 13 }, function () { 14 $(this).children(".jnNav").slideUp("fast"); //鼠标离开LI上面，二级目录隐藏上拉效果 15 // $(this).children(".jnNav").hide(); //鼠标离开LI上面，二级目录隐藏 16 }) 17 18 }) 19 20 </script> 21 <style type="text/css"> 22 .mainNav { 23 position: absolute; /*定义主导航条位置*/ 24 top: 0; 25 left: 0; 26 height: 37px; 27 line-height: 37px; /*设置行高 ， 使内部内容垂直中间显示*/ 28 width: 990px; 29 z-index: 100; /*设置叠放层次100，防止其他层覆盖*/ 30 background-color: #4A4A4A; 31 } 32 33 .nav { /*设置无序列表ul显示为内联样式inline,向左浮动*/ 34 margin: 0px 0px 0px 25px; 35 display: inline; 36 float: left; 37 } 38 39 .nav li { /*设置向左浮动 ，这样li元素全部会在一行，显示同样设置为内联样式*/ 40 float: left; 41 display: inline; 42 margin-right: 14px; 43 position: relative; /*使jnNav相对于LI 偏移*/ 44 z-index: 100; /*防止其他层覆盖*/ 45 } 46 47 .nav li a { /*显示为块，方便控制a的大小，鼠标在整个块级元素内均能选中，这里定义所有的A，可以设置ID具体定义*/ 48 display: block; 49 padding: 0px 8px; 50 font-weight: 700; 51 color: #fff; 52 font-size: 14px; 53 text-decoration: none; /*去除文字下划线*/ 54 } 55 56 .nav li a:hover { /*鼠标滑动设置背景色 ，这里定义所有的A，可以设置ID具体定义*/ 57 background: #ffd800; 58 } 59 60 /* 二级菜单*/ 61 .jnNav { 62 background-color: #fff; /*设置每个二级菜单，背景色为白色*/ 63 border: 1px solid #b1b1b1; /*边框为1个像素及颜色*/ 64 border-top: 0px; /*取消上方边框*/ 65 left: 0px; /*相对于父元素LI，左侧对齐*/ 66 overflow: hidden; /*内容超出范围隐藏*/ 67 position: absolute; /*绝对定位，相对于LI*/ 68 top: 37px; /*LI的高度为37PX，这里设置37px，刚好与li底部衔接*/ 69 width: 474px; 70 z-index: 1000; /*防止覆盖*/ 71 display: none; 72 } 73 74 .subitem { /*设置二级菜单内部层*/ 75 float: left; /*左侧浮动*/ 76 height: auto; 77 min-height: 100px; /*最小高度为100px*/ 78 padding: 10px 12px; /*左右内部各填充12px，上下填充10px*/ 79 width: 450px; /*宽度450+12+12，正好为父DIV的宽度*/ 80 } 81 82 .subitem dl { /*设置自定义列表*/ 83 border-top: 1px dashed #c4c4c4; /*上方设置边框*/ 84 overflow: hidden; /*超出部分隐藏*/ 85 padding: 8px 0px; /*上下设置填充8px*/ 86 float: left; /*所有自定义列表向左浮动，两个列表就会分层显示*/ 87 } 88 89 .fore { 90 border-top-style: none; 91 padding-top: 0px; 92 } 93 94 .subitem dt { /*设置自定义列表的标题*/ 95 float: left; /*向左浮动*/ 96 font-weight: bold; 97 line-height: 16px; 98 padding: 4px 3px; 99 text-align: center; /*文本显示居中*/100 width: 76px; /*每个标题宽度设置*/101 }102 103 .subitem dt a { /*设置标题中链接文本的颜色，字体大小，粗体*/104 color: #000;105 font-weight: 700;106 font-size: 12px;107 padding: 0px;108 }109 110 .subitem dd { /*设置自定义列表的条目，左侧浮动，每个条目的总宽度为364PX,内部无填充*/111 float: left;112 overflow: hidden;113 padding: 0px;114 width: 364px;115 }116 117 .subitem em { /*设置条目中的每个内容元素*/118 border-right: 1px solid #ccc; /*右侧设置边框，用于隔开每个内容*/119 float: left; /*所有条目内容向左侧浮动*/120 font-style: normal; /*em本为斜体，这里更改为普通字体*/121 height: 14px;122 line-height: 14px; /*行高设置与高度一样，字体有垂直中间的效果*/123 margin: 5px 0px; /*上下设置外边距*/124 padding: 0 8px; /*左右设置内边距*/125 }126 127 .subitem em a {128 color: #666; /*设置字体颜色*/129 white-space: nowrap; /*设置文本就算在长也不允许换行*/130 font-size: 12px;131 font-weight: normal;132 padding: 0px;133 }134 135 .subitem em.noborder { /*设置最后一个元素 右侧的边框取消*/136 border-right: 0 none;137 }138 </style>139 </head>140 <body>141 <div id="nav" class="mainNav">142 <ul class="nav">143 <li><a href="http://www.mamicode.com/#">首 页</a></li>144 <li><a href="http://www.mamicode.com/#">品 牌</a>145 <div class="jnNav">146 <div class="subitem">147 <dl class="fore">148 <dt>149 <a href="http://www.mamicode.com/#nogo">品牌：</a>150 </dt>151 <dd>152 <em><a href="http://www.mamicode.com/#">耐克</a></em>153 <em><a href="http://www.mamicode.com/#">阿迪达斯</a></em>154 <em><a href="http://www.mamicode.com/#">达芙妮</a></em>155 <em><a href="http://www.mamicode.com/#">李宁</a></em>156 <em><a href="http://www.mamicode.com/#">安踏</a></em>157 <em><a href="http://www.mamicode.com/#">奥康</a></em>158 <em><a href="http://www.mamicode.com/#">骆驼</a></em>159 <em><a href="http://www.mamicode.com/#">特步</a></em>160 <em><a href="http://www.mamicode.com/#">耐克</a></em>161 <em><a href="http://www.mamicode.com/#">阿迪达斯</a></em>162 <em><a href="http://www.mamicode.com/#">达芙妮</a></em>163 <em><a href="http://www.mamicode.com/#">李宁</a></em>164 <em class="noborder"><a href="http://www.mamicode.com/#nogo">特步</a></em>165 </dd>166 </dl>167 <dl>168 <dt>169 <a href="http://www.mamicode.com/#nogo">品牌：</a>170 </dt>171 <dd>172 <em><a href="http://www.mamicode.com/#">耐克</a></em>173 <em><a href="http://www.mamicode.com/#">阿迪达斯</a></em>174 <em><a href="http://www.mamicode.com/#">达芙妮</a></em>175 <em><a href="http://www.mamicode.com/#">李宁</a></em>176 <em><a href="http://www.mamicode.com/#">安踏</a></em>177 <em><a href="http://www.mamicode.com/#">奥康</a></em>178 <em><a href="http://www.mamicode.com/#">骆驼</a></em>179 <em><a href="http://www.mamicode.com/#">特步</a></em>180 <em><a href="http://www.mamicode.com/#">耐克</a></em>181 <em><a href="http://www.mamicode.com/#">阿迪达斯</a></em>182 <em><a href="http://www.mamicode.com/#">达芙妮</a></em>183 <em><a href="http://www.mamicode.com/#">李宁</a></em>184 <em class="noborder"><a href="http://www.mamicode.com/#nogo">特步</a></em>185 </dd>186 </dl>187 </div>188 </div>189 </li>190 <li><a href="http://www.mamicode.com/#">女 装</a>191 <div class="jnNav">192 <div class="subitem">193 <dl class="fore">194 <dt>195 <a href="http://www.mamicode.com/#nogo">女 装：</a>196 </dt>197 <dd>198 <em><a href="http://www.mamicode.com/#nogo">耐克</a></em>199 <em><a href="http://www.mamicode.com/#nogo">阿迪达斯</a></em>200 <em><a href="http://www.mamicode.com/#nogo">达芙妮</a></em>201 <em><a href="http://www.mamicode.com/#nogo">李宁</a></em>202 <em><a href="http://www.mamicode.com/#nogo">安踏</a></em>203 <em><a href="http://www.mamicode.com/#nogo">奥康</a></em>204 <em><a href="http://www.mamicode.com/#nogo">骆驼</a></em>205 <em><a href="http://www.mamicode.com/#nogo">特步</a></em>206 <em><a href="http://www.mamicode.com/#nogo">耐克</a></em>207 <em><a href="http://www.mamicode.com/#nogo">阿迪达斯</a></em>208 <em><a href="http://www.mamicode.com/#nogo">达芙妮</a></em>209 <em><a href="http://www.mamicode.com/#nogo">李宁</a></em>210 <em class="noborder"><a href="http://www.mamicode.com/#nogo">特步</a></em>211 </dd>212 </dl>213 <dl>214 <dt>215 <a href="http://www.mamicode.com/#nogo">女 装：</a>216 </dt>217 <dd>218 <em><a href="http://www.mamicode.com/#nogo">耐克</a></em>219 <em><a href="http://www.mamicode.com/#nogo">阿迪达斯</a></em>220 <em><a href="http://www.mamicode.com/#nogo">达芙妮</a></em>221 <em><a href="http://www.mamicode.com/#nogo">李宁</a></em>222 <em><a href="http://www.mamicode.com/#nogo">安踏</a></em>223 <em><a href="http://www.mamicode.com/#nogo">奥康</a></em>224 <em><a href="http://www.mamicode.com/#nogo">骆驼</a></em>225 <em><a href="http://www.mamicode.com/#nogo">特步</a></em>226 <em><a href="http://www.mamicode.com/#nogo">耐克</a></em>227 <em><a href="http://www.mamicode.com/#nogo">阿迪达斯</a></em>228 <em><a href="http://www.mamicode.com/#nogo">达芙妮</a></em>229 <em><a href="http://www.mamicode.com/#nogo">李宁</a></em>230 <em class="noborder"><a href="http://www.mamicode.com/#nogo">特步</a></em>231 </dd>232 </dl>233 </div>234 </div>235 </li>236 <li><a href="http://www.mamicode.com/#">男 装</a>237 <div class="jnNav">238 <div class="subitem">239 <dl class="fore">240 <dt>241 <a href="http://www.mamicode.com/#nogo">男 装：</a>242 </dt>243 <dd>244 <em><a href="http://www.mamicode.com/#nogo">耐克</a></em>245 <em><a href="http://www.mamicode.com/#nogo">阿迪达斯</a></em>246 <em><a href="http://www.mamicode.com/#nogo">达芙妮</a></em>247 <em><a href="http://www.mamicode.com/#nogo">李宁</a></em>248 <em><a href="http://www.mamicode.com/#nogo">安踏</a></em>249 <em><a href="http://www.mamicode.com/#nogo">奥康</a></em>250 <em><a href="http://www.mamicode.com/#nogo">骆驼</a></em>251 <em><a href="http://www.mamicode.com/#nogo">特步</a></em>252 <em><a href="http://www.mamicode.com/#nogo">耐克</a></em>253 <em><a href="http://www.mamicode.com/#nogo">阿迪达斯</a></em>254 <em><a href="http://www.mamicode.com/#nogo">达芙妮</a></em>255 <em><a href="http://www.mamicode.com/#nogo">李宁</a></em>256 <em class="noborder"><a href="http://www.mamicode.com/#nogo">特步</a></em>257 </dd>258 </dl>259 <dl>260 <dt>261 <a href="http://www.mamicode.com/#nogo">男 装：</a>262 </dt>263 <dd>264 <em><a href="http://www.mamicode.com/#nogo">耐克</a></em>265 <em><a href="http://www.mamicode.com/#nogo">阿迪达斯</a></em>266 <em><a href="http://www.mamicode.com/#nogo">达芙妮</a></em>267 <em><a href="http://www.mamicode.com/#nogo">李宁</a></em>268 <em><a href="http://www.mamicode.com/#nogo">安踏</a></em>269 <em><a href="http://www.mamicode.com/#nogo">奥康</a></em>270 <em><a href="http://www.mamicode.com/#nogo">骆驼</a></em>271 <em><a href="http://www.mamicode.com/#nogo">特步</a></em>272 <em><a href="http://www.mamicode.com/#nogo">耐克</a></em>273 <em><a href="http://www.mamicode.com/#nogo">阿迪达斯</a></em>274 <em><a href="http://www.mamicode.com/#nogo">达芙妮</a></em>275 <em><a href="http://www.mamicode.com/#nogo">李宁</a></em>276 <em class="noborder"><a href="http://www.mamicode.com/#nogo">特步</a></em>277 </dd>278 </dl>279 </div>280 </div>281 </li>282 <li><a href="http://www.mamicode.com/#">鞋包配饰</a></li>283 </ul>284 </div>285 </body>286 </html>
效果图：
这个效果主体是根据他人源码修改的，我加上了自己的理解，这样便于学习，仅仅学习用
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。