jQuery實現菜單顯示效果

更新時間：2019年12月11日 09:50:40 作者：羅俊-Everns

這篇文章主要為大家詳細介紹了jQuery實現菜單顯示效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

前言

上一篇博客更新了在頁面中可以像Excel表格一樣輸入的表格，這篇博客介紹一下我們經常可以在各大網站看到的菜單欄顯示效果的程序。

內容

顯示效果：

照例，先上代碼，

HTML代碼：

<!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>jQuery實踐3-菜單效果</title>
 <script src="script/jquery-1.8.2.js"></script>
 <script src="script/menu.js"></script>
 <link href="CSS/menu.css" rel="stylesheet" />
 </head>
 <body>
 <ul>
 <li class="main">
 <a href="#" >菜單項1
 </a>
 <ul>
  <li><a href="#" >子菜單項1.1</a></li>
  <li><a href="#" >子菜單項1.2</a></li>
  <li><a href="#" >子菜單項1.3</a></li>
 </ul>
 </li>
 <li class="main">
 <a href="#" >菜單項2
 </a>
 <ul>
  <li><a href="#" >子菜單項2.1</a></li>
  <li><a href="#" >子菜單項2.2</a></li>
  <li><a href="#" >子菜單項2.3</a></li>
 </ul>
 </li>
 <li class="main">
 <a href="#" >菜單項3
 </a>
 <ul>
  <li><a href="#" >子菜單項3.1</a></li>
  <li><a href="#" >子菜單項3.2</a></li>
  <li><a href="#" >子菜單項3.3</a></li>
 </ul>
 </li>
 </ul>
 <br />
 <br />
 <br />
 <br />
 <ul>
 <li class="hmain">
 <a href="#" >菜單項1
 </a>
 <ul>
  <li><a href="#" >子菜單項1.1</a></li>
  <li><a href="#" >子菜單項1.2</a></li>
  <li><a href="#" >子菜單項1.3</a></li>
 </ul>
 </li>
 <li class="hmain">
 <a href="#" >菜單項2
 </a>
 <ul>
  <li><a href="#" >子菜單項2.1</a></li>
  <li><a href="#" >子菜單項2.2</a></li>
  <li><a href="#" >子菜單項2.3</a></li>
 </ul>
 </li>
 <li class="hmain">
 <a href="#" >菜單項3
 </a>
 <ul>
  <li><a href="#" >子菜單項3.1</a></li>
  <li><a href="#" >子菜單項3.2</a></li>
  <li><a href="#" >子菜單項3.3</a></li>
 </ul>
 </li>
 </ul>
 </body>
</html>

CSS代碼：

ul, li {
 /*清除ul和li前面的原點*/
 list-style: none;
 }

 ul {
 /*清除子菜單的縮進值*/
 padding: 0;
 margin: 0;
 }

 .main, .hmain {
 /*給出菜單欄背景圖片*/
 background-image: url(../img/菜單效果/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;
 }

 .main a, .hmain a{
 color: white;
 background-image: url(../img/菜單效果/collapsed.gif);
 background-repeat: no-repeat;
 background-position: 3px center;
 }

 .main li a, .hmain li a{
 color: black;
 background-image: none;
 }

 .main ul, .hmain ul{
 display: none;
 }

 .hmain {
 float: left;
 margin-left:1px;
}

JavaScript代碼：

$(document).ready(function () {
 //頁面中的DOM已經裝載完成時，執(zhí)行的代碼
 $(".main > a").click(function () {
 ////找到主菜單項對應的子菜單項
 var ulNode = $(this).next("ul");
 ulNode.slideToggle();
 changeIcon($(this));
 });

 //簡化成下列代碼
 $(".hmain ").hover(function () {
 $(this).children("ul").slideDown();
 changeIcon($(this).children("a"));
 }, function () {
 $(this).children("ul").slideUp();
 changeIcon($(this).children("a"));
 });
 });

 //修改主菜單的指示圖標
 function changeIcon(mainNode) {
 if (mainNode) {
 if (mainNode.css("background-image").indexOf("collapsed.gif") >= 0) {
 mainNode.css("background-image", "url('img/菜單效果/expanded.gif')");
 } else {
 mainNode.css("background-image", "url('img/菜單效果/collapsed.gif')");
 };
 };
};

這次代碼稍微有點長，但是對于一目十行的大神們來說這都不算啥！

總結

HTML知識點：

頁面中的菜單項可以通過嵌套的ul和li來表示
菜單最外層為ul，一層每個主菜單放在一個li中，如果有子菜單，在這個主菜單的li中建立新的ul，再依次嵌套即可構建多層的菜單
瀏覽器中ul和li元素默認情況下文字前都有圓點標識符，li元素會有縮進。Opera瀏覽器比較特殊，li的標識符和其他瀏覽器不同

CSS知識點：

list-style屬性值為none時，可以清除ul和li前面的小圓點
清除子菜單的縮進值，需要padding和margin都為0，其中IE6和IE7只有margin也為0的時候才可以清除縮進值
可以使用background-image來制定一個元素的背景圖，如果背景圖比元素的實際大小要小，那么背景圖會自動在橫向和縱向上重復顯示，直到填滿整個區(qū)域
可以使用bakeground-repeat來控制背景圖的重復填充方向
如果一個元素上同時定義了背景圖和背景色，那么有背景圖的地方是不會顯示背景色的
text-decoration屬性值為none時，可以取消文字的下劃線
background-position可以控制背景圖的位置，屬性值既可以用數值，也可以用center，left，top這些值來控制橫向和縱向的位置。這個屬性的兩個值，第一個對應橫向，第二個對應縱向
background-image的值為none表示沒有背景圖
background-repeat的值為no-repeat時，背景圖不會再所在的區(qū)域中重復顯示
IE6以外的其他瀏覽器可以通過設定display的值為block來讓a元素充滿所在的區(qū)域。對于IE6，則需要設定display為inline-block，同時設定a的寬度
display的值為none可以用于隱藏元素

JavaScript知識點：

main a 和 .main > a的不同之處，前者選擇使用了.main的這個class的元素內部所有的a節(jié)點，后者只選擇.main的子節(jié)點中的a節(jié)點
show,hide方法可以用于顯示或隱藏元素，沒有參數時的效果和修改css的display屬性效果一樣。參數可以是單位為毫秒的數字，或則“slow”“normal”“fast”這三個文字，都可以來控制完成顯示或隱藏需要的時間。注意這時動畫效果考不斷改變元素的寬度和高度來實現的
toggle方法更為強大，可以省去我們判斷元素是顯示還是隱藏的狀態(tài)，直接讓顯示的元素隱藏起來，隱藏的元素顯示出來。參數使用方法和show，hide相同
slideDown和slideUp可以實現向下或者向上卷動的效果，實際上試通過指定時間內修改元素的高度來實現動畫效果。需要注意的是這兩個方法參數為空的情況和show，hide不同
slideToggle和toggle達到的效果類似
DOCTYPE對于jQuery中的動畫是有影響的。沒有DOCTYPE定義時，在IE中，jQuery的動畫會出現閃爍的糟糕效果。
float的值是left，可以使原本各自位于一行的元素全部在一行中向左浮動
可以給多個選擇器定義同樣的樣式，選擇器之間用“，”分割。同樣對于jQuery的“$”方法，也可以傳入各個選擇器

end

謝謝您的閱讀！

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: