jQuery实现向下滑出的平滑下拉菜单效果


Posted in Javascript onAugust 21, 2015

本文实例讲述了jQuery实现向下滑出的平滑下拉菜单效果。分享给大家供大家参考。具体如下:

这里演示的jQuery向下滑出的下拉平滑菜单,可添加多个菜单选项,修改起来比较灵活的下滑菜单,颜色风格自己可修改,不多介绍了,感兴趣的运行一下代码看效果。

运行效果截图如下:

jQuery实现向下滑出的平滑下拉菜单效果

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery缓冲下拉导航菜单特效</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("ul.subnav").parent().append("<span></span>");
  $("ul.topnav li span").mouseover(function() {
    $(this).parent().find("ul.subnav").slideDown('fast').show();
    $(this).parent().hover(function() {
    }, function(){
      $(this).parent().find("ul.subnav").slideUp('slow');
    });
    }).hover(function() {
      $(this).addClass("subhover");
    }, function(){
      $(this).removeClass("subhover");
  });
});
</script>
<style>
body,form,ul{margin:0px; padding:0px;}
body{font-size:12px;}
.clear{clear:both}
div.examples_body {
width: 750px;
margin: 50px auto;
}
h2.title_name {
   font-family: normal Georgia,'Times New Roman',Times,serif;
 font-weight: normal;
   font-size: 4em;
   padding: 50px 0 20px 0;
   text-align: center;
}
h2.title_name span {
 font-family: normal Georgia,'Times New Roman',Times,serif;
   color: #AAA;
   font-size: 0.9em;
}
h2.title_name small {
   color: #AAAAAA;
   display: block;
   font-family: normal Verdana,Arial,Helvetica,sans-serif;
   font-size: 0.2em;
   letter-spacing: 1.0em;
   text-transform: uppercase;
}
div.examples_body h3 {
  color: #555;
  font-size: 130%;
 padding-bottom: 15px;
 margin-bottom: 15px;
}
p.demo_btn {
 width: 750px;
 margin: 30px auto;
 font-size: 0;
 text-indent: -9999px;
 clear: both;
 overflow: hidden;
}
p.demo_btn a {
 width: 160px;
 height: 41px;
 float: right;
background: url(images/Download_Button.gif) no-repeat;
}
p.demo_btn a:hover {
background: url(images/Download_Button_o.gif) no-repeat;
}
div.examples_body_wrap h3 {
color: #f9f66d;
 font-size: 130%;
 padding-bottom: 15px;
 margin-bottom: 15px;
 background: url(images/solid-line-news.gif) repeat-x bottom;
}
div.examples_body_wrap {
width: 750px;
margin: 50px auto 0 auto;
clear: both;
}
ul.topnav {
width: 710px;
float: left;
background: #222;
background: url(images/topnav_bg.gif) repeat-x;
}
ul.topnav li {
float: left;
margin: 0;
padding: 0 10px 0 15px;
position: relative;
display: inline;
}
ul.topnav li a { 
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.topnav li a:hover {
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
ul.topnav li span {
width: 17px;
height: 35px;
float: left;
background: url(images/subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {
  background-position: center bottom; cursor: pointer;
}  
ul.topnav li ul.subnav {
width: 170px;
position: absolute;
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
border: 1px solid #111;
}
ul.topnav li ul.subnav li{
width: 170px;
margin: 0; padding: 0;
border-top: 1px solid #252525;
border-bottom: 1px solid #444;
clear: both;
}
html ul.topnav li ul.subnav li a {
 width: 145px;
 float: left;
 background-color: #333;
 padding-left: 20px;
 font-size: 0.9em;
}
html ul.topnav li ul.subnav li a:hover {
 background-color: #222;
}
</style>
</head>
<body>
<div class="examples_body">
  <ul class="topnav">
    <li><a href="#">下拉菜单0</a></li>
    <li>
    <a href="#">下拉菜单1</a>
    <ul class="subnav">
    <li><a href="#">下拉子菜单</a></li>
    <li><a href="#">下拉子菜单</a></li>
    </ul>
    </li>
    <li>
    <a href="#">下拉菜单2</a>
    <ul class="subnav">
    <li><a href="#">下拉子菜单</a></li>
    <li><a href="#">下拉子菜单</a></li>
    <li><a href="#">下拉子菜单</a></li>
    <li><a href="#">下拉子菜单</a></li>
    <li><a href="#">下拉子菜单</a></li>
    </ul>
    </li>
    <li><a href="#">下拉菜单3</a>
    <ul class="subnav">
    <li><a href="#">下拉子菜单</a></li>
    <li><a href="#">下拉子菜单</a></li>
    <li><a href="#">下拉子菜单</a></li>
    </ul>
    </li>
    <li><a href="#">下拉菜单4</a></li>
    <li><a href="#">下拉菜单5</a></li>
  </ul>
<!-- Examples body -->
</div>
<div class="clear"></div>
</body>
</html>

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

Javascript 相关文章推荐
服务器安全设置的几个注册表设置
Jul 28 Javascript
IE本地存储userdata的一个bug说明
Jul 01 Javascript
Javascript变量函数浅析
Sep 02 Javascript
js中单引号与双引号冲突问题解决方法
Oct 04 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
Feb 12 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
Jun 27 Javascript
Node.js模块加载详解
Aug 16 Javascript
jQuery实现Tab菜单滚动切换的方法
Sep 21 Javascript
jQuery使用$.each遍历json数组的简单实现方法
Apr 18 Javascript
JavaScript_object基础入门(必看篇)
Jun 13 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
Jul 02 Javascript
vue计算属性computed的使用方法示例
Mar 13 Javascript
js实现点击切换TAB标签实例
Aug 21 #Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
Aug 21 #Javascript
JavaScript 常见安全漏洞和自动化检测技术
Aug 21 #Javascript
js+css实现文字散开重组动画特效代码分享
Aug 21 #Javascript
jquery实现叠层3D文字特效代码分享
Aug 21 #Javascript
jQuery实现垂直半透明手风琴特效代码分享
Aug 21 #Javascript
js实现温度计时间样式代码分享
Aug 21 #Javascript
You might like
神族 Protoss 剧情介绍
2020/03/14 星际争霸
php+jQuery.uploadify实现文件上传教程
2014/12/26 PHP
在laravel中实现ORM模型使用第二个数据库设置
2019/10/24 PHP
PHP数组与字符串互相转换实例
2020/05/05 PHP
iis6+javascript Add an Extension File
2007/06/13 Javascript
20个非常棒的Jquery实用工具 国外文章
2010/01/01 Javascript
ExtJs使用IFrame的实现代码
2010/03/24 Javascript
jQuery EasyUI API 中文文档 - Parser 解析器
2011/09/29 Javascript
asp.net中System.Timers.Timer的使用方法
2013/03/20 Javascript
文本框只能选择数据到文本框禁止手动输入
2013/11/22 Javascript
javascript删除数组元素并且数组长度减小的简单实例
2014/02/14 Javascript
node+express+ejs制作简单页面上手指南
2014/11/26 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
2015/04/12 Javascript
探索angularjs+requirejs全面实现按需加载的套路
2016/02/26 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
2016/06/30 Javascript
Ionic + Angular.js实现图片轮播的方法示例
2017/05/21 Javascript
基于vue2.0实现的级联选择器
2017/06/09 Javascript
node实现登录图片验证码的示例代码
2018/04/20 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
2018/08/10 Javascript
layui radio性别单选框赋值方法
2018/08/15 Javascript
vue-router传递参数的几种方式实例详解
2018/11/13 Javascript
JavaScript对象的特性与实践应用深入详解
2018/12/30 Javascript
vue中使用rem布局代码详解
2019/10/30 Javascript
es6数组的flat(),flatMap()函数用法实例分析
2020/04/18 Javascript
[04:00]DOTA2解说界神雕侠侣 CJ第四天谷子现场过生日
2013/07/30 DOTA
Python基于Pymssql模块实现连接SQL Server数据库的方法详解
2017/07/20 Python
python实现字符串和字典的转换
2018/09/29 Python
pyqt 实现在Widgets中显示图片和文字的方法
2019/06/13 Python
浅析Python语言自带的数据结构有哪些
2019/08/27 Python
static全局变量与普通的全局变量有什么区别?static局部变量和普通局部变量有什么区别?static函数与普通函数有什么区别?
2015/02/22 面试题
哪些情况下不应该使用索引
2015/07/20 面试题
试用期解除劳动合同通知书
2015/04/16 职场文书
十月围城观后感
2015/06/08 职场文书
2016大学军训心得体会
2016/01/11 职场文书
2016学习依法治国心得体会
2016/01/15 职场文书
2019年怎样写好导游词?
2019/07/02 职场文书