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 相关文章推荐
javascript返回顶部效果(自写代码)
Jan 06 Javascript
JS动态获取当前时间,并写到特定的区域
May 03 Javascript
分享jQuery插件的学习笔记
Jan 14 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
Apr 29 Javascript
js实现漫天星星效果
Jan 19 Javascript
javascript实现右下角广告框效果
Feb 01 Javascript
react实现点击选中的li高亮的示例代码
May 24 Javascript
vue安装和使用scss及sass与scss的区别详解
Oct 15 Javascript
JavaScript原型对象原理与应用分析
Dec 27 Javascript
使用zrender.js绘制体温单效果
Oct 31 Javascript
Vue中父子组件的值传递与方法传递
Sep 28 Javascript
详解vue中v-for的key唯一性
May 15 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下通过系统信号量加锁方式获取递增序列ID
2009/09/25 PHP
基于pear auth实现登录验证
2010/02/26 PHP
PHP导出MySQL数据到Excel文件(fputcsv)
2011/07/03 PHP
PHP SPL使用方法和他的威力
2013/11/12 PHP
PHP针对常规模板引擎中与CSS/JSON冲突的解决方法
2014/08/19 PHP
phpstorm编辑器乱码问题解决
2014/12/01 PHP
PHP统一页面编码避免乱码问题
2015/04/09 PHP
php实现点击可刷新验证码
2015/11/07 PHP
解决laravel中日志权限莫名变成了root的问题
2019/10/17 PHP
js图片自动轮播代码分享(js图片轮播)
2014/05/06 Javascript
45个JavaScript编程注意事项、技巧大全
2015/02/11 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
2015/08/23 Javascript
Vue中使用vux的配置详解
2017/05/05 Javascript
浅谈实现vue2.0响应式的基本思路
2018/02/13 Javascript
webpack多入口多出口的实现方法
2018/08/17 Javascript
Koa 使用小技巧(小结)
2018/10/22 Javascript
python实现迭代法求方程组的根过程解析
2019/11/25 Javascript
JavaScript实现旋转木马轮播图
2020/03/16 Javascript
vue 监听 Treeselect 选择项的改变操作
2020/08/31 Javascript
浅析Python 中整型对象存储的位置
2016/05/16 Python
使用Python爬了4400条淘宝商品数据,竟发现了这些“潜规则”
2018/03/23 Python
Python PyAutoGUI模块控制鼠标和键盘实现自动化任务详解
2018/09/04 Python
用python 实现在不确定行数情况下多行输入方法
2019/01/28 Python
详解python深浅拷贝区别
2019/06/24 Python
Python使用Pandas库实现MySQL数据库的读写
2019/07/06 Python
python系统指定文件的查找只输出目录下所有文件及文件夹
2020/01/19 Python
python输出第n个默尼森数的实现示例
2020/03/08 Python
Softmax函数原理及Python实现过程解析
2020/05/22 Python
python安装cx_Oracle和wxPython的方法
2020/09/14 Python
美国最受欢迎的童装品牌之一:The Children’s Place
2016/07/23 全球购物
欧洲著名的二手奢侈品网站:Vestiaire Collective
2020/03/07 全球购物
销售自我评价
2013/10/22 职场文书
2014年小班元旦活动方案
2014/02/16 职场文书
节能标语大全
2014/06/21 职场文书
PyQt5结合QtDesigner实现文本框读写操作
2021/06/11 Python
深入解析MySQL索引数据结构
2021/10/16 MySQL