jQuery實(shí)現(xiàn)向下滑出的二級(jí)菜單效果實(shí)例
更新時(shí)間：2015年08月22日 10:57:47 作者：企鵝
這篇文章主要介紹了jQuery實(shí)現(xiàn)向下滑出的二級(jí)菜單效果,涉及jquery鼠標(biāo)事件及頁(yè)面元素樣式動(dòng)態(tài)變換的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了jQuery實(shí)現(xiàn)向下滑出的二級(jí)菜單效果。分享給大家供大家參考。具體如下：
這里用jQuery實(shí)現(xiàn)向下滑出的二級(jí)菜單代碼，滑出菜單，鼠標(biāo)放在主菜單的任意一項(xiàng)上，就會(huì)向下滑出二級(jí)的子菜單。當(dāng)然本代碼只是一個(gè)演示，有些菜單是隨便弄的，經(jīng)過(guò)測(cè)試，兼容IE8、火狐和Chrome等瀏覽器，有興趣的你可以自己試下。
運(yùn)行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/jquery-down-show-2menu-style-codes/
具體代碼如下：
<!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>
<title>jQuery緩慢彈出下拉導(dǎo)航</title>
<style>
*{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;}
</style>
<script type="text/javascript" src="jquery-1.6.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="#">產(chǎn)品展示</a></li>
<li><a href="#">新聞動(dòng)態(tài)</a></li>
<li><a href="#">營(yíng)銷網(wǎng)絡(luò)</a></li>
<li><a href="#">照明知識(shí)</a></li>
<li><a href="#">人力資源</a></li>
<li><a href="#">客服中心</a></li>
<li><a href="#">聯(lián)系我們</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>服飾內(nèi)衣</span></h3>
<p class="mcate-item-bd">
<a href="#">女裝</a>
<a href="#">男裝</a>
<a href="#">內(nèi)衣</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="#">項(xiàng)鏈</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="#">護(hù)膚</a>
<a href="#">彩妝</a>
<a href="#">香水</a>
<a href="#">男士</a>
<a href="#">精油</a>
<a href="#">假發(fā)</a>
<a href="#">美體</a>
<a href="#">試用服務(wù)</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd"><span>運(yùn)動(dòng) 戶外</span></h3>
<p class="mcate-item-bd">
<a href="#">運(yùn)動(dòng)鞋</a>
<a href="#">運(yùn)動(dòng)服</a>
<a href="#">運(yùn)動(dòng)用品</a>
<a href="#">戶外</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd"><span>手機(jī) 數(shù)碼</span></h3>
<p class="mcate-item-bd">
<a href="#">手機(jī)</a>
<a href="#">筆記本</a>
<a href="#">相機(jī)</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="#">健康護(hù)理</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="#">衛(wèi)浴</a>
<a href="#">地板</a>
<a href="#">燈具</a>
<a href="#">五金</a>
<a href="#">開關(guān)</a>
<a href="#">裝修設(shè)計(jì)</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="#">進(jìn)口</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>醫(yī)藥保健</span></h3>
<p class="mcate-item-bd">
<a href="#">保健</a>
<a href="#">滋補(bǔ)</a>
<a href="#">蛋白粉</a>
<a href="#">阿膠</a>
<a href="#">藥品</a>
<a href="#">血壓儀</a>
<a href="#">計(jì)生</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="#">洗車機(jī)</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>服飾內(nèi)衣</span></h3>
<p class="mcate-item-bd">
<a href="#">女裝</a>
<a href="#">男裝</a>
<a href="#">內(nèi)衣</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="#">項(xiàng)鏈</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="#">護(hù)膚</a>
<a href="#">彩妝</a>
<a href="#">香水</a>
<a href="#">男士</a>
<a href="#">精油</a>
<a href="#">假發(fā)</a>
<a href="#">美體</a>
<a href="#">試用服務(wù)</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd"><span>運(yùn)動(dòng) 戶外</span></h3>
<p class="mcate-item-bd">
<a href="#">運(yùn)動(dòng)鞋</a>
<a href="#">運(yùn)動(dòng)服</a>
<a href="#">運(yùn)動(dòng)用品</a>
<a href="#">戶外</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd"><span>手機(jī) 數(shù)碼</span></h3>
<p class="mcate-item-bd">
<a href="#">手機(jī)</a>
<a href="#">筆記本</a>
<a href="#">相機(jī)</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="#">健康護(hù)理</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="#">衛(wèi)浴</a>
<a href="#">地板</a>
<a href="#">燈具</a>
<a href="#">五金</a>
<a href="#">開關(guān)</a>
<a href="#">裝修設(shè)計(jì)</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="#">進(jìn)口</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>服飾內(nèi)衣</span></h3>
<p class="mcate-item-bd">
<a href="#">女裝</a>
<a href="#">男裝</a>
<a href="#">內(nèi)衣</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="#">項(xiàng)鏈</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="#">護(hù)膚</a>
<a href="#">彩妝</a>
<a href="#">香水</a>
<a href="#">男士</a>
<a href="#">精油</a>
<a href="#">假發(fā)</a>
<a href="#">美體</a>
<a href="#">試用服務(wù)</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd"><span>運(yùn)動(dòng) 戶外</span></h3>
<p class="mcate-item-bd">
<a href="#">運(yùn)動(dòng)鞋</a>
<a href="#">運(yùn)動(dòng)服</a>
<a href="#">運(yùn)動(dòng)用品</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>
</body>
</html>
希望本文所述對(duì)大家的jquery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)的淡入淡出二級(jí)菜單效果代碼
- 基于jQuery實(shí)現(xiàn)的向下滑動(dòng)二級(jí)菜單效果代碼
- jquery實(shí)現(xiàn)像柵欄一樣左右滑出式二級(jí)菜單效果代碼
- jquery+css實(shí)現(xiàn)的紅色線條橫向二級(jí)菜單效果
- 鼠標(biāo)懸浮顯示二級(jí)菜單效果的jquery實(shí)現(xiàn)
- jquery實(shí)現(xiàn)帶二級(jí)菜單的導(dǎo)航示例
- jquery實(shí)現(xiàn)樹形二級(jí)菜單實(shí)例代碼
- 用jquery生成二級(jí)菜單的實(shí)例代碼
- jquery實(shí)現(xiàn)的簡(jiǎn)單二級(jí)菜單效果代碼
相關(guān)文章
jQuery contains過(guò)濾器實(shí)現(xiàn)精確匹配使用方法
contains 選擇器選取包含指定字符串的元素。該字符串可以是直接包含在元素中的文本，或者被包含于子元素中。經(jīng)常與其他元素/選擇器一起使用，來(lái)選擇指定的組中包含指定文本的元素2013-04-04
這篇文章主要介紹了jquery中ajax跨域方法,結(jié)合實(shí)例分析了jQuery中使用getJSON及$.ajax實(shí)現(xiàn)ajax跨域的技巧,需要的朋友可以參考下2015-12-12
詳解Jquery 遍歷數(shù)組之$().each方法與$.each()方法介紹
這篇文章主要介紹了詳解Jquery 遍歷數(shù)組之$().each方法與$.each()方法介紹 ,具有一定的參考價(jià)值，有興趣的可以了解一下。2017-01-01
jQuery ready()和onload的加載耗時(shí)分析
這篇文章主要介紹了jQuery ready()和onload的加載耗時(shí),結(jié)合實(shí)例形式對(duì)比分析了jQuery中的ready()和JavaScript的window.onload進(jìn)行頁(yè)面加載的時(shí)間,需要的朋友可以參考下2016-09-09
bootstrap table 服務(wù)器端分頁(yè)例子分享
這篇文章主要介紹了bootstrap table 服務(wù)器端分頁(yè)例子分享,需要的朋友可以參考下2015-02-02
jquery+CSS3實(shí)現(xiàn)3D拖拽相冊(cè)效果
這篇文章主要為大家詳細(xì)介紹了jquery+CSS3實(shí)現(xiàn)3D拖拽相冊(cè)效果的具體代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-07-07
jquery 模擬雅虎首頁(yè)的點(diǎn)擊對(duì)話框效果
jquery模擬雅虎首頁(yè)的點(diǎn)擊對(duì)話框效果實(shí)現(xiàn)代碼，喜歡的朋友可以參考下。2010-04-04
jquery?追加元素append、prepend、before、after用法與區(qū)別分析
在jquery中append、prepend、before、after方法是對(duì)數(shù)據(jù)元素節(jié)點(diǎn)的操作系列方法了，這些方法大家了解嗎？如果不了解就可以和小編來(lái)看看它們用法2016-12-12
我們經(jīng)常遇到要操作DOM元素，例如<select>，在Asp.net中Dropdownlist原型就是select。2010-05-05
日期函數(shù)在程序開發(fā)中是一個(gè)重要的工具,js也提供了Date()函數(shù),如獲取當(dāng)前時(shí)間,當(dāng)前年月,已經(jīng)系統(tǒng)時(shí)間的毫秒數(shù)。2016-10-10