下拉菜單
下拉導航javascript
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery彈出下拉導航菜單 - www.daimajiayuan.com</title> <link type="text/css" href="css/style.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> </head> <body> <div class="nav_menu"> <div class="nav"> <div class="list" id="navlist"> <ul id="navfouce"> <li><a href="#/">公司概況</a></li> <li><a href="#/">產品展現</a></li> <li><a href="#/">新聞動態</a></li> <li><a href="#/">營銷網絡</a></li> <li><a href="#/">照明知識</a></li> <li><a href="#/">人力資源</a></li> <li><a href="#/">客服中心</a></li> <li><a href="#/">聯繫咱們</a></li> </ul> </div> <div class="box" id="navbox" style="height:0px;opacity:0;overflow:hidden;"> <div class="cont" style="display:none;"> <ul class="sublist clearfix"> <li> <h3 class="mcate-item-hd"><span>服飾內衣</span></h3> <p class="mcate-item-bd"> <a href="#">女裝</a> <a href="#">男裝</a> <a href="#">內衣</a> <a href="#">家居服</a> <a href="#">配件</a> <a href="#">羽絨</a> <a href="#">呢大衣</a> <a href="#">毛衣</a> </p> </li> <li> <h3 class="mcate-item-hd"><span>鞋 箱包</span></h3> <p class="mcate-item-bd"> <a href="#">女鞋</a> <a href="#">男鞋</a> <a href="#">箱包</a> <a href="#">女包</a> <a href="#">男包</a> <a href="#">旅行箱</a> <a href="#">錢包 </a> </p> </li> <li> <h3 class="mcate-item-hd"><span>珠寶、手錶</span></h3> <p class="mcate-item-bd"> <a href="#">飾品</a> <a href="#">項鍊</a> <a href="#">珠寶</a> <a href="#">鑽石</a> <a href="#">手錶</a> </p> </li> <li> <h3 class="mcate-item-hd"><span>化妝品</span></h3> <p class="mcate-item-bd"> <a href="#">護膚</a> <a href="#">彩妝</a> <a href="#">香水</a> <a href="#">男士</a> <a href="#">精油</a> <a href="#">假髮</a> <a href="#">美體</a> <a href="#">試用服務</a> </p> </li> <li> <h3 class="mcate-item-hd"><span>運動 戶外</span></h3> <p class="mcate-item-bd"> <a href="#">運動鞋</a> <a href="#">運動服</a> <a href="#">運動用品</a> <a href="#">戶外</a> </p> </li> <li> <h3 class="mcate-item-hd"><span>手機 數碼</span></h3> <p class="mcate-item-bd"> <a href="#">手機</a> <a href="#">筆記本</a> <a href="#">相機</a> <a href="#">平板電腦</a> <a href="#">配件</a> <a href="#">電腦硬件</a> </p> </li> <li> <h3 class="mcate-item-hd"><span>家用電器</span></h3> <p class="mcate-item-bd"> <a href="#">你們電</a> <a href="#">影音電器</a> <a href="#">生活電器</a> <a href="#">廚房電器</a> <a href="#">健康護理</a> <a href="#">剃鬚刀</a> </p> </li> <li> <h3 class="mcate-item-hd"><span>傢俱 建材</span></h3> <p class="mcate-item-bd"> <a href="#">傢俱</a> <a href="#">衛浴</a> <a href="#">地板</a> <a href="#">燈具</a> <a href="#">五金</a> <a href="#">開關</a> <a href="#">裝修設計</a> </p> </li> <li> <h3 class="mcate-item-hd"><span>家紡 居家</span></h3> <p class="mcate-item-bd"> <a href="#">家紡</a> <a href="#">磨毛套件</a> <a href="#">羽絨被</a> <a href="#">枕頭</a> <a href="#">軟飾</a> <a href="#">居家</a> <a href="#">廚房</a> </p> </li> <li> <h3 class="mcate-item-hd"><span>食品</span></h3> <p class="mcate-item-bd"> <a href="#">零食</a> <a href="#">進口</a> <a href="#">茶葉</a> <a href="#">衝飲</a> <a href="#">酒水</a> <a href="#">糧油</a> <a href="#">乾貨</a> <a href="#">生鮮</a> </p> </li> <li> <h3 class="mcate-item-hd"><span>醫藥保健</span></h3> <p class="mcate-item-bd"> <a href="#">保健</a> <a href="#">滋補</a> <a href="#">蛋白粉</a> <a href="#">阿膠</a> <a href="#">藥品</a> <a href="#">血壓儀</a> <a href="#">計生</a> <a href="#">體檢</a> </p> </li> <li> <h3 class="mcate-item-hd"><span>母嬰用品</span></h3> <p class="mcate-item-bd"> <a href="#">玩具</a> <a href="#">寶寶食品</a> <a href="#">用品</a> <a href="#">童裝</a> <a href="#">孕裝</a> </p> </li> <li> <h3 class="mcate-item-hd"><span>汽車 配件</span></h3> <p class="mcate-item-bd"> <a href="#">新車</a> <a href="#">座墊</a> <a href="#">腳墊</a> <a href="#">GPS</a> <a href="#">車衣</a> <a href="#">洗車機</a> <a href="#">水槍</a> </p> </li> <li> <h3 class="mcate-item-hd"><span>文化 玩樂</span></h3> <p class="mcate-item-bd"> <a href="#">電子憑證</a> <a href="#">圖書</a> <a href="#">樂器</a> <a href="#">旅遊</a> <a href="#">鮮花</a> </p> </li> </ul> </div> <div class="cont" style="display:none;"> <ul class="sublist clearfix"> <li> <h3 class="mcate-item-hd"><span>服飾內衣</span></h3> <p class="mcate-item-bd"> <a href="#">女裝</a> <a href="#">男裝</a> <a href="#">內衣</a> <a href="#">家居服</a> <a href="#">配件</a> <a href="#">羽絨</a> <a href="#">呢大衣</a> <a href="#">毛衣</a> </p> </li> <li> <h3 class="mcate-item-hd"><span>鞋 箱包</span></h3> <p class="mcate-item-bd"> <a href="#">女鞋</a> <a href="#">男鞋</a> <a href="#">箱包</a> <a href="#">女包</a> <a href="#">男包</a> <a href="#">旅行箱</a> <a href="#">錢包 </a> </p> </li> <li> <h3 class="mcate-item-hd"><span>珠寶、手錶</span></h3> <p class="mcate-item-bd"> <a href="#">飾品</a> <a href="#">項鍊</a> <a href="#">珠寶</a> <a href="#">鑽石</a> <a href="#">手錶</a> </p> </li> <li> <h3 class="mcate-item-hd"><span>化妝品</span></h3> <p class="mcate-item-bd"> <a href="#">護膚</a> <a href="#">彩妝</a> <a href="#">香水</a> <a href="#">男士</a> <a href="#">精油</a> <a href="#">假髮</a> <a href="#">美體</a> <a href="#">試用服務</a> </p> </li> <li> <h3 class="mcate-item-hd"><span>運動 戶外</span></h3> <p class="mcate-item-bd"> <a href="#">運動鞋</a> <a href="#">運動服</a> <a href="#">運動用品</a> <a href="#">戶外</a> </p> </li> <li> <h3 class="mcate-item-hd"><span>手機 數碼</span></h3> <p class="mcate-item-bd"> <a href="#">手機</a> <a href="#">筆記本</a> <a href="#">相機</a> <a href="#">平板電腦</a> <a href="#">配件</a> <a href="#">電腦硬件</a> </p> </li> <li> <h3 class="mcate-item-hd"><span>家用電器</span></h3> <p class="mcate-item-bd"> <a href="#">你們電</a> <a href="#">影音電器</a> <a href="#">生活電器</a> <a href="#">廚房電器</a> <a href="#">健康護理</a> <a href="#">剃鬚刀</a> </p> </li> <li> <h3 class="mcate-item-hd"><span>傢俱 建材</span></h3> <p class="mcate-item-bd"> <a href="#">傢俱</a> <a href="#">衛浴</a> <a href="#">地板</a> <a href="#">燈具</a> <a href="#">五金</a> <a href="#">開關</a> <a href="#">裝修設計</a> </p> </li> <li> <h3 class="mcate-item-hd"><span>家紡 居家</span></h3> <p class="mcate-item-bd"> <a href="#">家紡</a> <a href="#">磨毛套件</a> <a href="#">羽絨被</a> <a href="#">枕頭</a> <a href="#">軟飾</a> <a href="#">居家</a> <a href="#">廚房</a> </p> </li> <li> <h3 class="mcate-item-hd"><span>食品</span></h3> <p class="mcate-item-bd"> <a href="#">零食</a> <a href="#">進口</a> <a href="#">茶葉</a> <a href="#">衝飲</a> <a href="#">酒水</a> <a href="#">糧油</a> <a href="#">乾貨</a> <a href="#">生鮮</a> </p> </li> </ul> </div> <div class="cont" style="display:none;"> <ul class="sublist clearfix"> <li> <h3 class="mcate-item-hd"><span>服飾內衣</span></h3> <p class="mcate-item-bd"> <a href="#">女裝</a> <a href="#">男裝</a> <a href="#">內衣</a> <a href="#">家居服</a> <a href="#">配件</a> <a href="#">羽絨</a> <a href="#">呢大衣</a> <a href="#">毛衣</a> </p> </li> <li> <h3 class="mcate-item-hd"><span>鞋 箱包</span></h3> <p class="mcate-item-bd"> <a href="#">女鞋</a> <a href="#">男鞋</a> <a href="#">箱包</a> <a href="#">女包</a> <a href="#">男包</a> <a href="#">旅行箱</a> <a href="#">錢包 </a> </p> </li> <li> <h3 class="mcate-item-hd"><span>珠寶、手錶</span></h3> <p class="mcate-item-bd"> <a href="#">飾品</a> <a href="#">項鍊</a> <a href="#">珠寶</a> <a href="#">鑽石</a> <a href="#">手錶</a> </p> </li> <li> <h3 class="mcate-item-hd"><span>化妝品</span></h3> <p class="mcate-item-bd"> <a href="#">護膚</a> <a href="#">彩妝</a> <a href="#">香水</a> <a href="#">男士</a> <a href="#">精油</a> <a href="#">假髮</a> <a href="#">美體</a> <a href="#">試用服務</a> </p> </li> <li> <h3 class="mcate-item-hd"><span>運動 戶外</span></h3> <p class="mcate-item-bd"> <a href="#">運動鞋</a> <a href="#">運動服</a> <a href="#">運動用品</a> <a href="#">戶外</a> </p> </li> </ul> </div> <div class="cont" style="display:none;">3<br />3</div> <div class="cont" style="display:none;">4<br />3<br />4</div> <div class="cont" style="display:none;">5</div> <div class="cont" style="display:none;">6<br />3<br />3</div> <div class="cont" style="display:none;">7<br />3<br />3<br />3</div> </div> </div> </div> <script type="text/javascript"> (function(){ var time = null; var list = $("#navlist"); var box = $("#navbox"); var lista = list.find("a"); for(var i=0,j=lista.length;i<j;i++){ if(lista[i].className == "now"){ var olda = i; } } var box_show = function(hei){ box.stop().animate({ height:hei, opacity:1 },400); } var box_hide = function(){ box.stop().animate({ height:0, opacity:0 },400); } lista.hover(function(){ lista.removeClass("now"); $(this).addClass("now"); clearTimeout(time); var index = list.find("a").index($(this)); box.find(".cont").hide().eq(index).show(); var _height = box.find(".cont").eq(index).height()+54; box_show(_height) },function(){ time = setTimeout(function(){ box.find(".cont").hide(); box_hide(); },50); lista.removeClass("now"); lista.eq(olda).addClass("now"); }); box.find(".cont").hover(function(){ var _index = box.find(".cont").index($(this)); lista.removeClass("now"); lista.eq(_index).addClass("now"); clearTimeout(time); $(this).show(); var _height = $(this).height()+54; box_show(_height); },function(){ time = setTimeout(function(){ $(this).hide(); box_hide(); },50); lista.removeClass("now"); lista.eq(olda).addClass("now"); }); })(); </script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>來源：<a href="http://www.daimajiayuan.com/" target="_blank">代碼家園</a></p> </div> </body> </html>
csscss
@charset "utf-8"; *{margin:0;padding:0;list-style-type:none;} a,img{border:0;text-decoration:none;} body{ font: 12px/180% Arial, Helvetica, sans-serif, "新宋體"; background-color: #E8E8E8; } .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden} .clearfix{display:inline-table} *html .clearfix{height:1%} .clearfix{display:block} *+html .clearfix{min-height:1%} /* nav_menu */ .nav_menu{ height: 42px; background-color: #333333; } .nav{width:1006px;height:41px;position:relative;margin:0 auto;} .nav .list li{float:left;} .nav .list a{float:left;display:block;width:125px;height:42px;text-align:center;font:bold 13px/36px "微軟雅黑";color:#fff;} .nav .list a:hover{color:#FFA304;} .nav .list a:hover,.nav .list .now{color:#F00;background:#fff;} .nav .box{position:absolute;left:-5px;top:42px;width:1006px;background:#FFF;overflow:hidden;height:0;filter:alpha(opacity=0);opacity:0;border-bottom:2px solid #074c52;} .nav .cont{position:relative;padding:25px 0 0px 24px;} /* sublist */ .sublist li{float:left;width:168px;padding-right:24px;padding-bottom:24px;} .sublist li h3.mcate-item-hd{font-family:'微軟雅黑';padding-left:2px;font-size:14px;height:26px;line-height:26px;border-bottom:1px dashed #666666;} .sublist li p.mcate-item-bd{padding-left:2px;} .sublist li p.mcate-item-bd a{height:26px;line-height:26px;margin-right:5px;font-size:12px;color:#666666;text-decoration:none;display:inline-block;} .sublist li p.mcate-item-bd a:hover{color:#6c5143;text-decoration:underline;}
相關文章
- 1. 下拉菜單
- 2. 動畫導航菜單,下拉菜單,多級下拉菜單
- 3. Bootstrap 下拉菜單
- 4. Bootstrap-下拉菜單
- 5. CSS下拉菜單
- 6. dropdown 下拉菜單
- 7. CSS 下拉菜單
- 8. Spinner--下拉菜單
- 9. jQuery下拉菜單
- 10. IOS 下拉菜單
- 更多相關文章...
- • ionic 上拉菜單(ActionSheet) - ionic 教程
- • ionic 下拉刷新 - ionic 教程
- • Docker容器實戰(七) - 容器眼光下的文件系統
- • IDEA下SpringBoot工程配置文件沒有提示
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Window下Ribbit MQ安裝
- 2. Linux下Redis安裝及集羣搭建
- 3. shiny搭建網站填坑戰略
- 4. Mysql8.0.22安裝與配置詳細教程
- 5. Hadoop安裝及配置
- 6. Python爬蟲初學筆記
- 7. 部署LVS-Keepalived高可用集羣
- 8. keepalived+mysql高可用集羣
- 9. jenkins 公鑰配置
- 10. HA實用詳解
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 下拉菜單
- 2. 動畫導航菜單,下拉菜單,多級下拉菜單
- 3. Bootstrap 下拉菜單
- 4. Bootstrap-下拉菜單
- 5. CSS下拉菜單
- 6. dropdown 下拉菜單
- 7. CSS 下拉菜單
- 8. Spinner--下拉菜單
- 9. jQuery下拉菜單
- 10. IOS 下拉菜單