欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2019年12月11日 09:50:40   作者：羅俊-Everns  
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)菜單顯示效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

前言

上一篇博客更新了在頁(yè)面中可以像Excel表格一樣輸入的表格，這篇博客介紹一下我們經(jīng)?？梢栽诟鞔缶W(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實(shí)踐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="#" >菜單項(xiàng)1
 </a>
 <ul>
  <li><a href="#" >子菜單項(xiàng)1.1</a></li>
  <li><a href="#" >子菜單項(xiàng)1.2</a></li>
  <li><a href="#" >子菜單項(xiàng)1.3</a></li>
 </ul>
 </li>
 <li class="main">
 <a href="#" >菜單項(xiàng)2
 </a>
 <ul>
  <li><a href="#" >子菜單項(xiàng)2.1</a></li>
  <li><a href="#" >子菜單項(xiàng)2.2</a></li>
  <li><a href="#" >子菜單項(xiàng)2.3</a></li>
 </ul>
 </li>
 <li class="main">
 <a href="#" >菜單項(xiàng)3
 </a>
 <ul>
  <li><a href="#" >子菜單項(xiàng)3.1</a></li>
  <li><a href="#" >子菜單項(xiàng)3.2</a></li>
  <li><a href="#" >子菜單項(xiàng)3.3</a></li>
 </ul>
 </li>
 </ul>
 <br />
 <br />
 <br />
 <br />
 <ul>
 <li class="hmain">
 <a href="#" >菜單項(xiàng)1
 </a>
 <ul>
  <li><a href="#" >子菜單項(xiàng)1.1</a></li>
  <li><a href="#" >子菜單項(xiàng)1.2</a></li>
  <li><a href="#" >子菜單項(xiàng)1.3</a></li>
 </ul>
 </li>
 <li class="hmain">
 <a href="#" >菜單項(xiàng)2
 </a>
 <ul>
  <li><a href="#" >子菜單項(xiàng)2.1</a></li>
  <li><a href="#" >子菜單項(xiàng)2.2</a></li>
  <li><a href="#" >子菜單項(xiàng)2.3</a></li>
 </ul>
 </li>
 <li class="hmain">
 <a href="#" >菜單項(xiàng)3
 </a>
 <ul>
  <li><a href="#" >子菜單項(xiàng)3.1</a></li>
  <li><a href="#" >子菜單項(xiàng)3.2</a></li>
  <li><a href="#" >子菜單項(xiàng)3.3</a></li>
 </ul>
 </li>
 </ul>
 </body>
</html>

CSS代碼：

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

 ul {
 /*清除子菜單的縮進(jìn)值*/
 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 () {
 //頁(yè)面中的DOM已經(jīng)裝載完成時(shí)，執(zhí)行的代碼
 $(".main > a").click(function () {
 ////找到主菜單項(xiàng)對(duì)應(yīng)的子菜單項(xiàng)
 var ulNode = $(this).next("ul");
 ulNode.slideToggle();
 changeIcon($(this));
 });

 //簡(jiǎn)化成下列代碼
 $(".hmain ").hover(function () {
 $(this).children("ul").slideDown();
 changeIcon($(this).children("a"));
 }, function () {
 $(this).children("ul").slideUp();
 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('img/菜單效果/expanded.gif')");
 } else {
 mainNode.css("background-image", "url('img/菜單效果/collapsed.gif')");
 };
 };
};

這次代碼稍微有點(diǎn)長(zhǎng)，但是對(duì)于一目十行的大神們來(lái)說(shuō)這都不算啥！

總結(jié)

HTML知識(shí)點(diǎn)：

  1. 頁(yè)面中的菜單項(xiàng)可以通過(guò)嵌套的ul和li來(lái)表示
  2. 菜單最外層為ul，一層每個(gè)主菜單放在一個(gè)li中，如果有子菜單，在這個(gè)主菜單的li中建立新的ul，再依次嵌套即可構(gòu)建多層的菜單
  3. 瀏覽器中ul和li元素默認(rèn)情況下文字前都有圓點(diǎn)標(biāo)識(shí)符，li元素會(huì)有縮進(jìn)。Opera瀏覽器比較特殊，li的標(biāo)識(shí)符和其他瀏覽器不同

CSS知識(shí)點(diǎn)：

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

JavaScript知識(shí)點(diǎn)：

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

end

謝謝您的閱讀！

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

相關(guān)文章

最新評(píng)論