最终要达到的效果是如图所示：
当单击菜单项的时候，可以实现菜单的折叠与展开，这是我们在网页上经常看到的一个效果。在这里的实现主要应用是css控制样式然后配合jquery实现。
自己的感想：这里比如说绑定要跳转的页面，只是静态的绑定，不能动态的绑定，我在开发过程中用到的动态绑定是结合asp.net的treeview控件实现的。不知道大家还有没有更好的办法。
前台页面代码：
菜单项1 子菜单11 子菜单12 菜单项2 子菜单21 子菜单22 菜单项3 子菜单31 子菜单32

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:
/// $(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); }); });
这个例子是上一个例子的延续，我们先来看一下最终我们要达到的效果：
这次我们要实现的是下面的效果，当鼠标滑动到菜单项的时候，子菜单显示；当鼠标移开的时候，菜单收起。
在这里，我们还解决了在滑动门会有的问题，就是当鼠标快速滑动的时候，会不停地触发，这个问题。
页面的代码如下：
菜单项1 子菜单11 子菜单12 菜单项2 子菜单21 子菜单22 菜单项3 子菜单31 子菜单32
菜单项1 子菜单11 子菜单12 菜单项2 子菜单21 子菜单22 菜单项3 子菜单31 子菜单32

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
/// $(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(); }; }); });
以上两种菜单效果，大家有没有掌握，希望这篇文章可以帮助到大家。