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新增），後者表示僞類（相容性較強，推薦使用），其他僞元素和僞類也有相似的特點；
更多的僞類實作特殊形狀的方式将在後期繼續讨論；
~~如遇錯誤，請指正；
-
結束語…………………………福利時間到………………………………
大家同為程式員，在這裡給大家真誠的送上福利。
福利連結點選這裡！