jQuery实现侧边下拉导航栏

最新推荐文章于 2021-10-13 16:55:01 发布

zsl888822

最新推荐文章于 2021-10-13 16:55:01 发布

阅读量1k

点赞数 1

分类专栏： jQuery 文章标签： jQuery实现侧边下拉导航栏

本文链接：https://blog.csdn.net/zsl15039718107/article/details/103409549

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!Doctype html>
<html>
<head>
   <meta charset="utf-8">
   <title>下拉导航栏</title>
   <style>
	   a{
		   text-decoration:none;
	   }
	   .menu{
		 margin:100px 100px;
		 border:1px solid #ccc;
		 width:160px;
	   }
	   .level>a{
		   display:block;
		   width:150px;
		   padding:5px 0 5px 10px;
		   background:#dadada;
		   color:black;
	   }
	   .level>a:hover{
		   background:blue;
		   color:#fff;
	   }
	   .level2{
		  display:none;
		  background:#d4efe7;
		 
	   }
	   .level2>li>a{
		   display:block;
		   color:black;
		    padding:2px 0 2px 16px;
	   }
	   .level2>li>a:hover{
		   background:#38d486; 
	   }
   </style>
</head>
<body>
	<div class="box">
		<ul class="menu">
			<li class="level">
			 <a href="javascript">衬衫</a>
			 <ul class="level2">
				 <li><a href="javacript">短袖衬衫</a></li>
				 <li><a href="javacript">长袖衬衫</a></li>
				 <li><a href="javacript">短袖T恤</a></li>
				 <li><a href="javacript">长袖T恤</a></li>
			 </ul>
			</li>
			<li class="level">
			 <a href="javascript">卫衣</a>
			 <ul class="level2">
				 <li><a href="javacript">开襟卫衣</a></li>
				 <li><a href="javacript">套头卫衣</a></li>
				 <li><a href="javacript">运动卫衣</a></li>
				 <li><a href="javacript">童装卫衣</a></li>
			 </ul>
			</li>
			<li class="level">
			 <a href="javascript">裤子</a>
			 <ul class="level2">
				 <li><a href="javacript">短裤</a></li>
				 <li><a href="javacript">休闲裤</a></li>
				 <li><a href="javacript">牛仔裤</a></li>
				 <li><a href="javacript">免烫卡其裤</a></li>
			 </ul>
			</li>
		</ul>
	</div>
	<script src="./jquery-1.12.4.js" type="text/javascript"></script>
	<script>
	 $(".level>a").click(function(){
		 $(this).addClass("current")
		 .next().slideDown(200)
		 .parent().siblings().children("a").removeClass("current")
		 .next().slideUp(200);
		 return false;
	 })
	</script>
</body>
</html>

zsl888822

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现侧边下拉导航栏

<!Doctype html><html><head> <meta charset="utf-8"> <title>下拉导航栏</title> <style> a{ text-decoration:none; } .menu{ margin:100px ...
复制链接

扫一扫