jQuery實現(xiàn)菜單顯示效果

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

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

前言

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

內(nèi)容

顯示效果：

照例，先上代碼，

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已經(jīng)裝載完成時，執(zhí)行的代碼
 $(".main > a").click(function () {
 ////找到主菜單項對應(yīng)的子菜單項
 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')");
 };
 };
};

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

總結(jié)

HTML知識點：

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

CSS知識點：

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

JavaScript知識點：

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

end

謝謝您的閱讀！

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: