JQuery實現絢麗的橫向下拉菜單

2019-11-20 21:25:32

字體：大中小

來源：轉載

供稿：網友

以前經常看見網站有菜單的顯示，鼠標移上去就出現下拉的效果，很絢麗，經過看JQuery視頻后，發現實現也挺容易的。

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

 
<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，再依次嵌套即可構建多層的菜單。

CSS中

復制代碼代碼如下:

 
ul,li{ 
/*清除ul和li上的小圓點*/ 
list-style:none; 
} 
ul{ 
/*清除子菜單的縮進值*/ 
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; /*塊集元素可充滿區域*/ 
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如下：

復制代碼代碼如下:

 
$(document).ready(function(){ 
//頁面中的DOM已經裝載完成時，執行的代碼 
$(".main> a,.hmain a").click(function(){ 
//找到主菜單項對應的子菜單項 
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")); 
}); 
}); 
/* 
*修改主菜單的指示圖標 
*/ 
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')"); 
} 
} 
} 

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

這樣的例子應用性很強，在網站中使用讓界面顯得更加的美觀，例子才看3個，抓緊時間繼續看...

上一篇：調用HttpHanlder的幾種返回方式小結

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