专栏首页十月梦想jQuery简单实现二级下拉菜单

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的思路更加明确!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue实现简单todoList以及jquery实现对比

    上一篇文章,了解了Vue的hello world程序;这次简单了解两个vue指令,v-for和v-model,来实现一个简单的todolist;

    十月梦想
  • ES6新增数据类型symbol

    ES6新增一种数据类型symbol,此数据类型主要防止相同的属性名多次使用被覆盖问题!至此简单回顾一下JavaScript的7种数据类型.

    十月梦想
  • Vue动画之列表过渡

            首先我们定义一个列表循环的元素放在transition-group中

    十月梦想
  • 隔行变色

    河湾欢儿
  • 【CSS】828- 纯CSS导航栏下划线跟随效果

    在继续阅读下文之前,你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果。

    pingan8787
  • Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示例

    本文实例讲述了Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作。分享给大家供大家参考,具体如下:

    砸漏
  • PHP之多条件混合筛选功能的实现方法

    以上这篇PHP之多条件混合筛选功能的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考。

    砸漏
  • <li>标签

    <li> 标签定义列表,<li> 元素通常与有序列表 (<ol>) 和无序列表 (<ul>) 一起运用。

    Html5知典
  • Cypress学习12-父子元素定位

    若要在元素中获取所有下一个同级DOM元素,直到另一个元素,请使用.next until()命令。

    上海-悠悠
  • Pug迭代

    听着music睡

扫码关注云+社区

领取腾讯云代金券