JQ實現二級導航菜單
- 2019 年 12 月 27 日
- 筆記
實用JQ實現導航二級菜單效果，導航菜單在網站中非常常見，有的網站可能會出現三級菜單及多級菜單模式，下面我們來簡單的實現一個二級菜單的效果。
部分效果截圖：
整體程式碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>導航菜單案例</title> <style> *{ padding: 0; margin: 0; } ul,li{ list-style: none; } a{ text-decoration: none; } nav{ width: 1140px; height: 40px; margin: 0 auto; border:solid 1px #CCC; position: relative; } nav ul li{ width: 150px; line-height: 40px; float: left; } nav ul li a{ display: block; width: 100%; float: left; color: #444; font-size: 14px; text-align: center; } nav>ul>li:hover{ background: #f5f5f5; } nav ul li ul{ display: none; width: 150px; position: absolute; background-color: #f5f5f5; overflow: hidden; top:41px; } nav ul li ul li{ float: left; border-bottom: solid 1px #CCC; } nav ul li ul li:last-child{ border: none; } nav>ul>li>ul>li:hover a{ background-color: #444; color: #FFF; } </style> </head> <body> <br /> <br /> <nav> <ul> <li><a href="" title="首頁">首頁</a></li> <li><a href="" title="聯繫我們">聯繫我們</a></li> <li><a href="" title="在線留言">在線留言</a></li> <li> <a href="" title="新聞資訊">新聞資訊</a> <ul> <li><a href="" title="中國資訊">中國資訊</a></li> <li><a href="" title="中國資訊">中國資訊</a></li> </ul> </li> <li> <a href="" title="產品中心">產品中心</a> <ul> <li><a href="" title="除雪機">除雪機</a></li> <li><a href="" title="運雪車">運雪車</a></li> </ul> </li> <li><a href="" title="案例展示">案例展示</a></li> </ul> </nav> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script> var $li = $("nav > ul > li"); $li.mouseenter(function () { $(this).children("ul").stop().slideDown(); }); $li.mouseleave(function () { $(this).children("ul").stop().slideUp(); }); </script> </body> </html>
