jQuery简单实现二级下拉菜单
HTML部分:
<body>
<nav><ul>
<li>首页</li>
<li>联系方式
<ul>
<li>QQ号码</li>
<li>微博</li>
<li>微信</li>
</ul>
</li>
<li>我的网站
<ul>
<li>乐遇网</li>
<li>十月梦想</li>
<li>DEMO</li>
</ul>
</li>
<li>我的作品
<ul>
<li>二级菜单</li>
<li>京东静态</li>
</ul>
</li>
<li>关于</li>
</ul></nav>
</body>CSS部分:
/*二级菜单样式*/
*{
padding:0;
margin:0;
}
body{
background: pink;
}
nav {
text-align:center;
margin:0 auto;
background:rgba(0,0,0,0.6);
width:100%;
height:80px;
}
nav ul li{
float:left;
list-style: none;
width:17%;
height:15px;
font-size:30px;
color:white;
padding:20px;
}
/*nav ul li{
background: #62aeea;
height:40px;
}*/
nav ul li ul li{
clear:both;
width:180px;
height:40px;
display: none;
/*box-sizing: border-box;*/
}jquery部分:
<!-- 引入jquery -->
<script type="text/javascript" src="jquery-1.11.3.js"></script>
<script type="text/javascript">
$(function(){
$('nav ul li').hover(function(){
$(this).css({'background':'#26aeea','height':'40px'}).siblings().css({'background':'rgba(0,0,0,0.0)'})
$(this).find('li').show();//滑过一级二级显示
$(this).find('li').css({'width':'100%','margin-left':'-20px'})
},function(){
$(this).find('li').siblings().hide();//滑过的兄弟隐藏
})
})
</script>下拉菜单原理:滑过一级的li才让第二层的li显示,利用jq简单的抓取元素,让一级下的二级li显示就能解决,使用jq比css的思路更加明确!
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018-1-14，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
