预览加载中，请您耐心等待几秒...
1/7
2/7
3/7
4/7
5/7
6/7
7/7
在线预览结束，喜欢就下载吧，查找使用更方便
如果您无法下载资料，请参考说明：
1、部分资料下载需要金币，请确保您的账户上有足够的金币
2、已购买过的文档，再次下载不重复扣费
3、资料包下载后请先用软件解压，在使用对应软件打开
利用jquery实现竖向菜单和横向菜单的一些效果，现在放上来和大家一起分享：
效果如下所示：
效果说明：1.竖向菜单：当点击菜单项的时候，会展开所点击菜单项下面的子菜单，比且如果此时其它的菜单项有展开状态的则将其关闭。当点击一个已经展开的菜单项时，次菜单项会将子菜单收起。并且如果在一个菜单项上面连续短时间点击的时候，将不会有任何效果，避免短时间连续点击造成的不良效果（此处设置的点击间隔为300ms）
2.横向菜单：当鼠标移动到某个菜单项上面的时候，会展开此菜单项，如果鼠标移出的话，菜单项便会收起，当然菜单项前面的小指示图标也会跟随变化，同样为了避免鼠标在菜单项上面快速连续移动所带来的不良效果，代码中设定在菜单项上面的停留时间要超过300ms才会触发事件。
具体代码如下：（示例中的一些小图标大家可以到网上随便下一些就可以了）
Html代码
!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>菜单效果</title>
<linktype="text/css"rel="stylesheet"href="css/menu.css">
<scripttype="text/javascript"src="js/jquery-1.8.2.min.js"></script>
<scripttype="text/javascript"src="js/menu.js"></script>
</head>
<body>
<ul>
<liclass="main">
<ahref="#">菜单项1</a>
<ul>
<li>
<ahref="#">子菜单11</a>
</li>
<li>
<ahref="#">子菜单12</a>
</li>
</ul>
</li>
<liclass="main">
<ahref="#">菜单项2</a>
<ul>
<li>
<ahref="#">子菜单21</a>
</li>
<li>
<ahref="#">子菜单22</a>
</li>
</ul>
</li>
<liclass="main">
<ahref="#">菜单项3</a>
<ul>
<li>
<ahref="#">子菜单31</a>
</li>
<li>
<ahref="#">子菜单32</a>
</li>
</ul>
</li>
</ul>
</br></br></br>
<ul>
<liclass="hmain">
<ahref="#">菜单项1</a>
<ul>
<li>
<ahref="#">子菜单11</a>
</li>
<li>
<ahref="#">子菜单12</a>
</li>
</ul>
</li>
<liclass="hmain">
<ahref="#">菜单项2</a>
<ul>
<li>
<ahref="#">子菜单21</a>
</li>
<li>
<ahref="#">子菜单22</a>
</li>
</ul>
</li>
<liclass="hmain">
<ahref="#">菜单项3</a>
<ul>
<li>
<ahref="#">子菜单31</a>
</li>
<li>
<ahref="#">子菜单32</a>
</li>
</ul>
</li>
</ul>
</body>
</html>
Css代码：
@CHARSET"UTF-8";
ul,li{
list-style:none;
}
ul{
padding-left:0;
margin:0;
}
.main,.hmain{
background-image:url(../image/menu_bg.gif);
background-repeat:repeat-x;
width:120px;
margin-bottom:2px;
}
li{
background-color:#eeeeee;
}
a{
text-decoration:none;
padding-left:20px;
display:b
内容提供者
2024-09-02
16金币
62KB
7页
实名认证
