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

2019-11-20 21:25:32

字體：大中小

供稿：網(wǎng)友

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

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

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

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

CSS中

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

 
ul,li{ 
/*清除ul和li上的小圓點(diǎn)*/ 
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)裝載完成時(shí)，執(zhí)行的代碼 
$(".main> a,.hmain a").click(function(){ 
//找到主菜單項(xiàng)對應(yīng)的子菜單項(xià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')"); 
} 
} 
} 

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

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

上一篇：調(diào)用HttpHanlder的幾種返回方式小結(jié)

下一篇：jquery prop的使用介紹及與attr的區(qū)別