Jquery实战——横纵向的菜单
橫縱向的菜單效果，點(diǎn)擊縱向菜單顯示其子菜單。鼠標(biāo)指向橫菜單的時(shí)候。顯示其子菜單，鼠標(biāo)離開(kāi)，子菜單隱藏。
HTML代碼：
<span style="font-size:18px;"><!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>橫縱向的菜單</title><link href="css/menu.css" rel="stylesheet" /><script src="js/JQuery.js"></script><script src="js/menu.js"></script> </head> <body><ul><li class="main"><a href="#">菜單項(xiàng)1</a><ul><li><a href="#">菜單項(xiàng)11</a></li><li><a href="#">菜單項(xiàng)12</a></li></ul></li><li class="main"><a href="#">菜單項(xiàng)2</a><ul><li><a href='#'>菜單項(xiàng)21</a></li><li><a href="#">菜單項(xiàng)22</a></li></ul></li><li class="main"><a href="#">菜單項(xiàng)3</a><ul><li><a href="#">菜單項(xiàng)31</a></li><li><a href="#">菜單項(xiàng)32</a></li></ul></li></ul><br /><br /><br /><ul><li class="hmain"><a href="#">菜單項(xiàng)1</a><ul><li><a href="#">菜單項(xiàng)11</a></li><li><a href="#">菜單項(xiàng)12</a></li></ul></li><li class="hmain"><a href="#">菜單項(xiàng)2</a><ul><li><a href='#'>菜單項(xiàng)21</a></li><li><a href="#">菜單項(xiàng)22</a></li></ul></li><li class="hmain"><a href="#">菜單項(xiàng)3</a><ul><li><a href="#">菜單項(xiàng)31</a></li><li><a href="#">菜單項(xiàng)32</a></li></ul></li></ul> </body> </html> </span>CSS代碼：
<span style="font-size:18px;">body { } ul,li{/*清除菜單前面的點(diǎn)和圈*/list-style:none;} ul {padding:0;margin:0; } .main ,.hmain {background-image:url(../images/title.gif);background-repeat:repeat-x;width:100px; } li{background-color:#999; } a{/*取消全部的下劃線*/text-decoration:none;padding-left:15px;display:block ; /*讓a標(biāo)簽充滿這個(gè)區(qū)域*//*針對(duì)IE6*/display:inline-block;width:85px;padding-top:3px;padding-bottom:3px; } .main a , .hmain a{color:white;background-image:url(../images/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; }</span>JQuery代碼： <span style="font-size:18px;">$(function () {$(".main > a , .hmain > a").click(function () {//找到主菜單相應(yīng)的子菜單var ulNode = $(this).next("ul");//if (ulNode.css("display") == "none") {// ulNode.css("display", "block");//} else {// ulNode.css("display", "none");//}//ulNode.show("normal");//slow, fast, 500//ulNode.hide();//ulNode.toggle();//顯示和隱藏。自己主動(dòng)推斷//ulNode.slideDown("slow");//顯示//ulNode.slideUp();//隱藏ulNode.slideToggle();changeIcon($(this));});$(".hmain").hover(function () {$(this).children("ul").show("fast");changeIcon($(this).children("a"));}, function () {$(this).children("ul").hide("fast");changeIcon($(this).children("a"));}); }); //改動(dòng)主菜單的指示圖標(biāo) 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)");}}}</span>
1.HTML總結(jié)：
1.頁(yè)面中的菜單項(xiàng)能夠通過(guò)嵌套u(yù)l和li來(lái)表示
2.CSS總結(jié)：
1.list-style屬性為none時(shí)能夠清除ul和li前面的小圓點(diǎn)
2.能夠使用background-repeat來(lái)控制背景圖的反復(fù)填充方式
3. text-decoration屬性值為none時(shí)，能夠取消文字上的下劃線
4,.display的值為none能夠用于隱藏元素
3.JQuery總結(jié)：
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í)的效果和改動(dòng)CSS的display屬性效果一樣。
參數(shù)能夠是單位為毫秒的數(shù)字?；蛘呤恰畇low’?！畁ormal’，‘fast’這三個(gè)文字都能夠來(lái)控制完畢顯示或隱藏須要的時(shí)間。
3.toggle方法更為強(qiáng)大，能夠省去推斷元素是顯示還是隱藏的狀態(tài)。能夠讓顯示的元素隱藏起來(lái)，能夠讓隱藏的元素顯示出來(lái)，參數(shù)用法和show，hide同樣。
總結(jié)
以上是生活随笔為你收集整理的Jquery实战——横纵向的菜单的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 精华阅读第6期|程序猿的世界，你不懂！
- 下一篇： NSTimer详解