jQuery-导航下拉菜单-实用简单

Posted 2020-09-05 极速小乌龟

 1 /*CSS代碼*/
 2 /*導航*/
 3 .nav{background: url("../img/menu_bar.gif") repeat-x;}
 4 .nav ul li{display: inline-block; height: 40px; line-height: 40px; margin-left: 20px;}
 5 .nav ul li a{font-size: 15pt; font-weight: bold; text-decoration: none; color:#fff; letter-spacing: 5px; display: block; padding:0 18px;}
 6 .nav ul li a:hover{background:url("../img/submenu_bg.gif") repeat;}
 7 /*二級導航*/
 8 .nav .nav_2 {display: none; position: absolute;  margin: 0; padding:0; background:url("../img/submenu_bg.gif") repeat;}
 9 .nav .curreves{display: block;}
10 .nav .nav_2 li{margin-left: 0; white-space: nowrap; display: block; width: 136px;}
11 .nav .nav_2 li a{font-size: 12pt;}
12 .nav .nav_2 li a:hover{color:#ffff00;}
13 
14 /*jQuery 代碼*/
15 $(document).ready(function(){
16     $(".nav>ul>li").hover(function(){
17         /* find()搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。*/
18         /* slideDown() 下拉屬性 .prev()相鄰元素 .css樣式*/
19         /* slideUp() 上拉屬性 */
20         $(this).find("ul").slideDown().prev("a").css({background:"url(img/submenu_bg.gif)"});
21     },function(){
22         $(this).find("ul").slideUp().prev("a").css({background:"none"})
23     })
24 })
25 
26 /*html代碼*/
27 
28 <div class="nav">
29     <ul>
30         <li><a href="#">首頁</a>
31             <ul class="nav_2">
32                 <li><a href="#">媒體專訪</a></li>
33                 <li><a href="#">市場焦點</a></li>
34             </ul>
35         </li>
36         <li><a href="#">物業搜尋</a>
37             <ul class="nav_2">
38                 <li><a href="#">地圖搵樓</a></li>
39                 <li><a href="#">二手物業</a></li>
40                 <li><a href="#">一手物業</a></li>
41             </ul>
42         </li>
43         <li><a href="#">關於我們</a>
44             <ul class="nav_2">
45                 <li><a href="#">銷售精英</a></li>
46                 <li><a href="#">年度冠軍</a></li>
47                 <li><a href="#">行內點滴</a></li>
48                 <li><a href="#">尊貴客戶</a></li>
49             </ul>
50         </li>
51         <li><a href="#">成交記錄</a>
52             <ul class="nav_2">
53                 <li><a href="#">填土廳登記</a></li>
54                 <li><a href="#">價格走勢</a></li>
55             </ul>
56         </li>
57 
58         <li><a href="#">物業按揭</a>
59             <ul class="nav_2">
60                 <li><a href="#">按揭計算</a></li>
61                 <li><a href="#">銀行估價</a></li>
62                 <li><a href="#">銀行利率</a></li>
63             </ul>
64         </li>
65         <li><a href="#">歡迎查詢</a>
66             <ul class="nav_2">
67                 <li><a href="#">聯絡我們</a></li>
68                 <li><a href="#">加入我們</a></li>
69             </ul>
70         </li>
71     </ul>
72 </div>