一直没写过东西,这几天写了一个简单的Jquery菜单,没有CSS,没有image,只有一个简单的效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=UTF8" http-equiv="content-type">
<title></title>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<style type="text/css">
div {
margin-left: 25px;
}
ul {
margin: 0px;
list-style:none;
}
ul li {
margin: 0px;
padding-right: 5px
}
ul li a{
text-decoration: none;
}
div {
width: 200px;
height: auto;
display: none;
}
h4{
padding-left:5px;
padding-right:auto;
line-height:auto;
margin:10px 0 0 5px;
font-size:17px;
width: auto;
text-align: left;
}
h4 a{
text-decoration: none;
color: #3D5B81;
}
</style>
<script type="text/javascript">
function show(ele) {
$(ele).next().slideToggle("slow");
}
</script>
</head>
<body>
<div style="margin-left: 25px;padding-left: 5px;display: block;" id="menu">
<h4 onclick="show(this)" > <a href="javascript:void(0)">菜单选项 </a></h4>
<div>
<ul>
<li ><a href="#">菜单</a></li>
<li ><a href="#">菜单</a>
</li>
<li ><a href="#">菜单</a>
</li>
<li ><a href="#">菜单</a>
</li>
<li ><a href="#">菜单</a>
</li>
</ul>
</div>
<h4 onclick="show(this)" > <a href="javascript:void(0)">查询选项 </a></h4>
<div>
<ul>
<li ><a href="#">菜单</a>
</li>
<li ><a href="#">菜单</a>
</li>
<li ><a href="#">菜单</a>
</li>
<li ><a href="#">菜单</a>
</li>
<li ><a href="#">菜单</a>
</li>
</ul>
</div>
<h4 onclick="show(this)" > <a href="javascript:void(0)">游戏积分查询 </a></h4>
<div>
<ul>
<li ><a href="#">菜单</a></li>
<li ><a href="#">菜单</a></li>
</ul>
</div>
<h4 onclick="show(this)" > <a href="javascript:void(0)">权限管理 </a></h4>
<div>
<ul>
<li ><a href="#">菜单</a></li>
<li ><a href="#">菜单</a></li>
</ul>
</div>
</div>
</body></html>
分享到:
相关推荐
jquery 菜单 经典的jquery菜单
菜单树JQUERY菜单树JQUERY菜单树JQUERY菜单树JQUERY菜单树JQUERY菜单树JQUERY菜单树JQUERY菜单树JQUERY菜单树JQUERY菜单树JQUERY菜单树JQUERY菜单树JQUERY菜单树JQUERY菜单树JQUERY菜单树JQUERY菜单树JQUERY菜单树...
jquery折叠菜单jquery折叠菜单jquery折叠菜单jquery折叠菜单jquery折叠菜单jquery折叠菜单jquery折叠菜单jquery折叠菜单jquery折叠菜单jquery折叠菜单jquery折叠菜单jquery折叠菜单
Jquery导航菜单栏,循环加载菜单项,方便Jquery前台菜单栏开发。
Jquery超炫滑动菜单 Jquery超炫滑动菜单 Jquery超炫滑动菜单 Jquery超炫滑动菜单
Jquery京东导航菜单 Jquery京东导航菜单 Jquery京东导航菜单 Jquery京东导航菜单 Jquery京东导航菜单 Jquery京东导航菜单
jquery收缩菜单点击展开收缩菜单代码
jQuery左侧下拉三级收缩菜单,JQuery left drop-down three-level shrink menu
常用jQuery代码 jQuery 插件 jQuery菜单 jQuery焦点轮播 jQuery弹层代码 焦点轮播 tab标签切换代码 jQ图片浏览 说明:压缩包分为jQuery code 1,2,3三卷。 本压缩包为卷jQuery code 2
下拉菜单-JQUERY下拉菜单-JQUERY下拉菜单-JQUERY
jQuery收缩菜单,通过网页前端技术实现菜单的展现方式,挺方便的一段代码,复用性高
jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单 jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单 jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单 jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单
jquery 菜单效果,三个不一样的效果,看下咯
jquery菜单简洁动画_修改
jquery右键菜单实现
一个基于jQuery的简单树形菜单
网上找了很久这种菜单,浪费了很多时间,实在没办法,只好老老实实去官网上按说明弄了一个,并更新了,jquery1.5.2, 希望给有需要的朋友可以节约一点时间,欢迎交流,qq:170262
jquery实现Tab菜单栏,动态效果,带样式,js文件等等。
jquery 圆形 导航菜单,内含实例及源码
jQuery实现右键菜单 jQuery实现右键菜单 jQuery实现右键菜单 jQuery实现右键菜单 jQuery实现右键菜单