首页 > 代码库 > jQuery-导航下拉菜单-实用简单
jQuery-导航下拉菜单-实用简单
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="http://www.mamicode.com/#">首頁</a> 31 <ul class="nav_2"> 32 <li><a href="http://www.mamicode.com/#">媒體專訪</a></li> 33 <li><a href="http://www.mamicode.com/#">市場焦點</a></li> 34 </ul> 35 </li> 36 <li><a href="http://www.mamicode.com/#">物業搜尋</a> 37 <ul class="nav_2"> 38 <li><a href="http://www.mamicode.com/#">地圖搵樓</a></li> 39 <li><a href="http://www.mamicode.com/#">二手物業</a></li> 40 <li><a href="http://www.mamicode.com/#">一手物業</a></li> 41 </ul> 42 </li> 43 <li><a href="http://www.mamicode.com/#">關於我們</a> 44 <ul class="nav_2"> 45 <li><a href="http://www.mamicode.com/#">銷售精英</a></li> 46 <li><a href="http://www.mamicode.com/#">年度冠軍</a></li> 47 <li><a href="http://www.mamicode.com/#">行內點滴</a></li> 48 <li><a href="http://www.mamicode.com/#">尊貴客戶</a></li> 49 </ul> 50 </li> 51 <li><a href="http://www.mamicode.com/#">成交記錄</a> 52 <ul class="nav_2"> 53 <li><a href="http://www.mamicode.com/#">填土廳登記</a></li> 54 <li><a href="http://www.mamicode.com/#">價格走勢</a></li> 55 </ul> 56 </li> 57 58 <li><a href="http://www.mamicode.com/#">物業按揭</a> 59 <ul class="nav_2"> 60 <li><a href="http://www.mamicode.com/#">按揭計算</a></li> 61 <li><a href="http://www.mamicode.com/#">銀行估價</a></li> 62 <li><a href="http://www.mamicode.com/#">銀行利率</a></li> 63 </ul> 64 </li> 65 <li><a href="http://www.mamicode.com/#">歡迎查詢</a> 66 <ul class="nav_2"> 67 <li><a href="http://www.mamicode.com/#">聯絡我們</a></li> 68 <li><a href="http://www.mamicode.com/#">加入我們</a></li> 69 </ul> 70 </li> 71 </ul> 72 </div>
jQuery-导航下拉菜单-实用简单
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。