jquery 树形框 横_Jquery实现纵向横向菜单

第一个菜单实现的是点击菜单项显示相应的子菜单项，三角变为向下的三角。下面的菜单鼠标移动到菜单项显示对应的子菜单项，鼠标移开子菜单消失。

下面介绍它的代码部分：

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')");

}

}

}

以上就是本文的全部内容，希望能够帮助大家更好的实现制作菜单效果。