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处理table表格的代码
Dec 06 Javascript
早该知道的7个JavaScript技巧
Mar 27 Javascript
extjs表格文本启用选择复制功能具体实现
Oct 11 Javascript
javascript随机显示背景图片的方法
Jun 18 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
Oct 10 Javascript
浅谈javascript中执行环境(作用域)与作用域链
Dec 08 Javascript
es6学习笔记之Async函数的使用示例
May 11 Javascript
JS实现多张图片预览同步上传功能
Jun 23 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
vue进入页面时滚动条始终在底部代码实例
Mar 26 Javascript
浅谈Vue 自动化部署打包上线
Jun 14 Javascript
Typescript类型系统FLOW静态检查基本规范
May 25 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&amp;MYSQL留言板源码
2020/07/19 PHP
浅析php工厂模式
2014/11/25 PHP
php 伪造ip以及url来路信息方法汇总
2014/11/25 PHP
php提交表单发送邮件的方法
2015/03/20 PHP
详细解读PHP的Yii框架中登陆功能的实现
2015/08/21 PHP
使用PHP similar text计算两个字符串相似度
2015/11/06 PHP
PHP实现根据时间戳获取周几的方法
2016/02/26 PHP
你所要知道JS(DHTML)中的一些技巧
2007/01/09 Javascript
js文字滚动停顿效果代码
2008/06/28 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
2011/04/16 Javascript
Jquery解析json数据详解
2013/12/26 Javascript
初识SmartJS - AOP三剑客
2014/06/08 Javascript
js选择器全面解析
2016/06/27 Javascript
jQuery EasyUI提交表单验证
2016/07/19 Javascript
js实现表格筛选功能
2017/01/18 Javascript
template.js前端模板引擎使用详解
2017/10/10 Javascript
Node.js进阶之核心模块https入门
2018/05/23 Javascript
JavaScript数组去重的几种方法
2019/04/07 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
2019/04/11 Javascript
javascript实现文字跑马灯效果
2020/06/18 Javascript
Python获取apk文件URL地址实例
2013/11/01 Python
基于Python实现对PDF文件的OCR识别
2016/08/05 Python
详解如何用OpenCV + Python 实现人脸识别
2017/10/20 Python
python多任务及返回值的处理方法
2019/01/22 Python
python字符串拼接+和join的区别详解
2020/12/03 Python
matplotlib之pyplot模块之标题(title()和suptitle())
2021/02/22 Python
美国受欢迎的女性牛仔裤品牌:DL1961
2016/11/12 全球购物
泰国演唱会订票网站:StubHub泰国
2018/02/26 全球购物
怎样让char类型的东西转换成int类型
2013/12/09 面试题
2014年安全生产责任书
2014/07/22 职场文书
解放思想演讲稿
2014/09/11 职场文书
反四风对照检查材料思想汇报
2014/09/16 职场文书
化验员岗位职责
2015/02/14 职场文书
史上最牛辞职信
2015/05/13 职场文书
歌咏比赛口号大全
2015/12/25 职场文书
为什么mysql字段要使用NOT NULL
2021/05/13 MySQL