jQuery实现简单下拉导航效果


Posted in Javascript onSeptember 07, 2015

本文实例讲述了jQuery实现简单下拉导航效果。分享给大家供大家参考。具体如下:

这里粗略做一款基于jquery的下拉导航菜单效果,我觉得挺不错,虽然没有怎么美化,但是代码易懂,另外修补的空间也比较大,相信对学习CSS以及jquery的朋友有不小的帮助。

运行效果截图如下:

jQuery实现简单下拉导航效果

在线演示地址如下:

具体代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery下拉导航</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
 $('.nav').children("li:has(ul)").hover(
function(){
 $(this).children("ul").slideDown();
 },
 function(){
  $(this).children("ul").hide();
 }
 );
 });
 </script>
 <style type="text/css">
  *{margin:0;padding:0;}
  .nav {margin:200px;list-style-type:none;}
  .nav li {position:relative;float:left;margin-right:10px;}
  .nav li ul {display:none;position:absolute;top:20px;left:0;list-style-type:none;}
  .nav li ul li {padding:2px 0;}
 </style>
</head>
<body>
 <ul class="nav">
 <li><a href="#">首页</a>
 </li>
 <li>
 <a href="#">链接</a>
 <ul>
  <li><a href="#">aaa</a></li>
  <li><a href="#">bbb</a></li>
  <li><a href="#">ccc</a></li>
  <li><a href="#">ddd</a></li>
 </ul>
 </li>
 <li>
 <a href="#">相册</a>
 <ul>
  <li><a href="#">11</a></li>
  <li><a href="#">22</a></li>
  <li><a href="#">33</a></li>
  <li><a href="#">44</a></li>
 </ul>
 </li>
 <li>
 <a href="#">博客</a>
 <ul>
  <li><a href="#">AA</a></li>
  <li><a href="#">BB</a></li>
  <li><a href="#">CC</a></li>
  <li><a href="#">DD</a></li>
 </ul>
 </li>
 <li>
 <a href="#">关于</a>
 </li>
 <div style="clear:both"></div>
</ul>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
更正确的asp冒泡排序
May 24 Javascript
JavaScript 字符串乘法
Aug 20 Javascript
jQuery学习4 浏览器的事件模型
Feb 07 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
Jan 06 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
Aug 30 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
Oct 24 Javascript
javascript中Date对象的使用总结
Nov 21 Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
vue 中自定义指令改变data中的值
Jun 02 Javascript
Angular 4.X开发实践中的踩坑小结
Jul 04 Javascript
微信小程序使用wxParse解析html的方法示例
Jan 17 Javascript
react使用CSS实现react动画功能示例
May 18 Javascript
JS实现弹性菜单效果代码
Sep 07 #Javascript
js实现兼容性好的微软官网导航下拉菜单效果
Sep 07 #Javascript
jquery实现标题字体变换的滑动门菜单效果
Sep 07 #Javascript
关于JS中prototype的理解
Sep 07 #Javascript
js+css实现超简洁的二级下拉菜单效果代码
Sep 07 #Javascript
jquery实现简单的二级导航下拉菜单效果
Sep 07 #Javascript
jQuery平滑旋转幻灯片特效代码分享
Sep 07 #Javascript
You might like
PHP网页游戏学习之Xnova(ogame)源码解读(二)
2014/06/23 PHP
全面解析PHP操作Memcache基本函数
2016/07/14 PHP
JavaScript转换农历类实现及调用方法
2013/01/27 Javascript
js数组转json并在后台对其解析具体实现
2013/11/20 Javascript
javascript创建createXmlHttpRequest对象示例代码
2014/02/10 Javascript
5种处理js跨域问题方法汇总
2014/12/04 Javascript
jQuery中 prop() attr()使用详解
2015/05/19 Javascript
javascript实现textarea中tab键的缩排处理方法
2015/06/26 Javascript
ztree实现权限横向显示功能
2017/05/20 Javascript
微信小程序自定义底部弹出框
2020/11/16 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
2019/01/19 Javascript
小程序getLocation需要在app.json中声明permission字段
2019/04/04 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
2019/10/14 Javascript
jQuery实现简单全选框
2020/09/13 jQuery
Python计算程序运行时间的方法
2014/12/13 Python
深入讲解Python编程中的字符串
2015/10/14 Python
Python检测生僻字的实现方法
2016/10/23 Python
python用户管理系统
2018/03/13 Python
遗传算法python版
2018/03/19 Python
Python图像处理之图像的读取、显示与保存操作【测试可用】
2019/01/04 Python
python批量下载抖音视频
2019/06/17 Python
python 求某条线上特定x值或y值的点坐标方法
2019/07/09 Python
Python字符串处理的8招秘籍(小结)
2019/08/13 Python
python字符串判断密码强弱
2020/03/18 Python
python 邮件检测工具mmpi的使用
2021/01/04 Python
CSS3简单实现照片墙
2014/12/12 HTML / CSS
html5 sessionStorage会话存储_动力节点Java学院整理
2017/07/06 HTML / CSS
体验完美剃须:The Art of Shaving
2018/08/06 全球购物
英国地毯卖家:The Rug Seller
2019/07/18 全球购物
为什么group by 和order by会使查询变慢
2014/05/16 面试题
合伙经营协议书范本
2014/09/13 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
保护校园环境倡议书
2015/04/28 职场文书
学校禁毒宣传活动总结
2015/05/08 职场文书
教师考核鉴定意见
2015/06/05 职场文书
2019通用版导游词范本!
2019/08/07 职场文书