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 相关文章推荐
JavaScript 学习笔记(五)
Dec 31 Javascript
javascript 传统事件模型构造的事件监听器实现代码
May 31 Javascript
JavaScript经典效果集锦
Jul 06 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
Sep 02 Javascript
AngularJS入门教程(一):静态模板
Dec 06 Javascript
javascript去除空格方法小结
May 21 Javascript
JavaScript操作XML文件之XML读取方法
Jun 09 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
Oct 27 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
Sep 29 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
Oct 09 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
Apr 09 Javascript
Vue双向数据绑定(MVVM)的原理
Oct 03 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
全国FM电台频率大全 - 9 上海市
2020/03/11 无线电
玩转虚拟域名◎+ .
2006/10/09 PHP
php生成N个不重复的随机数实例
2013/11/12 PHP
zf框架的校验器InArray使用示例
2014/03/13 PHP
PHP+Apache+Mysql环境搭建教程
2016/08/01 PHP
PHP文件上传操作实例详解
2016/09/27 PHP
一种JavaScript的设计模式
2006/11/22 Javascript
JQuery 将元素显示在屏幕的中央的代码
2010/02/27 Javascript
jQuery 前的按键判断代码
2010/03/19 Javascript
javascript通过class来获取元素实现代码
2013/02/20 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
2013/06/17 Javascript
使用JS+plupload直接批量上传图片到又拍云
2014/12/01 Javascript
javascript里使用php代码实例
2014/12/13 Javascript
基于jquery插件实现拖拽删除图片功能
2020/08/27 Javascript
利用 spin.js 生成等待效果(js 等待效果)
2017/06/25 Javascript
JS装饰器函数用法总结
2018/04/21 Javascript
AngularJS 前台分页实现的示例代码
2018/06/07 Javascript
Python制作简易注册登录系统
2016/12/15 Python
Flask框架web开发之零基础入门
2018/12/10 Python
python自定义时钟类、定时任务类
2021/02/22 Python
Python中如何添加自定义模块
2020/06/09 Python
使用Python通过oBIX协议访问Niagara数据的示例
2020/12/04 Python
CSS3中设置3D变形的transform-style属性详解
2016/05/23 HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
2017/12/27 HTML / CSS
用canvas做一个DVD待机动画的实现代码
2019/04/12 HTML / CSS
html2canvas截图空白问题的解决
2020/03/24 HTML / CSS
简述进程的启动、终止的方式以及如何进行进程的查看
2014/02/20 面试题
汽车维修工岗位职责
2014/02/12 职场文书
关于青春的演讲稿500字
2014/08/22 职场文书
基层领导干部“四风”问题批评与自我批评
2014/09/23 职场文书
商家认证委托书格式
2014/10/16 职场文书
工作失职检讨书500字
2014/10/17 职场文书
乡镇党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
导游词之山西关帝庙
2019/11/01 职场文书
解决numpy数组互换两行及赋值的问题
2021/04/17 Python
抖音动画片,皮皮虾,《治愈系》动画在用这首REMIX作为背景音乐,Anak ,The last world with you完整版
2022/03/16 杂记