快捷導(dǎo)航

JQuery實現(xiàn)絢麗的橫向下拉菜單

更新時間：2013年12月19日 18:03:15 作者：

以前經(jīng)?？匆娋W(wǎng)站有菜單的顯示，鼠標(biāo)移上去就出現(xiàn)下拉的效果，下面為大家介紹下,下面為大家介紹下JQuery實現(xiàn)的橫向下拉菜單

以前經(jīng)?？匆娋W(wǎng)站有菜單的顯示，鼠標(biāo)移上去就出現(xiàn)下拉的效果，很絢麗，經(jīng)過看JQuery視頻后，發(fā)現(xiàn)實現(xiàn)也挺容易的。

Html中，通過<ul>和<li>標(biāo)簽將所需的元素寫出來。

 
<body> 
<ul> 
<li class="hmain"> 
<a href="#">菜單項1</a> 
<ul> 
<li> 
<a href="#"> 子菜單項11</a> 
</li> 
<li> 
<a href="#">子菜單項12</a> 
</li> 
</ul> 
</li> 
<li class="hmain"> 
<a href="#">菜單項2</a> 
<ul> 
<li> 
<a href="#">子菜單項21</a> 
</li> 
<li> 
<a href="#">子菜單項22</a> 
</li> 
</ul> 
</li> 
<li class="hmain"> 
<a href="#">菜單項3</a> 
<ul> 
<li> 
<a href="#">子菜單項31</a> 
</li> 
<li> 
<a href="#">子菜單項32</a> 
</li> 
</ul> 
</li> 
</ul> 
</body> 

最外圍的<ul>中元素<li>即為菜單項1、菜單項2、菜單項3，下拉菜單分別在各主菜單之下，如果菜單最外層為ul，一層每個主菜單放在一個li中，如果有子菜單，在這個主菜單的li中建立新的ul，再依次嵌套即可構(gòu)建多層的菜單。

CSS中

復(fù)制代碼代碼如下:

 
ul,li{ 
/*清除ul和li上的小圓點*/ 
list-style:none; 
} 
ul{ 
/*清除子菜單的縮進(jìn)值*/ 
padding:0; 
margin:0; 

} 
.hmain{ 
background-image:url(../images/title.gif); //前面的小三角 
background-repeat:repeat-x; 
width:120px; 
} 
li{ 
background-color:#EEEEEE; //背景圖片覆蓋背景色 
} 
a{ 
//取消所有的下劃線 
text-decoration:none; 
padding-left:20px; 
display:block; /*塊集元素可充滿區(qū)域*/ 
display:inline-block; 
width:100px; 
padding-top:3px; 
padding-bottom:3px; 
} 
.hmain a{ 
color:white; 
background-image:url(../images/collapsed.gif); 
background-repeat:no-repeat; 
background-position:3px center; 
} 
.hmain li a{ 
color:black; 
background-image:none; 
} 
.hmain ul{ 
display:none; 
} 
.hmain{ 
float:left; 
margin-right:1px; 
}<strong> 
</strong> 

Html中引用js文件jquery.js和menu.js,其中menu.js如下：

復(fù)制代碼代碼如下:

 
$(document).ready(function(){ 
//頁面中的DOM已經(jīng)裝載完成時，執(zhí)行的代碼 
$(".main> a,.hmain a").click(function(){ 
//找到主菜單項對應(yīng)的子菜單項 
var ulNode=$(this).next("ul"); 
ulNode.slideToggle(); 
changeIcon($(this)); 
}); 
$(".hmain").hover(function(){ 
$(this).children ("ul").slideToggle(); 
changeIcon($(this).children("a")); 
},function(){ 
$(this).children("ul").slideToggle(); 
changeIcon($(this).children("a")); 
}); 
}); 
/* 
*修改主菜單的指示圖標(biāo) 
*/ 
function changeIcon(mainNode){ 
if(mainNode){ 
if(mainNode.css("background-image").indexOf("collapsed.gif")>=0){ 
mainNode.css("background-image","url('images/expanded.gif')"); 
}else{ 
mainNode.css("background-image","url('images/collapsed.gif')"); 
} 
} 
} 

這樣絢麗的下拉菜單就完成了。實現(xiàn)很簡單，不過里面的小知識點很零碎。例如：.main a和.main>a的不同之處，前者選擇使用.main的這個class的元素內(nèi)容所有的a節(jié)點，后者只選擇.main的子節(jié)點中的a節(jié)點。

這樣的例子應(yīng)用性很強(qiáng)，在網(wǎng)站中使用讓界面顯得更加的美觀，例子才看3個，抓緊時間繼續(xù)看...

您可能感興趣的文章: