前端入坑紀(jì) 12
最近忙得跟什么似的伏蚊，今天難得抽空終于可以來更新簡書了。
想來最近做了個二級下拉菜單格粪，樣式草草躏吊，請君略之~
截圖
OK氛改，first things first！項(xiàng)目鏈接
HTML 結(jié)構(gòu)
<nav>
<ul id="navLvOne" class="navLvOne clearfix">
<li>
<a href="javascript:;">首頁</a>
</li>
<li>
<a href="javascript:;">一頁</a>
<ol>
<li>
<a href="javascript:;">頁一1</a>
</li>
<li>
<a href="javascript:;">頁一2</a>
</li>
<li>
<a href="javascript:;">頁一3</a>
</li>
<li>
<a href="javascript:;">頁一4</a>
</li>
</ol>
</li>
<li>
<a href="javascript:;">二頁</a>
<ol>
<li>
<a href="javascript:;">頁二1</a>
</li>
<li>
<a href="javascript:;">頁二2</a>
</li>
<li>
<a href="javascript:;">頁二3</a>
</li>
</ol>
</li>
<li>
<a href="javascript:;">三頁</a>
<ol>
<li>
<a href="javascript:;">頁三1</a>
</li>
<li>
<a href="javascript:;">頁三2</a>
</li>
</ol>
</li>
<li>
<a href="javascript:;">四頁</a>
<ol>
<li>
<a href="javascript:;">頁四1</a>
</li>
<li>
<a href="javascript:;">頁四2</a>
</li>
<li>
<a href="javascript:;">頁四3</a>
</li>
<li>
<a href="javascript:;">頁四4</a>
</li>
</ol>
</li>
<li>
<a href="javascript:;">五頁</a>
<ol>
<li>
<a href="javascript:;">頁五1</a>
</li>
<li>
<a href="javascript:;">頁五2</a>
</li>
</ol>
</li>
</ul>
</nav>
二級菜單ol就是嵌套在外面ul的li里面比伏，再相對于它來絕對定位胜卤。
CSS結(jié)構(gòu)
* {
margin: 0;
padding: 0;
}
ul,
ol,
li {
list-style: none;
}
a {
color: #333;
text-decoration: none;
}
.clearfix {
content: "";
display: table;
clear: both
}
.navLvOne {
width: 100%
}
.navLvOne>li {
float: left;
width: 16.66%;
position: relative;
background-color: #dedede;
}
.navLvOne>li>a,
.navLvOne>li>ol>li>a {
line-height: 40px;
height: 40px;
display: block;
width: 100%;
text-align: center;
}
.navLvOne>li>a:hover {
box-shadow: 0 0 1px #ccc;
}
.navLvOne>li>ol>li>a {
color: #333;
}
.navLvOne>li>ol>li>a:hover {
background-color: #ccc;
color: #000;
}
.navLvOne>li>ol {
transition: all 200ms ease-in-out;
display: none;
opacity: 0;
width: 100%;
position: absolute;
top: 40px;
left: 0;
background-color: #fdfdfd;
}
最上面的是一些css樣式重置，然后基本上用到了最多的是css里的子選擇器赁项，入目且是的趕腳案瘐铩！
JS結(jié)構(gòu)
var olis = document.getElementById("navLvOne").children;
for (var i = 1; i < olis.length; i++) {
olis[i].onmouseover = function() {
// 先把下拉菜單全部隱藏
for (var l = 1; l < olis.length; l++) {
olis[l].lastElementChild.style.display = "none";
olis[l].lastElementChild.style.opacity = "0";
}
// 當(dāng)前的this需要先保存下來悠菜，這樣setTimeout里才能引用到
var _this = this;
this.lastElementChild.style.display = "block";
// 先設(shè)置為block后再變opacity的值紫新，這樣過渡才有效果
setTimeout(function() {
_this.lastElementChild.style.opacity = "1";
}, 10);
}
// 在下拉菜單里劃出時，隱藏它
olis[i].lastElementChild.onmouseout = function() {
this.style.display = "none";
this.style.opacity = "0";
}
}
基本關(guān)鍵的點(diǎn)李剖，都已經(jīng)備注了相應(yīng)的解釋。如果對此有興趣囤耳，可以好好研究下篙顺！
最近在看《你不知道的JavaScript》，很好的一套書充择，也推薦大家細(xì)細(xì)讀德玫。
入門的話，紅寶書---《javascript高級程序設(shè)計(jì)》椎麦、犀牛書--《JavaScript學(xué)習(xí)指南》宰僧。
