前端入坑纪 12
最近忙得跟什么似的，今天难得抽空终于可以来更新简书了。
想来最近做了个二级下拉菜单，样式草草，请君略之~
截图
OK，first things first！项目链接
HTML 结构
<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结构
* {
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结构
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";
}
// 当前的this需要先保存下来，这样setTimeout里才能引用到
var _this = this;
this.lastElementChild.style.display = "block";
// 先设置为block后再变opacity的值，这样过渡才有效果
setTimeout(function() {
_this.lastElementChild.style.opacity = "1";
}, 10);
}
// 在下拉菜单里划出时，隐藏它
olis[i].lastElementChild.onmouseout = function() {
this.style.display = "none";
this.style.opacity = "0";
}
}
基本关键的点，都已经备注了相应的解释。如果对此有兴趣，可以好好研究下！
最近在看《你不知道的JavaScript》，很好的一套书，也推荐大家细细读。
入门的话，红宝书---《javascript高级程序设计》、犀牛书--《JavaScript学习指南》。
