利用Jquery實現二級下拉選單
阿新 • • 發佈：2019-02-06
最近在學習前端的內容：看到別人做的二級選單挺好看的。下載別人的Demo看起來比較麻煩，所以就嘗試了自己做一個簡單二級下拉選單：
效果圖如下：
下拉選單實現後的效果圖：
沒有做什麼美化，只是從功能上實現下拉選單
HTML程式碼：
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="content-type" type="text/html" charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/layout.css"> <script type="text/javascript" src="js/jquery.js"></script> </head> <body> <div id="header"> <div class="headerwrapper"> <!--logo--> <div class="logo"> <img src="images/logo.jpg" alt="hello "style="width:60px;height:60px;padding-left:40px;"> </div> <!--end logo--> <!-- nav start --> <div class="nav"> <!--start nav--> <div class="navbar"> <ul> <li><a href="">首 頁</a> <div class="listview"> <ul> <li><a href="#">關於</a> </li> <li><a href="#">內容</a> </li> <li><a href="#">註冊</a></li> <li><a href="#">帳號</a> </li> </ul> </div> </li> <li><a href="">註冊</a> <div class="listview"> <ul> <li><a href="#">first</a> </li> <li><a href="#">second</a> </li> <li><a href="#">third</a></li> <li><a href="#">four</a> </li> </ul> </div> </li> <li><a href="">登入</a> <div class="listview"> <ul> <li><a href="#">first</a> </li> <li><a href="#">second</a> </li> <li><a href="#">third</a></li> <li><a href="#">four</a> </li> </ul> </div> </li> <li><a href="">編碼</a> <div class="listview"> <ul> <li><a href="#">first</a> </li> <li><a href="#">second</a> </li> <li><a href="#">third</a></li> <li><a href="#">four</a> </li> </ul> </div> </li> <li><a href="">關於</a> <div class="listview"> <ul> <li><a href="#">first</a> </li> <li><a href="#">second</a> </li> <li><a href="#">third</a></li> <li><a href="#">four</a> </li> </ul> </div> </li> <li><a href="">文件</a> <div class="listview"> <ul> <li><a href="#">first</a> </li> <li><a href="#">second</a> </li> <li><a href="#">third</a></li> <li><a href="#">four</a> </li> </ul> </div> </li> </ul> </div> <!--end navbar--> </div> <!--end nav--> </div> <!--end headerwrapper--> </div> <!--end header--> <!--container--> <div id="container"></div> <!--footer--> <div id="footer"></div> <script type="text/javascript"> $(document).ready(function(){ $(".navbar ul li").mouseenter(function(){ $(".listview",this).show(function(){ $(".navbar ul li").mouseleave(function(){ $(".listview",this).hide();}); }); ;}); }); </script> </body> </html>
樣式表CSS:<pre name="code" class="css">body{font-size:14px;background-color:white;line-height:20px;} /* header css*/ #header{margin:0 auto;height:70px;width:90%;background-color:#fdf6e3;} .headerwrapper{width:960px;margin:0 auto;background-color:#fdf6e3;} .logo{width:20%;float:left;height:60px;} .nav{width:70%;float:left;height:60px;} /*.navbar{margin:0 auto;height:60px;position:fixed;}*/ ul{display:block;font-size:20px;cursor: pointer;} li{list-style:none;float:left;width:80px;text-indent:10px;} li a{text-decoration: none;} a:hover{margin-top:10px;color:blue;background-color: yellow;} .listview{margin-left:-47px;display:none;background-color:pink;} .listview ul{cursor:pointer;width :100px;} .listview li {list-style:none;padding-top:3px;background-color: gray;} .listview li a:hover{margin-top:10px;background-color:yellow;font-size:24px;} /* container css*/ #container{margin:20px auto;width:80%;h} /* footer css*/ #footer{ margin:20px auto;width:85%;}
其中主要的功能性JQUery程式碼為：
<script type="text/javascript">
$(document).ready(function(){
$(".navbar ul li").mouseenter(function(){
$(".listview",this).show(function(){
$(".navbar ul li").mouseleave(function(){
$(".listview",this).hide();});
});
;});
});
</script>
這是我在學習過程中自己寫的一個demo,不足之處希望各位指教，