您的位置：首页 > Web前端 > JQuery

JQuery横向、纵向菜单显示

2014-08-09 20:43 253 查看

在实际应用中，横向和纵向的菜单除了在CSS样式中有些不同之外，其他的JS文件和HTML文件编写没有什么区别，很容易相互转换。界面上的菜单我们通过嵌套ul和li来表示，通过css对菜单的简单样式进行控制，通过JS对菜单的动态显示效果进行设置。重点学习js文件中对菜单的显示和隐藏的样式设置。

纵向菜单设置：

HTML代码：

<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>

如果在主菜单li里还要嵌套子菜单，那么就在li标签里嵌套一个ul标签，依次的嵌套即可构成多层的子菜单。

在li标签中添加一个类class作为类选择器，在子菜单样式控制上加一个a标签，用于样式控制。

下面编写的是.css文件样式控制：

ul,li{
list-style:none; /*去掉ul和li前面的小圆点*/
}

ul{
/*清除子菜单的缩进值*/
padding:0;
margin:0;
}

去掉菜单前面的小圆点：list-style:none;

清除子菜单的缩进值：设置padding和margin的像素为0。

li{
background-color:#EEEEEE;
}
a{
text-decoration:none;/*在链接样式中取消默认的所有的下划线*/
padding-left:20px;
display:block;    /*变成块级元素，使鼠标一移动进去就变成手形*/
display:inline-block; /*IE6的设置*/
width:80px;
padding-top:3px;
padding-bottom:3px;
}

这里进行的是子菜单的背景色的设置，以及鼠标移动到菜单上变成手形。

.main a , .hmain a{/*主菜单的颜色为白色*/
color:white;
background-image:url(../images/collapsed.gif);
background-repeat:no-repeat; /*背景图的填充方式，设置为no-repeat不会重复填充*/
background-position:1px center;
}
.main li a , .hmain li a{/*主菜单下的li菜单下的a标签的颜色为白色*/
color:black;
background-image:none;

}
.main ul , .hmain ul{
display:none;
}

这里进行窗体加载时隐藏子菜单，并且主菜单和子菜单的显示字体为白色，背景图的填充方式为取消平铺。

下面是js文件的编写：

$(document).ready(function(){});窗体装载完成及执行这部分的代码。

找到主菜单对应的子菜单方式，并添加一个click事件，并对菜单进行显示和隐藏：

$(".main > a").click(function(){
var ulNode=$(this).next("ul");
ulNode.slideToggle();
changeIcon($(this));
});
$(".hmain").hover(function(){
$(this).children("ul").slideDown();
changeIcon($(this).children("a"));
},function(){
$(this).children("ul").slideUp();
changeIcon($(this).children("a"));
});
});

其中的changeIcon()是一个控制主菜单指示图标的函数：

/*修改主菜单的指示图标*/
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')")
}
}
}

对于菜单的显示和隐藏，JQuery中提供了一组方法.show()和.hide()，其中需要引用的参数毫秒数或者为slow、normal、fast，

另外还有一种方法，代码执行可以自己判断菜单的显示和隐藏：ulNode.toggle("500");参数同上。

对于用卷帘的效果实现菜单的显示和隐藏，JQuery同样也有一组方法：.slideDown();.slideUp();对应的代码自己判断菜单的显示和隐藏对应的方法：ulNode.slideToggle();

获得子标签：$(this).children("ul")

改变a标签上的鼠标样式：changeIcon($(this).children("a"));

横向菜单：与纵向菜单类似，只是CSS样式有点区别，相对于纵向菜单，产生浮动之后就和横向菜单一样：

.hmain{
float:left;  //设置左浮动
margin-right:1px;  /设置内边距
}

如何设置浮动和取消浮动前面的博客已经讲解过了。这个Demo的重点就是JS文件对于如何实现菜单的显示和隐藏效果的学习。涉及到JQuery中的几个方法，以及浮动的概念。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航