编程 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 相关文章推荐

List the UTC Time on a Computer

Jun 11 Javascript

JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)

Jun 12 Javascript

js改变css样式的三种方法推荐

Jun 28 Javascript

AngularJS $modal弹出框实例代码

Aug 24 Javascript

原生js实现弹出层效果

Jan 20 Javascript

Angular.js去除页面中显示的空行方法示例

Mar 30 Javascript

解决linux下node.js全局模块找不到的问题

May 15 Javascript

vue定义全局变量和全局方法的方法示例

Aug 01 Javascript

springMvc 前端用json的方式向后台传递对象数组方法

Aug 07 Javascript

JS实现判断数组是否包含某个元素示例

May 24 Javascript

echarts大屏字体自适应的方法步骤

Jul 12 Javascript

详细教你微信公众号正文页SVG交互开发技巧

Jul 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