js，jquery实现精美的下拉菜单 & 手风琴菜单 （二级、三级）
1.Demo效果图：
- 静态展示：
js，jquery——实现精美的下拉菜单 & 手风琴菜单（二级、三级) - css-hover（ js、jq触发mouse事件时 ）：
js，jquery——实现精美的下拉菜单 & 手风琴菜单（二级、三级) 更特别的下拉菜单：
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.本案例涉及到的知识点：
- css3中的background-image（ 背景渐变 ）
- css3中的box–shadow （盒子阴影）
- css3中的border-radius（ 边框圆角 ）
- css3中的新增选择器 （ first-child、last-child ）
- css2中的属性匹配选择器（sth [class=" "] ）
- css尖角效果伪类:before
4.对涉及到的知识点做了如下解析：
-
background-image（背景渐变）（
可能的值：
js，jquery——实现精美的下拉菜单 & 手风琴菜单（二级、三级) 渐变类型：==linear-gradient（线性渐变） || radial-gradient（径向渐变）
渐变方向（请仔细查看以下可能的值）：
） js，jquery——实现精美的下拉菜单 & 手风琴菜单（二级、三级) -
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新增），后者表示伪类（兼容性较强，推荐使用），其他伪元素和伪类也有相似的特点；
更多的伪类实现特殊形状的方式将在后期继续讨论；
~~如遇错误，请指正；
-
结束语…………………………福利时间到………………………………
大家同为程序员，在这里给大家真诚的送上福利。
福利链接点击这里！