编程 Javascript

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程序设计有所帮助。

jQuery实现简单下拉导航效果

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript 高效运行代码分析

Mar 18 Javascript

js onclick事件传参讲解

Nov 06 Javascript

javascript打印输出json实例

Nov 11 Javascript

javascript仿京东导航左侧分类导航下拉菜单效果

Nov 25 Javascript

Vue.js 表单控件操作小结

Mar 29 Javascript

JS实现根据指定值删除数组中的元素操作示例

Aug 02 Javascript

vue+element实现表单校验功能

May 20 Javascript

js回文数的4种判断方法示例

Jun 04 Javascript

使用JavaScrip模拟实现仿京东搜索框功能

Oct 16 Javascript

vue动态循环出的多个select出现过的变为disabled(实例代码)

Nov 10 Javascript

JS动态显示倒计时效果

Dec 12 Javascript

在vue中使用Base64转码的案例

Aug 07 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