JQuery实现绚丽的横向下拉菜单


Posted in Javascript onDecember 19, 2013

以前经常看见网站有菜单的显示,鼠标移上去就出现下拉的效果,很绚丽,经过看JQuery视频后,发现实现也挺容易的。
JQuery实现绚丽的横向下拉菜单 
Html中,通过<ul>和<li>标签将所需的元素写出来。 

<body> 
<ul> 
<li class="hmain"> 
<a href="#">菜单项1</a> 
<ul> 
<li> 
<a href="#"> 子菜单项11</a> 
</li> 
<li> 
<a href="#">子菜单项12</a> 
</li> 
</ul> 
</li> 
<li class="hmain"> 
<a href="#">菜单项2</a> 
<ul> 
<li> 
<a href="#">子菜单项21</a> 
</li> 
<li> 
<a href="#">子菜单项22</a> 
</li> 
</ul> 
</li> 
<li class="hmain"> 
<a href="#">菜单项3</a> 
<ul> 
<li> 
<a href="#">子菜单项31</a> 
</li> 
<li> 
<a href="#">子菜单项32</a> 
</li> 
</ul> 
</li> 
</ul> 
</body>

最外围的<ul>中元素<li>即为菜单项1、菜单项2、菜单项3,下拉菜单分别在各主菜单之下,如果菜单最外层为ul,一层每个主菜单放在一个li中,如果有子菜单,在这个主菜单的li中建立新的ul,再依次嵌套即可构建多层的菜单。

CSS中

ul,li{ 
/*清除ul和li上的小圆点*/ 
list-style:none; 
} 
ul{ 
/*清除子菜单的缩进值*/ 
padding:0; 
margin:0; } 
.hmain{ 
background-image:url(../images/title.gif); //前面的小三角 
background-repeat:repeat-x; 
width:120px; 
} 
li{ 
background-color:#EEEEEE; //背景图片覆盖背景色 
} 
a{ 
//取消所有的下划线 
text-decoration:none; 
padding-left:20px; 
display:block; /*块集元素可充满区域*/ 
display:inline-block; 
width:100px; 
padding-top:3px; 
padding-bottom:3px; 
} 
.hmain a{ 
color:white; 
background-image:url(../images/collapsed.gif); 
background-repeat:no-repeat; 
background-position:3px center; 
} 
.hmain li a{ 
color:black; 
background-image:none; 
} 
.hmain ul{ 
display:none; 
} 
.hmain{ 
float:left; 
margin-right:1px; 
}<strong> 
</strong>

Html中引用js文件jquery.js和menu.js,其中menu.js如下:
$(document).ready(function(){ 
//页面中的DOM已经装载完成时,执行的代码 
$(".main> a,.hmain a").click(function(){ 
//找到主菜单项对应的子菜单项 
var ulNode=$(this).next("ul"); 
ulNode.slideToggle(); 
changeIcon($(this)); 
}); 
$(".hmain").hover(function(){ 
$(this).children ("ul").slideToggle(); 
changeIcon($(this).children("a")); 
},function(){ 
$(this).children("ul").slideToggle(); 
changeIcon($(this).children("a")); 
}); 
}); 
/* 
*修改主菜单的指示图标 
*/ 
function changeIcon(mainNode){ 
if(mainNode){ 
if(mainNode.css("background-image").indexOf("collapsed.gif")>=0){ 
mainNode.css("background-image","url('images/expanded.gif')"); 
}else{ 
mainNode.css("background-image","url('images/collapsed.gif')"); 
} 
} 
}

这样绚丽的下拉菜单就完成了。实现很简单,不过里面的小知识点很零碎。例如:.main a和.main>a的不同之处,前者选择使用.main的这个class的元素内容所有的a节点,后者只选择.main的子节点中的a节点。

这样的例子应用性很强,在网站中使用让界面显得更加的美观,例子才看3个,抓紧时间继续看...

Javascript 相关文章推荐
encode脚本和normal脚本混用的问题与解决方法
Mar 08 Javascript
JQuery实现倒计时按钮的实现代码
Mar 23 Javascript
JS时间选择器 兼容IE6,7,8,9
Jun 26 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
Nov 17 Javascript
详解jQuery插件开发中的extend方法
Nov 19 Javascript
asm.js使用示例代码
Nov 28 Javascript
JavaScript动态修改弹出窗口大小的方法
Apr 06 Javascript
Jquery实现仿京东商城省市联动菜单
Nov 19 Javascript
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
推荐10款扩展Web表单的JS插件
Dec 25 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
Feb 21 Javascript
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
jquery prop的使用介绍及与attr的区别
Dec 19 #Javascript
js获取select选中的option的text示例代码
Dec 19 #Javascript
js 高效去除数组重复元素示例代码
Dec 19 #Javascript
无闪烁更新网页内容JS实现
Dec 19 #Javascript
javascript中字符串的定义示例代码
Dec 19 #Javascript
javascript中typeof的使用示例
Dec 19 #Javascript
javascript中普通函数的使用介绍
Dec 19 #Javascript
You might like
浅析php header 跳转
2013/06/17 PHP
thinkPHP中volist标签用法示例
2016/12/06 PHP
基于PHP+Mysql简单实现了图书购物车系统的实例详解
2020/08/06 PHP
用roll.js实现的图片自动滚动+鼠标触动的特效
2007/03/18 Javascript
锋利的jQuery 第三章章节总结的例子
2010/03/23 Javascript
javascript与CSS复习(《精通javascript》)
2010/06/29 Javascript
js indexOf()定义和用法
2012/10/21 Javascript
jQuery中操控hidden、disable等无值属性的方法
2014/01/06 Javascript
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
JavaScript中对象property的删除方法介绍
2014/12/30 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
jquery if条件语句的写法
2016/05/19 Javascript
详解js中==与===的区别
2017/01/08 Javascript
Vue开发过程中遇到的疑惑知识点总结
2017/01/20 Javascript
jQuery中用on绑定事件时需注意的事项
2017/03/19 Javascript
详解使用nodeJs安装Vue-cli
2017/05/17 NodeJs
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
2017/06/20 Javascript
微信小程序获取循环元素id以及wx.login登录操作
2017/08/17 Javascript
如何基于JS截获动态代码
2019/12/25 Javascript
webpack打包优化的几个方法总结
2020/02/10 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
2020/08/14 Javascript
python实现字符串连接的三种方法及其效率、适用场景详解
2017/01/13 Python
python实现壁纸批量下载代码实例
2018/01/25 Python
Python语言进阶知识点总结
2019/05/28 Python
Django学习之文件上传与下载
2019/10/06 Python
python基于exchange函数发送邮件过程详解
2020/11/06 Python
python基于win32api实现键盘输入
2020/12/09 Python
利用CSS3把图片变成灰色模式的实例代码
2016/09/06 HTML / CSS
html5如何及时更新缓存文件(js、css或图片)
2013/06/24 HTML / CSS
乌克兰网上服装店:Bolf.ua
2018/10/30 全球购物
咖啡店的创业计划书,让你hold不住
2014/01/03 职场文书
2014年政工师工作总结
2014/12/18 职场文书
卡特教练观后感
2015/06/08 职场文书
2015大学生暑期实习报告
2015/07/13 职场文书
2016年春季趣味运动会开幕词
2016/03/04 职场文书
php随机生成验证码,php随机生成数字,php随机生成数字加字母!
2021/04/01 PHP