jQuery实现下拉菜单效果
使用了jQuery自己封装了一个函数实现了下拉菜单的效果
HTML代码:
<nav>
<ul>
<li>
<a href="">首页</a>
<ul class="hidden meau">
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
</ul>
</li>
<li>
<a href="">我的介绍</a>
<ul class="hidden meau">
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
</ul>
</li>
<li>
<a href="">我的主页</a>
<ul class="hidden meau">
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
</ul>
</li>
</ul>
</nav>
css代码:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
nav>ul>li {
position: relative;
float: left;
width: 80px;
height: 30px;
margin-right: 20px;
}
nav>ul>li>a {
display: block;
width: 100%;
height: 100%;
line-height: 30px;
}
.hidden {
display: none;
}
.show {
display: block;
}
.meau {
position: absolute;
width: 100%;
left: 0;
top: 30px;
}
.meau li {
height: 30px;
line-height: 30px;
}
jQuery代码:
function nav(ele){
//接受一个jQuery对象作为参数,实现下拉菜单效果,就直接写nav就行了
ele.children("ul").children("li").on({
mouseover:function(){
$(this).children(".meau").removeClass("hidden").addClass("show");
},
mouseout:function(){
$(this).children(".meau").removeClass("show").addClass("hidden");
}
})
}
调用函数:
$(function(){
nav($("nav"));
});