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 相关文章推荐
Javascript实现关联数据(Linked Data)查询及注意细节
Feb 22 Javascript
php,js,css字符串截取的办法集锦
Sep 26 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
Mar 03 Javascript
javascript数组去重方法汇总
Apr 23 Javascript
JS异步文件分片断点上传的实现思路
Dec 25 Javascript
深入理解JavaScript中的for循环
Feb 07 Javascript
基于jQuery封装的分页组件
Jun 26 jQuery
AngularJS 实现购物车全选反选功能
Oct 24 Javascript
Angular2开发环境搭建教程之VS Code
Dec 15 Javascript
微信小程序实现图片上传放大预览删除代码
Jun 28 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
May 10 Javascript
react-native 实现购物车滑动删除效果的示例代码
Jan 15 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
php读取3389的脚本
2014/05/06 PHP
PHP生成及获取JSON文件的方法
2016/08/23 PHP
PHP jQuery+Ajax结合写批量删除功能
2017/05/19 PHP
PHP安装memcache扩展的步骤讲解
2019/02/14 PHP
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
2009/05/14 Javascript
自写的一个jQuery圆角插件
2010/10/26 Javascript
jQuery选择器全面总结
2014/01/06 Javascript
JavaScript使用addEventListener添加事件监听用法实例
2015/06/01 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
2016/01/31 Javascript
AngularJS constant和value区别详解
2017/02/28 Javascript
vue.js源代码core scedule.js学习笔记
2017/07/03 Javascript
js is_valid_filename验证文件名的函数
2017/07/19 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
2018/02/23 Javascript
快速了解vue-cli 3.0 新特性
2018/02/28 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
2018/06/29 Javascript
JS实现的A*寻路算法详解
2018/12/14 Javascript
JavaScript动态生成表格的示例
2020/11/02 Javascript
[55:26]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第一场 2月23日
2021/03/11 DOTA
python中requests使用代理proxies方法介绍
2017/10/25 Python
python实现Floyd算法
2018/01/03 Python
使用Python的Dataframe取两列时间值相差一年的所有行方法
2018/07/10 Python
Django中的文件的上传的几种方式
2018/07/23 Python
python中的常量和变量代码详解
2018/07/25 Python
matplotlib实现区域颜色填充
2019/03/18 Python
python numpy存取文件的方式
2020/04/01 Python
基于opencv实现简单画板功能
2020/08/02 Python
Python控制鼠标键盘代码实例
2020/12/08 Python
CSS3媒体查询(Media Queries)介绍
2013/09/12 HTML / CSS
澳大利亚连衣裙和女装在线:Esther
2017/11/11 全球购物
环境科学毕业生自荐信
2013/11/21 职场文书
《那片绿绿的爬山虎》教学反思
2014/02/27 职场文书
写得不错的求职信范文
2014/07/11 职场文书
九一八事变演讲稿
2014/09/05 职场文书
村官个人总结范文
2015/03/03 职场文书
幼儿园家长工作总结2015
2015/04/25 职场文书
毕业论文答辩开场白和答辩技巧
2015/05/27 职场文书