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

jquery 菜单效果

2016-08-08 23:22 274 查看

1.实现功能：

竖标签，点击的时候放下，在次点击的时候收回。

横标签，鼠标滑过的时候放下，划出的时候收回。

2. 实现思路：

竖标签：给标题添加点击事件，收起所有的标签，检查选中的标题，如果是打开状态则收起，反之则放下

横标签一：监听标题，如果划过标题，放下菜单栏，划出标题，添加一个3秒的延时收回事件，如果这时候鼠标化进菜单栏，则将这个延时事件清除，划出菜单栏收回菜单栏。

横标签二：听标题的父节点，如果在父节点内，则放下菜单栏，如果不在，则收回菜单栏。

3. 代码：

menu.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>菜单效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="css/menu.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
</head>
<body>
<ul>
<li  class="main">
<a href="#">菜单项一</a>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</li>

<li  class="main">
<a href="#">菜单项二</a>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>

<li class="main">
<a href="#">菜单项三</a>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</li>
</ul>
<ul>
<li  class="hmain">
<a href="#">菜单项一</a>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</li>

<li  class="hmain">
<a href="#">菜单项二</a>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>

<li class="hmain">
<a href="#">菜单项三</a>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</li>
</ul>
</body>
</html>

menu.css

ul,li{
/* 清除默认的样式*/
list-style: none;
}
ul{
padding-left:0px;
}
/*只有当背景图片没有的时候背景颜色才会发挥作用  background 从某种程度修正背景图片高度高于文字图片*/
.main{
background-image:url(../images/title.gif);
background-repeat: repeat-x;
background-color: #eeeeee;
width: 100px;
}
/*display使之变成块级元素 点击的范围变大*/
li a{
text-decoration: none;
padding-left: 20px;
display: block;
}

.main a,.hmain a{
background-image:url(../images/collapsed.gif);
background-repeat: no-repeat;
background-position: 3px,center;
color:white;
}

.main li,.hmain li{
color:black;
}

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

.hmain{
background-image:url(../images/title.gif);
background-repeat: repeat-x;
background-color: #eeeeee;
width: 100px;
float:left;
}
menu.js
//>a只是指a
//slideToggle() 可以实现dock 不需要自己写判断;
$(function(){

$(".main>a").click(function(){
/*          if($(this).next("ul").css("display")=="none"){
$(this).next("ul").css("display","block");
}else{
$(this).next("ul").css("display","none");
}
*/
$(this).parent().siblings().children("ul").slideUp();
$(this).next("ul").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).slideDown();
});
});

//另一种实现
/*    $(".hmain").hover(function(){
$(this).children("ul").slideDown();
},function(){
$(this).children("ul").slideUp();
});*/

});

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

标签： jquery 菜单效果 dock

相关文章推荐

新的分享

章节导航