如何实现一个导航栏
2017-06-13 本文已影响797人
小m_up
之前写导航栏都是为了方便，直接用的bootstrp里的类，这两天在学习jQuery，所以想自己实现一个，废话不多说了，开始吧：
- 先写html文件
在HTML文件中先将dom节点建立起来：
<div class="nav">
<ul class="list">
<li><a href="#homePage.html">首页</a></li>
<li><a href="#first.html">第一页</a></li>
<li><a href="#second.html">第二页</a></li>
<li><a href="#third.html">第三页</a></li>
<li><a href="#forth.html">第四页</a></li>
</ul>
</div>
那么此时的页面效果如下所示：
- 给刚创建的
dom节点添加css
主要就是将刚创建的dom节点显示在同一行，并且当我的将鼠标放在a链接上时，让它显示的颜色改变
* {
margin: 0;
padding: 0;
}
.nav {
width: 100%;
height: 40px;
background-color: #222;
}
.list {
width: 80%;
height: 40px;
margin: 0 auto;
list-style-type: none;
}
.list li {
float: left;
}
a {
text-decoration: none;
}
.list li a {
padding: 0 30px;
color: #aaa;
line-height: 40px;
display: block;
}
.list li a:hover {
background: #333;
color: #fff;
}
此时的显示效果如下：
- 添加下拉框节点
我在每个li里面给它添加下拉框节点，例如：
<li>
<a href="#homePage.html">首页</a>
<div class="liList">
<span>首页</span>
<span>首页</span>
<span>首页</span>
<span>首页</span>
</div>
</li>
为了让其美观我们可以给它添加css使其和上面的导航样式保持一致:
.liList {
height: auto;
margin: 0 auto;
list-style-type: none;
background-color: #333;
}
.liList span{
color: #aaa;
line-height: 25px;
display: block;
text-align: center;
cursor: pointer;
}
.liList span:hover{
background: #aaa;
color: white;
}
那么此时的显示效果如下：
这样添加之后这些节点就会显示，而我们的意图是想让它在等我们点击某个导航的时候再显示，所以我们此时就需要给它添加jQuery来控制让它隐藏
- 隐藏下拉框信息
对应jQuery代码如下：
$(".liList").hide();
此时它的页面就和之前没有区别了，我们已经将它隐藏掉了，那么下一个动作就是当我点击或者移到导航项的时候让对应的下拉框显示，我这里用了鼠标滑过事件
- 鼠标滑过导航项，显示其对应下拉框
对应jQuery代码如下：
$(".list > li > a").hover(function () {
$(this).addClass("current").siblings().show()
.parent().siblings().children("a")
.removeClass("current").next().hide();
});
首先给导航项加一个鼠标滑过事件hover，然后给当前点击的元素设置一个class，因为我要给点击过后的导航项添加一个颜色以显示选中，然后使用siblings()获取它的兄弟元素，并使用show()将它显示，即显示下拉框的内容，但是此时的问题就是我每点一个之前点过的都会显示，所以当我点击这个的时候我将其他的导航项的class都删除，并且将其他项的下拉框隐藏，但是此时我点击下拉框的内容时，我的下拉框还存在，所以我接下来点击下拉框内容之后将下拉框隐藏
- 点击下拉框内容之后将下拉框隐藏
刚开始的时候我是直接使用了class选择器$(".liList > span")去获取点击的元素，但是因为它是隐藏元素，所以我无法获取并给其添加事件，故我使用了可见性过滤选择器，对应jQuery代码如下：
$("span:hidden").click(function () {
$(this).parent().hide();
});
此时，我们的导航栏就完成啦！
