js，jquery——实现精美的下拉菜单 & 手风琴菜单（二级、三级)

js，jquery实现精美的下拉菜单 & 手风琴菜单 （二级、三级）

1.Demo效果图：

• 静态展示：
  
• css-hover（ js、jq触发mouse事件时 ）：
  
  更特别的下拉菜单：
  https://blog.csdn.net/qq_43495629/article/details/87186845

2.代码展示：

• Html布局：

   <div class="nav">	
  		<div class="top-nav">
  	<!---------一级菜单开始------------>
  			<ul class="one-items">						 
  				<li><a class="link" href="#">首页</a>
  		<!---------二级菜单开始------------>
  					<ul class="two-items">               
  						<li><a href="#">产品介绍</a>
  			<!---------三级菜单开始------------>
  							<ul class="three-items">	 
  								<li><a href="#">产品A</a></li>
  								<li><a href="#">产品B</a></li>
  								<li><a href="#">产品C</a></li>
  							</ul>
  			<!---------三级菜单结束------------>
  						</li>
  						<li><a href="#">产品源地</a></li>
  						<li><a href="#">产品预购</a></li>
  						<li><a href="#">评价反馈</a></li>
  					</ul>
  		<!---------二级菜单结束------------>
  				</li>
  				<li><a href="#">我的产品</a></li>
  				<li><a href="#">联系我们</a></li>
  				<li><a href="#">反馈</a></li>
  				<li><a href="#">交流论坛</a></li>
  			</ul>
  	<!---------一级菜单结束------------>
  		</div>
  </div>
  

• css代码：

  	{
  		margin:0;
  		padding:0;
  	}
  	
  	li{
  		list-style-type:none;
  	}
  
  	a{	
  		display:block;
  		text-decoration:none;
  		color:white;
  		font-size:12px;
  	}
  
  	a:hover{
  		color:purple;
  	}
  
  	.nav{
  		width:400px;
  		margin:60px auto;/*为了让盒子居中显示*/
  		height:30px;
  		border-radius:5px;
  		box-shadow:0 0 2px #DDD;
  	}
  	
  	.top-nav{
  		width:100%;
  		height:30px;
  	}
  
  	.top-nav ul{
  		width:100%;
  		height:auto;
  	}
  	
  	.top-nav ul li{
  		width:80px;
  		float:left;
  		background-image:linear-gradient(to right,dimgray,gray);
  		line-height:30px;
  		text-align:center;
  		position:relative;
  	}
  
  	.top-nav ul li ul[class="two-items"]:before{
  		content:"";
  		position:absolute;
  		top:-5px;
  		left:5px;
  		margin-left:30px;
  		border-left:5px solid transparent;
  		border-right:5px solid transparent;
  		border-bottom:5px solid #666;
  	}
  
  	.top-nav ul li ul[class="two-items"]{
  		position:absolute;
  		top:35px;
  		left:0;
  		box-shadow:0 0 5px #666;
  		border-radius:5px;
      	display:none;
      	/*z-index:;  这里没设置层级是因为父级元素只是一个单独的下拉菜单盒子，不会影响页面结构，如果页面结构还涉及其他一些元素，不设置层级大小的话，会对整个页面的结构造成威胁。*/
  	}
  
  	.top-nav ul li ul li{
  		position:relative;
  		float:none;
  		background-image:linear-gradient(to right,plum,salmon);
  	}
  
  	.top-nav ul li ul>li:first-child{
  		border-radius:5px 5px 0 0;
  	}
  
  	.top-nav ul li ul>li:last-child{
  		border-radius:0 0 5px 5px;
  	}
  
  	.top-nav ul li:hover{
  		background-image:linear-gradient(to right,#FF00FF,#E066FF);
  	}
  
  	.top-nav ul li:hover ul[class="two-items"]{
  		display:block;
  	}
  
  	.top-nav ul li ul li:hover ul[class="three-items"]{
  		display:block;
  	}
  
  	.top-nav ul li ul li ul{
   		display:none;
  		position:absolute;
  		top:0;
  		left:85px;
  		/*z-index:;  这里没设置层级是因为父级元素只是一个单独的下拉菜单盒子，不会影响页面结构，如果页面结构还涉及其他一些元素，不设置层级大小的话，会对整个页面的结构造成威胁。*/
  	}
  
  	.top-nav ul li ul li ul:before{
  		content:"";
  		position:absolute;
  		left:-5px;
  		top:10px;
  		border-top:5px solid transparent;
  		border-right:5px solid #666;
  		border-bottom:5px solid transparent;
  	}
  

• 原生js（还在想办法封装，后期上传），请先看 jq 代码：

  //必须引入jquery库文件，引用js时，别忘了把css中二级、三级菜单（ul）设置为none;
  
     <script src="js/jquery-3.3.1.js" type="text/javascript"></script>
     
     <script type="text/javascript">
     	$(function(){
     		$("li").has("ul").mouseover(function(){
     			$(this).children("ul").css("display","block");
     		}).mouseout(function(){
     			$(this).children("ul").css("display","none");
     		})
     	});
     </script>
  

3.本案例涉及到的知识点：

1. css3中的background-image（ 背景渐变 ）
2. css3中的box–shadow （盒子阴影）
3. css3中的border-radius（ 边框圆角 ）
4. css3中的新增选择器 （ first-child、last-child ）
5. css2中的属性匹配选择器（sth [class=" "] ）
6. css尖角效果伪类:before

4.对涉及到的知识点做了如下解析：

• background-image（背景渐变）（
  可能的值：
  

  渐变类型：==linear-gradient（线性渐变） || radial-gradient（径向渐变）

  渐变方向（请仔细查看以下可能的值）：
  ）

• box-shadow:（效果请自行查看
  可能的值：
  box-shadow: X轴偏移量（必须） Y轴偏移量 （必须） [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式（默认为外阴影）];
  ）

  注：有关css3的更多介绍
  请查看：link(https://www.imooc.com/learn/33)

• 类名属性匹配器：
  例如：选择 div 下 ul 下 类名为"my-classname"的子元素（li）
  写法：div ul > li [class=“my-classname”]

  	<div>
  		<ul>
  			<li class="my-classname"><li>
  			<li><li>
  			<li><li>
  			<li class="my-classname"><li>
  			<li><li>
  		</ul>
  	</div>
  

  更多介绍，请参考：
  link（https://www.imooc.com/learn/33）

• 伪类元素实现尖角 :（就是利用边框的四个角拼凑起来，然后再利用transparent来隐藏不需要的部分，一定不能忽视的一点 : 无论是before、after都需要相对于其父级定位。）

   .top-nav ul li ul li ul:before{
  		content:"";
  		position:absolute;
  		left:-5px;
  		top:10px;
  		border-top:5px solid transparent;
  		border-right:5px solid #666;
  		border-bottom:5px solid transparent;
  	}
  

• 补充说明
  : : before 跟 : before 要进行严格区别，前者表示伪元素（兼容性较差，css3新增），后者表示伪类（兼容性较强，推荐使用），其他伪元素和伪类也有相似的特点；

  更多的伪类实现特殊形状的方式将在后期继续讨论；

~~如遇错误，请指正；

• 结束语…………………………福利时间到………………………………

  大家同为程序员，在这里给大家真诚的送上福利。

  福利链接点击这里！