最終要達到的效果是如圖所示：
當單擊菜單項的時候，可以實現菜單的折疊與展開，這是我們在網頁上經常看到的一個效果。在這里的實現主要應用是CSS控制樣式然后配合jquery實現。
自己的感想：這里比如說綁定要跳轉的頁面，只是靜態的綁定，不能動態的綁定，我在開發過程中用到的動態綁定是結合asp.net的treeview控件實現的。不知道大家還有沒有更好的辦法。
前臺頁面代碼：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="menu.aspx.cs" Inherits="menu" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script> <script src="js/menu.js" type="text/javascript"></script> <link href="css/menu.css" rel="stylesheet" type="text/css" /> </head> <body> <form id="form1" runat="server"> <div> <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> </div> </form> </body> </html>
CSS（menu.css）
ul,li { list-style-type:none; /*如果不加margin在搜狗瀏覽器中不能左對齊*/ margin:0px; padding:0px; } .main { background-image: url("../images/title.gif"); background-repeat:repeat-x; width:100px; } .main a { background-image:url("../images/collapsed.gif"); background-repeat:no-repeat; background-position:3px center; text-decoration:none; color:White; /*下面是用來保證鼠標只要停留在li上就可以響應，也就相當于讓li的響應區域擴充了*/ display:block; padding-left:20px; padding-bottom:3px; } li { background-color:#EEEEEE; } .main li a { color:Black; background-image:none; } menu.js:
/// <reference path="jquery-1.9.1.min.js" /> $(document).ready(function () { var main = $(".main>a"); main.click(function () { var ulNode = $(this).next("ul"); // if (ulNode.css("display") == "none") { // ulNode.css("display", "block"); // } // else { // ulNode.css("display", "none"); // } //百葉窗的效果 ulNode.slideToggle("normal"); }); }); 這個例子是上一個例子的延續，我們先來看一下最終我們要達到的效果：
這次我們要實現的是下面的效果，當鼠標滑動到菜單項的時候，子菜單顯示；當鼠標移開的時候，菜單收起。
在這里，我們還解決了在滑動門會有的問題，就是當鼠標快速滑動的時候，會不停地觸發，這個問題。
頁面的代碼如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="menu.aspx.cs" Inherits="menu" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script> <script src="js/menu.js" type="text/javascript"></script> <link href="css/menu.css" rel="stylesheet" type="text/css" /> </head> <body> <form id="form1" runat="server"> <div> <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> </div> <div style=" margin-top:50px;"> <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> </div> </form> </body> </html>
CSS(menu.css)
ul,li { list-style-type:none; /*如果不加margin在搜狗瀏覽器中不能左對齊*/ margin:0px; padding:0px; } .main,.hmain { background-image: url("../images/title.gif"); background-repeat:repeat-x; width:100px; } .main a,.hmain a { background-image:url("../images/collapsed.gif"); background-repeat:no-repeat; background-position:3px center; text-decoration:none; color:White; /*下面是用來保證鼠標只要停留在li上就可以響應，也就相當于讓li的響應區域擴充了*/ display:block; padding-left:20px; padding-bottom:3px; } li { background-color:#EEEEEE; } .main li a,.hmain li a { color:Black; background-image:none; } .main ul,.hmain ul { display:none; } /*橫向菜單的樣式*/ .hmain { float:left; } menu.js
/// <reference path="jquery-1.9.1.min.js" /> $(document).ready(function () { var main = $(".main>a"); main.click(function () { var ulNode = $(this).next("ul"); // if (ulNode.css("display") == "none") { // ulNode.css("display", "block"); // } // else { // ulNode.css("display", "none"); // } //百葉窗的效果 ulNode.slideToggle("normal"); }); //現在的這個變量用來解決鼠標快速滑動問題clearInterval(setTimeoutId); nodeLi.children("ul").slideUp(); var setTimeoutId; $(".hmain").hover(function () { var nodeLi = $(this); setTimeoutId = window.setTimeout(function () { nodeLi.children("ul").slideDown(); }, 300) }, //上面的函數是鼠標進入的操作，下面的操作是鼠標移出的操作。 function () { //開始的時候，我在這里犯了一個錯誤，應該重新定義一下nodeLi var nodeLi = $(this); clearTimeout(setTimeoutId); if (nodeLi.children("ul").length != 0) { nodeLi.children("ul").slideUp(); }; }); }); 以上兩種菜單效果，大家有沒有掌握，希望這篇文章可以幫助到大家。
新聞熱點
疑難解答
