Jquery实战——横纵向的菜单
生活随笔
收集整理的這篇文章主要介紹了
Jquery实战——横纵向的菜单
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
橫縱向的菜單效果，點擊縱向菜單顯示其子菜單。鼠標指向橫菜單的時候。顯示其子菜單，鼠標離開，子菜單隱藏。
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="#">菜單項1</a><ul><li><a href="#">菜單項11</a></li><li><a href="#">菜單項12</a></li></ul></li><li class="main"><a href="#">菜單項2</a><ul><li><a href='#'>菜單項21</a></li><li><a href="#">菜單項22</a></li></ul></li><li class="main"><a href="#">菜單項3</a><ul><li><a href="#">菜單項31</a></li><li><a href="#">菜單項32</a></li></ul></li></ul><br /><br /><br /><ul><li class="hmain"><a href="#">菜單項1</a><ul><li><a href="#">菜單項11</a></li><li><a href="#">菜單項12</a></li></ul></li><li class="hmain"><a href="#">菜單項2</a><ul><li><a href='#'>菜單項21</a></li><li><a href="#">菜單項22</a></li></ul></li><li class="hmain"><a href="#">菜單項3</a><ul><li><a href="#">菜單項31</a></li><li><a href="#">菜單項32</a></li></ul></li></ul> </body> </html> </span>CSS代碼：
<span style="font-size:18px;">body { } ul,li{/*清除菜單前面的點和圈*/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標簽充滿這個區域*//*針對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 () {//找到主菜單相應的子菜單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();//顯示和隱藏。自己主動推斷//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"));}); }); //改動主菜單的指示圖標 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總結：
1.頁面中的菜單項能夠通過嵌套ul和li來表示
2.CSS總結：
1.list-style屬性為none時能夠清除ul和li前面的小圓點
2.能夠使用background-repeat來控制背景圖的反復填充方式
3. text-decoration屬性值為none時，能夠取消文字上的下劃線
4,.display的值為none能夠用于隱藏元素
3.JQuery總結：
1. ?.main a 和 .main >a不同之處是。前者選擇使用了.main的這個class的元素內部的全部的a節點，后者僅僅選擇了.main的子節點中的a節點
2. ?show，hide方法能夠用于顯示或隱藏元素，。沒有參數時的效果和改動CSS的display屬性效果一樣。
參數能夠是單位為毫秒的數字。或者是‘slow’。‘normal’，‘fast’這三個文字都能夠來控制完畢顯示或隱藏須要的時間。
3.toggle方法更為強大，能夠省去推斷元素是顯示還是隱藏的狀態。能夠讓顯示的元素隱藏起來，能夠讓隱藏的元素顯示出來，參數用法和show，hide同樣。
總結
以上是生活随笔為你收集整理的Jquery实战——横纵向的菜单的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 精华阅读第6期|程序猿的世界，你不懂！
- 下一篇： NSTimer详解