页面中的布局很简单,
利用DIV来组成菜单, 一个标题DIV对应一个内容DIV, 大致布局如下图:
直接从代码处来查看吧!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The title</title>
<STYLE TYPE="text/css">
.menu_head{
width:350px;
padding: 8px 10px;
cursor: pointer;
position: relative;
margin:1px;
font-weight:bold;
background: #93cdff;
}
.menu_body{
display:none;
width:350px;
}
.menu_body a{
padding:8px 0px;
display:block;
color:#006699;
background-color:#EFEFEF;
padding-left:10px;
font-weight:bold;
text-decoration:none;
}
.menu_body a:hover{
color:#7fb2f4;
background-color:#dfdfdf;
text-decoration:underline;
}
</STYLE>
<script type="text/javascript" src="jquery.js">
</script>
<script type="text/javascript" >
$().ready(function(){
$(".menu_head").click(function(){
//通过next(".menu_body") 获得对应的内容DIV,让其具有“滑动”效果
// 再通过siblings(".menu_body")获得所有同级的 内容DIV, 让其滑动着隐藏起来, (同一时间,只有一个内容DIV显示出来)
$(this).next(".menu_body").slideToggle(300).siblings(".menu_body").slideUp("slow");
});
});
</script>
<body>
<div class="menu_head">
菜单一
</div>
<div class="menu_body">
<a href="#">子菜单1</a>
<a href="#">子菜单2</a>
<a href="#">子菜单3</a>
</div>
<div class="menu_head">
菜单二
</div>
<div class="menu_body">
<a href="#">子菜单1</a>
<a href="#">子菜单2</a>
<a href="#">子菜单3</a>
</div>
<div class="menu_head">
菜单三
</div>
<div class="menu_body">
<a href="#">子菜单1</a>
<a href="#">子菜单2</a>
<a href="#">子菜单3</a>
</div>
</body>
</html>
最终效果:
=============================================
- 大小: 9.4 KB
- 大小: 14.5 KB
- 大小: 14.2 KB
分享到:
相关推荐
jquery折叠菜单jquery折叠菜单jquery折叠菜单jquery折叠菜单jquery折叠菜单jquery折叠菜单jquery折叠菜单jquery折叠菜单jquery折叠菜单jquery折叠菜单jquery折叠菜单jquery折叠菜单
Jquery折叠菜单.实现菜单树形折叠。具体的样式需要自己调节
jQuery多级折叠菜单,有例子
该资源主要实现两点 1. jquery实现菜单折叠 2.css自动增长圆角背景的实现 个人能力有限,代码有诸多不足之处,仅作参考使用。
实用的jquery 折叠菜单 带缓冲效果,3种效果
用面向对象的方法写的折叠菜单,基本上拿过来就可以用。
Jquery实现三级折叠,菜单。
NULL 博文链接:https://goby2008.iteye.com/blog/418306
jquery折叠滑出菜单
jquery展开折叠菜单插件 漂亮 完美 易学习,值得分享。展开折叠菜单插件。
jQuery动画手风琴折叠菜单栏代码是一款粉红色风格动态伸缩手风琴代码。
jQuery折叠树形菜单代码基于jquery.1.10.2.min.js制作,带搜索功能,搜索关键字,直接显示菜单项,展开收缩树形菜单。
jQuery多级树形分类折叠菜单基于jquery-1.7.2.min.js制作,json树形菜单。
这是一款炫酷的jquery水平手风琴折叠菜单效果。该jquery风琴折叠菜单效果以1870年为主题,在切换菜单项时带有幻影效果,并在整体上配以炫酷的文字动画效果。
jQuery折叠下拉菜单收缩展开是一款橙色样式风格的二级菜单导航代码。
这个插件已经整合到jq的UI中了,利用这个插件做折叠效果很方便。 首先引入以下文件: jq文件 chili-1.7.pack.js jquery.dimensions.js jquery.accordion.js
jQuery的垂直可折叠菜单特效, 使用简单,只需要加载jquery插件。兼容主流浏览器
jquery accordion 菜单折叠效果,超炫的结果
这是使用jquery和css3制作的一款炫酷平滑折叠菜单插件。该折叠菜单插件展开时过渡平滑,每级菜单都可以自定义,是一款实用的折叠菜单插件。