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 遍历json数组的实现代码
Sep 22 Javascript
JavaScript中去掉数组中的重复值的实现方法
Aug 03 Javascript
jQuery 中$(this).index与$.each的使用指南
Nov 20 Javascript
JavaScript将数组转换成CSV格式的方法
Mar 19 Javascript
javascript中异常处理案例(推荐)
Oct 03 Javascript
javascript添加前置0(补零)的几种方法
Jan 05 Javascript
flag和jq on 的绑定多个对象和方法(必看)
Feb 27 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
Vue 组件(component)教程之实现精美的日历方法示例
Jan 08 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
Oct 17 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
May 10 Javascript
如何阻止移动端浏览器点击图片浏览
Aug 29 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的memory_limit限制的方法分享
2012/02/21 PHP
基于PHP常用字符串的总结(待续)
2013/06/07 PHP
PHP中array_map与array_column之间的关系分析
2014/08/19 PHP
thinkphp5.1框架中容器(Container)和门面(Facade)的实现方法分析
2019/08/05 PHP
php测试kafka项目示例
2020/02/06 PHP
ImageFlow可鼠标控制图片滚动
2008/01/30 Javascript
JavaScript 事件查询综合
2009/07/13 Javascript
javascript 事件绑定问题
2011/01/01 Javascript
JQuery 自定义CircleAnimation,Animate方法学习笔记
2011/07/10 Javascript
JS刷新框架外页面七种实现代码
2013/02/18 Javascript
有效提高JavaScript执行效率的几点知识
2015/01/31 Javascript
javascript适合移动端的日期时间拾取器
2015/11/10 Javascript
jQuery 更改checkbox的状态,无效的解决方法
2016/07/22 Javascript
AngularJS基础 ng-csp 指令详解
2016/08/01 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
微信小程序 教程之注册程序
2016/10/17 Javascript
JS实现HTML标签转义及反转义
2020/04/14 Javascript
详解用node.js实现简单的反向代理
2017/06/26 Javascript
简单谈谈原生js的math对象
2017/06/27 Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
2017/11/21 Javascript
JavaScript中变量提升与函数提升经典实例分析
2018/07/26 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
2018/09/27 Javascript
NodeJS加密解密及node-rsa加密解密用法详解
2018/10/12 NodeJs
用实例说明python的*args和**kwargs用法
2013/11/01 Python
Python urllib模块urlopen()与urlretrieve()详解
2013/11/01 Python
python爬取w3shcool的JQuery课程并且保存到本地
2017/04/06 Python
PyQt5打开文件对话框QFileDialog实例代码
2018/02/07 Python
如何利用Python动态模拟太阳系运转
2020/09/04 Python
详解numpy.ndarray.reshape()函数的参数问题
2020/10/13 Python
python 递归相关知识总结
2021/03/03 Python
配件采购员岗位职责
2013/12/03 职场文书
房屋出租委托书格式
2014/09/23 职场文书
迎新生标语大全
2014/10/06 职场文书
试用期工作表现自我评价
2015/03/06 职场文书
2015年药房工作总结
2015/04/25 职场文书
2016年教师师德师风承诺书
2016/03/25 职场文书