jquery实现二级导航下拉菜单效果
2015-12-18 09:25
1086 查看
下拉菜单实现很简单,纯css也能实现,但是我不擅长,用jquery也就两行代码,于是就用jquery+css实现简单二级下拉菜单导航,分享给大家供大家参考,具体内容如下
运行效果图:
具体代码:
第一步:确定导航的html格式
<ul id="nav"> <li><a href="#">首页</a> <ul> <li><a href="#">PHP编程</a></li> <li><a href="#">JAVA编程</a></li> <li><a href="#">RGB对照表</a></li> <li><a href="#">颜色搭配技巧</a></li> </ul> </li> <li><a href="#">栏目一</a> <ul> <li><a href="#">PHP编程</a></li> <li><a href="#">JAVA编程</a></li> <li><a href="#">RGB对照表</a></li> <li><a href="#">颜色搭配技巧</a></li> </ul> </li> <ul>
第二步:CSS实现导航效果
#nav { line-height: 24px; list-style-type: none; background:#666; } #nav a { display: block; width: 100px; text-align:center; } #nav a:link { color:#666; text-decoration:none; } #nav a:visited { color:#666;text-decoration:none; } #nav a:hover { color:#FFF;text-decoration:none;font-weight:bold; } #nav li { float: left; width: 100px; background:#CCC; } #nav li a:hover{ background:#999; } #nav li ul { line-height: 27px; list-style-type: none;text-align:left; width: 180px; position: absolute;display: none; } #nav li ul li{ float: left; width: 180px; background: #F6F6F6; } #nav li ul a{ display: block; width: 156px;text-align:left;padding-left:24px; } #nav li ul a:link { color:#666; text-decoration:none; } #nav li ul a:visited { color:#666;text-decoration:none; } #nav li ul a:hover { color:#F3F3F3;text-decoration:none;font-weight:normal; }
第三步:jquery实现下拉隐藏效果
$(function() { $("#nav li").hover( function() { $(this).find("ul").show(100); }, function() { $(this).find("ul").hide(300); } ); });
希望本文所述对大家学习javascript程序设计有所帮助,教大家通过jquery实现二级导航下拉菜单效果。
您可能感兴趣的文章:
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- JavaScript 各种遍历方式详解
- 支持IE6 IE7 Firefox 的纯CSS的下拉菜单
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码
- 使用Browserify配合jQuery进行编程的超级指南
- jquery如何实现在加载完iframe的内容后再进行操作
- jquery $.ajax()取xml数据的小问题解决方法