jquery实现的简单二级菜单效果代码


Posted in Javascript onSeptember 22, 2015

本文实例讲述了jquery实现的简单二级菜单效果代码。分享给大家供大家参考。具体如下:

这是一款基于jquery实现的二级菜单,研究了这么多天,才学会用jquery写一个菜单,也算是对自己的鼓励吧,自我感觉这个菜单很不错,欢迎朋友们指点江山。

运行效果截图如下:

jquery实现的简单二级菜单效果代码

在线演示地址如下:

具体代码如下:

<!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=gb2312" />
<title>jquery二级菜单</title>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<script type="text/javascript">
$(function(){
 $("#container .menu1 ul li").click(function(){
 var index=$("#container .menu1 ul li").index(this);
  $(this).addClass("bg").siblings().removeClass();
  $("#container .menu2 ul li ul").eq(index).show().parent().siblings("li").children("ul").hide();
 })
})
</script>
<style type="text/css">
 body{ margin:0; padding:0; font-family:"宋体"; font-size:9pt; color:#FFFFFF; font-weight:bold}
#container{ width:800px; height:auto; margin:0 auto; border:1px #1025c0 solid}
 #container .menu1{ width:800px; height:40px; border:none; background:url(images/menu1.gif) no-repeat}
 #container .menu1 ul{ margin:0; padding:0; position:relative; padding-top:5px;}
 #container .menu1 ul li{ float:left; padding-left:10px; height:35px; width:80px; line-height:35px; list-style:none; text-align:center; cursor:pointer}
 #container .menu2{ width:800px; height:35px; border:none; background-color:#333333;}
 #container .menu2 ul{ margin:0; padding:0}
 #container .menu2 ul li{ height:35px; line-height:35px; list-style:none; float:left; cursor:pointer}
 #container .menu2 ul li ul li{ float:left; padding-left:20px; height:35px; line-height:35px; list-style:none}
 .bg{ background-color:#333333}
 .hide{ display:none}
</style>
</head>
<body>
<div id="container">
<div class="menu1">
<ul>
<li class="bg">第一栏</li>
<li>第二栏</li>
<li>第三栏</li>
<li>第四栏</li>
<li>第五栏</li>
</ul>
</div>
<div class="menu2">
<ul>
<li>
<ul>
<li>第一栏</li><li>第一栏</li><li>第一栏</li>
</ul>
</li>
<li>
<ul class="hide">
<li>第二栏</li><li>第二栏</li><li>第二栏</li>
</ul>
</li>
<li>
<ul class="hide">
<li>第三栏</li><li>第三栏</li><li>第三栏</li>
</ul>
</li>
<li>
<ul class="hide">
<li>第四栏</li><li>第四栏</li><li>第四栏</li>
</ul>
</li>
<li>
<ul class="hide">
<li>第五栏</li><li>第五栏</li><li>第五栏</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
网页编辑器ckeditor和ckfinder配置步骤分享
May 24 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
Aug 17 Javascript
jquery.cookie.js用法实例详解
Dec 25 Javascript
js实现人民币大写金额形式转换
Apr 27 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
May 26 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
Jun 08 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
Jun 26 Javascript
JQuery PHP图片在线裁剪实例
Jul 27 Javascript
PHP+jquery+ajax实现分页
Dec 09 Javascript
小试小程序云开发(小结)
Jun 06 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
Jun 17 Javascript
JS+CSS实现炫酷光感效果
Sep 05 Javascript
jfinal与bootstrap的登录跳转实战演习
Sep 22 #Javascript
jquery实现经典的淡入淡出选项卡效果代码
Sep 22 #Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
Sep 22 #Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
Sep 22 #Javascript
QQ登录背景闪动效果附效果演示源码下载
Sep 22 #Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
Sep 22 #Javascript
jQuery实现Tab菜单滚动切换的方法
Sep 21 #Javascript
You might like
用PHP实现多级树型菜单
2006/10/09 PHP
PHP 登录完成后如何跳转上一访问页面
2014/01/14 PHP
50个优秀经典PHP算法大集合 附源码
2020/08/26 PHP
一些不错的js函数ajax
2008/08/20 Javascript
Javascript客户端将指定区域导出到Word、Excel的代码
2008/10/22 Javascript
Firefox div高度自适应
2009/04/28 Javascript
JS 动态获取节点代码innerHTML分析 [IE,FF]
2009/11/30 Javascript
jQuery 表格工具集
2010/04/25 Javascript
js中符号转意问题示例探讨
2013/08/19 Javascript
jQuery实现个性翻牌效果导航菜单的方法
2015/03/09 Javascript
jQuery实现平滑滚动的标签分栏切换效果
2015/08/28 Javascript
bootstrap快速制作后台界面
2016/12/05 Javascript
bootstrapValidator.min.js表单验证插件
2017/02/09 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
2017/06/08 jQuery
JS原型继承四步曲及原型继承图一览
2017/11/28 Javascript
angular1.x ui-route传参的三种写法小结
2018/08/31 Javascript
Javascript实现时间倒计时功能
2018/11/17 Javascript
深入理解Puppeteer的入门教程和实践
2019/03/05 Javascript
如何实现iframe父子传参通信
2020/02/05 Javascript
用Python展示动态规则法用以解决重叠子问题的示例
2015/04/02 Python
python实现控制台打印的方法
2019/01/12 Python
python 通过文件夹导入包的操作
2020/06/01 Python
纯CSS3代码实现文字描边
2016/04/25 HTML / CSS
戴尔加拿大官网:Dell加拿大
2016/09/17 全球购物
波兰快递服务:Globkurier.pl
2019/11/08 全球购物
销售人员自我评价
2014/02/01 职场文书
毕业生自荐信格式
2014/03/07 职场文书
护士长2014年度工作总结
2014/11/11 职场文书
乔迁之喜答谢词
2015/01/05 职场文书
民政工作个人总结
2015/02/28 职场文书
2015年全国保险公众宣传日活动方案
2015/05/06 职场文书
应收账款管理制度
2015/08/06 职场文书
小学校本教研总结
2015/08/13 职场文书
计算机实训心得体会
2016/01/14 职场文书
演讲稿:​快乐,从不抱怨开始!
2019/04/02 职场文书
为什么MySQL选择Repeatable Read作为默认隔离级别
2021/07/26 MySQL