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 相关文章推荐
更正确的asp冒泡排序
May 24 Javascript
深入理解JavaScript系列(15) 函数(Functions)
Apr 12 Javascript
js 中将多个逗号替换为一个逗号的代码
Jun 07 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
Aug 05 Javascript
js实现透明度渐变效果的方法
Apr 10 Javascript
javascript实现简单的进度条
Jul 02 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
Sep 28 Javascript
原生JS实现Ajax跨域请求flask响应内容
Oct 24 Javascript
JavaScript中EventLoop介绍
Jan 22 Javascript
对vue 键盘回车事件的实例讲解
Aug 25 Javascript
详解JavaScript中的函数、对象
Apr 01 Javascript
vue实现简易音乐播放器
Aug 14 Vue.js
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 JS Ip地址及域名格式检测代码
2013/09/27 PHP
正确的PHP匹配UTF-8中文的正则表达式
2015/05/13 PHP
php去除二维数组的重复项方法
2015/11/03 PHP
详解PHP的Yii框架中的Controller控制器
2016/03/29 PHP
PHP 在数组中搜索给定的简单实例 array_search 函数
2016/06/13 PHP
PHP实现批量删除(封装)
2017/04/28 PHP
PHP中单例模式的使用场景与使用方法讲解
2019/03/18 PHP
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
2007/08/08 Javascript
ajaxControlToolkit AutoCompleteExtender的用法
2008/10/30 Javascript
关于COOKIE个数与大小的问题
2011/01/17 Javascript
js 手机号码合法性验证代码集合
2012/09/29 Javascript
JavaScript中创建对象和继承示例解读
2014/02/12 Javascript
JavaScript中如何通过arguments对象实现对象的重载
2014/05/12 Javascript
图解JavaScript中的this关键字
2020/05/28 Javascript
js判断空对象的实例(超简单)
2016/07/26 Javascript
web 前端常用组件之Layer弹出层组件
2016/09/22 Javascript
JS实现倒计时(天数、时、分、秒)
2016/11/16 Javascript
DropDownList控件绑定数据源的三种方法
2016/12/24 Javascript
详解vue渲染从后台获取的json数据
2017/07/06 Javascript
JavaScript实现简单的双色球(实例讲解)
2017/07/31 Javascript
原生js实现无缝轮播图
2020/01/11 Javascript
vue 组件间的通信之子组件向父组件传值的方式
2020/07/29 Javascript
Python中asyncio与aiohttp入门教程
2018/10/16 Python
python查找重复图片并删除(图片去重)
2019/07/16 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
python匿名函数lambda原理及实例解析
2020/02/07 Python
Kears 使用:通过回调函数保存最佳准确率下的模型操作
2020/06/17 Python
canvas需要在标签里直接定义宽高
2014/12/17 HTML / CSS
Dr.Jart+美国官网:韩国药妆品牌
2019/01/18 全球购物
学校经典推荐信
2013/10/30 职场文书
《彩色世界》教学反思
2014/04/12 职场文书
教师党员学习十八届四中全会思想汇报
2014/11/03 职场文书
雷锋的故事观后感
2015/06/10 职场文书
2015秋季开学典礼主持词
2015/07/16 职场文书
小学六年级班主任工作经验交流材料
2015/11/02 职场文书
Python 中的 copy()和deepcopy()
2021/11/07 Python