第一个菜单实现的是点击菜单项显示相应的子菜单项，三角变为向下的三角。下面的菜单鼠标移动到菜单项显示对应的子菜单项，鼠标移开子菜单消失。
下面介绍它的代码部分：
html代码：
head代码部分添加标题及引用：
jquery实战-菜单效果
body部分编辑菜单项内容，通过嵌套的ul和li来表示，菜单最外层为ul，一层每个主菜单放在一个li中。如果有子菜单，在这个主菜单的li中建立新的ul，再依次嵌套就可以构建多层的菜单。
菜单项1 子菜单项11 子菜单项12 菜单项2 子菜单项21 子菜单项22 菜单项3 子菜单项31 子菜单项32
菜单项1 子菜单项11 子菜单项12 菜单项2 子菜单项21 子菜单项22 菜单项3 子菜单项31 子菜单项32
css代码部分
1.浏览器中的ul和li元素默认情况下文字前都有圆点标识符，li元素会有缩进
2.list-style属性值为none,可清除ul和li前面的小圆点。
3.清除缩进值，padding和margin都为0，其中ie6 ie7需要把margin为0的时候才可以清除缩进值。
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; }
menu.js代码：
1.main a选择使用了.main这个class的元素内部所有的a节点
2.main>a选择.main子节点中的a节点
$(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')); } } }
以上就是本文的全部内容，希望能够帮助大家更好的实现制作菜单效果。