前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jQuery简单实现二级下拉菜单

jQuery简单实现二级下拉菜单

作者头像
十月梦想
发布2018-08-29 10:56:02
4.2K0
发布2018-08-29 10:56:02
举报
文章被收录于专栏:十月梦想

HTML部分:

代码语言:javascript
复制
<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部分:

代码语言:javascript
复制
/*二级菜单样式*/
*{
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部分:

代码语言:javascript
复制
<!-- 引入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 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档