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 相关文章推荐
jQuery实现的Email中的收件人效果(按del键删除)
Mar 20 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
Apr 05 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
Jan 17 Javascript
JavaScript判断变量是否为空的自定义函数分享
Jan 31 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
May 21 Javascript
jQuery中get方法用法分析
Dec 07 Javascript
Vue响应式原理详解
Apr 18 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
vue.js使用3DES加密的方法示例
May 18 Javascript
解决layui 复选框等内置控件不显示的问题
Aug 14 Javascript
vue通过style或者class改变样式的实例代码
Oct 30 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
Mar 08 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
Zend Studio去除编辑器的语法警告设置方法
2012/10/24 PHP
简单解决新浪SAE无法上传文件的问题
2015/05/13 PHP
php使用for语句输出三角形的方法
2015/06/09 PHP
php验证码生成代码
2015/11/11 PHP
ThinkPHP5实现作业管理系统中处理学生未交作业与已交作业信息的方法
2016/11/12 PHP
PHP用正则匹配form表单中所有元素的类型和属性值实例代码
2017/02/28 PHP
Javascript 静态页面实现随机显示广告的办法
2010/11/17 Javascript
jQuery中filter()和find()的区别深入了解
2013/09/25 Javascript
a标签的href与onclick事件的区别详解
2014/11/12 Javascript
JavaScript设置表单上传时文件个数的方法
2015/08/11 Javascript
原生JS实现图片轮播与淡入效果的简单实例
2016/08/21 Javascript
javaScript中定义类或对象的五种方式总结
2016/12/04 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
2017/01/12 Javascript
NodeJS仿WebApi路由示例
2017/02/28 NodeJs
jquery实现左右轮播图效果
2017/09/28 jQuery
vue 指定组件缓存实例详解
2018/04/01 Javascript
vue+Element中table表格实现可编辑(select下拉框)
2020/05/21 Javascript
[14:00]DOTA2国际邀请赛史上最长大战 赛后专访B神
2013/08/10 DOTA
Python中装饰器的一个妙用
2015/02/08 Python
Python中使用第三方库xlutils来追加写入Excel文件示例
2015/04/05 Python
解析Python中的变量、引用、拷贝和作用域的问题
2015/04/07 Python
基于TensorFlow中自定义梯度的2种方式
2020/02/04 Python
pycharm工具连接mysql数据库失败问题
2020/04/01 Python
IE滤镜与CSS3效果(详细整理分享)
2013/01/25 HTML / CSS
Nike瑞士官网:Nike CH
2021/01/18 全球购物
什么时候需要进行强制类型转换
2016/09/03 面试题
会计专业自荐信范文
2013/12/02 职场文书
初级会计求职信范文
2014/02/15 职场文书
房屋出租协议书
2014/04/10 职场文书
副检察长四风问题对照检查材料思想汇报
2014/10/07 职场文书
2014年小学校长工作总结
2014/12/08 职场文书
2014年机关工会工作总结
2014/12/19 职场文书
监护人证明
2015/06/19 职场文书
爱国教育主题班会
2015/08/14 职场文书
2019年员工旷工保证书!
2019/06/28 职场文书
Python使用pandas导入xlsx格式的excel文件内容操作代码
2022/12/24 Python