首頁 > 開發者 > JavaScript
Jquery實現縱向橫向菜單，jquery縱向橫向
第一個菜單實現的是點擊功能表項目顯示相應的子功能表項，三角變為向下的三角。下面的菜單滑鼠移動到功能表項目顯示對應的子功能表項，滑鼠移開子功能表消失。
下面介紹它的代碼部分：
html代碼：
head代碼部分添加標題及引用：
<span style="font-family:KaiTi_GB2312;font-size:18px;"><head> <title>JQuery實戰-菜單效果</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link type="text/css" rel="stylesheet" href="css/menu.css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/menu.js"></script> </head></span>
body部分編輯功能表項目內容，通過嵌套的ul和li來表示，菜單最外層為ul，一層每個主菜單放在一個li中。如果有子功能表，在這個主菜單的li中建立新的ul，再依次嵌套就可以構建多層的菜單。
<span style="font-family:KaiTi_GB2312;font-size:18px;"><body> <ul> <li class="main"> <a href="#">功能表項目1</a> <ul style="display:none;"> <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/> <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></span>
css代碼部分
1.瀏覽器中的ul和li元素預設情況下文字前都有圓點標識符，li元素會有縮排
2.list-style屬性值為none,可清除ul和li前面的小圓點。
3.清除縮排值，padding和margin都為0，其中IE6 IE7需要把margin為0的時候才可以清除縮排值。
<span style="font-family:KaiTi_GB2312;font-size:18px;">ul,li{ list-style:none;/* //清除ul和li上預設的小圓點 */ } ul{ /* 清除子功能表的縮排值 */ padding:0; margin:0; } .main,.hmain{ background-image:url(../images/title.gif);/*指定背景圖*/ background-repeat:repeat-x; width:120px; } li{ background-color:#EEEEEE; } a { /*取消所有的底線*/ text-decoration:none; padding-left:20px; display:block; display:inline-block;/* 解決ie6不相容的問題 */ width:100px; 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;/* 不使用圖片 */ padding-left:18px; } .main ul,.hmain ul{ /* 子功能表隱藏 */ display:none; } .hmain{ float:left;/*浮動顯示*/ margin:1px; }</span>
menu.js代碼：
1.main a選擇使用了.main這個class的元素內部所有的a節點
2.main>a選擇.main子節點中的a節點
<span style="font-family:KaiTi_GB2312;font-size:18px;">$(document).ready(function(){ //頁面的Dom已經裝載完成時，執行的代碼 $(".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");//設定展開的速度，可以是nomal,slow,fast // ulNode.hide(); // ulNode.toggle();//toggle設定展開或者收縮 //捲簾效果，向上或者向下 // ulNode.slideDown(); // ulNode.slideUp; ulNode.slideToggle(); }); //麻煩的方法 // $(".hmain > a").hover(function(){ // $(this).next("ul").slideDown(); // }.Function(){ // var ulNode=$(this).next("ul"); // var timeoutId =setTimeout(function(){ // }) // ulNode.slideUp(); // },300); // ulNode.hover(function(){ // clearTimeout(timeoutId); // }.function(){ // $(this).slideUp(); // }); /********實現滑鼠移動到指定主菜單後子功能表自動顯示*****/ $(".hmain").hover(function(){ $(this).children("ul").slideDown(); },function(){ $(this).children("ul").slideUp(); }); }); /* *修改主菜單的指示表徵圖隨著子功能表的變化而變化 * */ 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>
以上就是本文的全部內容，希望能夠協助大家更好的實現製作菜單效果。
您可能感興趣的文章:Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
