最终要达到的效果是如图所示：
当单击菜单项的时候，可以实现菜单的折叠与展开，这是我们在网页上经常看到的一个效果。在这里的实现主要应用是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="https://www.jb51.net/js/jquery-1.9.1.min.js" type="text/javascript"></script> <script src="https://www.jb51.net/js/menu.js" type="text/javascript"></script> <link href="https://www.jb51.net/css/menu.css" type="text/css" /> </head> <body> <form runat="server"> <div> <ul> <li> <a href="#">菜单项1</a> <ul> <li><a href="#">子菜单11</a></li> <li><a href="#">子菜单12</a></li> </ul> </li> <li> <a href="#">菜单项2</a> <ul> <li><a href="#">子菜单21</a></li> <li><a href="#">子菜单22</a></li> </ul> </li> <li> <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="https://www.jb51.net/js/jquery-1.9.1.min.js" type="text/javascript"></script> <script src="https://www.jb51.net/js/menu.js" type="text/javascript"></script> <link href="https://www.jb51.net/css/menu.css" type="text/css" /> </head> <body> <form runat="server"> <div> <ul> <li> <a href="#">菜单项1</a> <ul> <li><a href="#">子菜单11</a></li> <li><a href="#">子菜单12</a></li> </ul> </li> <li> <a href="#">菜单项2</a> <ul> <li><a href="#">子菜单21</a></li> <li><a href="#">子菜单22</a></li> </ul> </li> <li> <a href="#">菜单项3</a> <ul> <li><a href="#">子菜单31</a></li> <li><a href="#">子菜单32</a></li> </ul> </li> </ul> </div> <div> <ul> <li> <a href="#">菜单项1</a> <ul> <li><a href="#">子菜单11</a></li> <li><a href="#">子菜单12</a></li> </ul> </li> <li> <a href="#">菜单项2</a> <ul> <li><a href="#">子菜单21</a></li> <li><a href="#">子菜单22</a></li> </ul> </li> <li> <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)