溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了jQuery如何實現(xiàn)菜單顯示效果，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
內(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 () {
////找到主菜單項對應的子菜單項
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可以控制背景圖的位置，屬性值既可以用數(shù)值，也可以用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的元素內(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
jquery是一個簡潔而快速的JavaScript庫，它具有獨特的鏈式語法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對CSS選擇器進行擴展、擁有便捷的插件擴展機制和豐富的插件，是繼Prototype之后又一個優(yōu)秀的JavaScript代碼庫，能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動畫，以便快速開發(fā)網(wǎng)站。
感謝你能夠認真閱讀完這篇文章，希望小編分享的“jQuery如何實現(xiàn)菜單顯示效果”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業(yè)資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
