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 相关文章推荐
原生Js页面滚动延迟加载图片实现原理及过程
Jun 24 Javascript
Javascript让DEDECMS告别手写Tag
Sep 01 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
May 18 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
Mar 08 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
May 10 Javascript
Bootstrap进度条实现代码解析
Mar 07 Javascript
vue.js从安装到搭建过程详解
Mar 17 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
使用JavaScript实现alert的实例代码
Jul 06 Javascript
js Array.slice的8种不同用法示例
Jul 10 Javascript
JS实现网页时钟特效
Mar 25 Javascript
vue cli4下环境变量和模式示例详解
Apr 09 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
成为好程序员必须避免的5个坏习惯
2014/07/04 PHP
destoon首页调用求购供应信息的地区名称的方法
2014/08/21 PHP
浅谈PHP Cookie处理函数
2016/06/10 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
使用jquery给input和textarea设定ie中的focus
2008/05/29 Javascript
js 变量类型转换常用函数与代码[比较全]
2009/12/01 Javascript
js带按钮的提示框可供选择示例代码
2013/09/17 Javascript
浅析jquery的作用与优势
2013/12/02 Javascript
javascript刷新父页面的各种方法汇总
2014/09/03 Javascript
javascript变量声明实例分析
2015/04/25 Javascript
纯javascript制作日历控件
2015/07/17 Javascript
jQuery中trigger()与bind()用法分析
2015/12/18 Javascript
基于javascript制作微博发布栏效果
2016/04/04 Javascript
微信小程序 教程之WXML
2016/10/18 Javascript
js编写简单的聊天室功能
2017/08/17 Javascript
玩转Koa之核心原理分析
2018/12/29 Javascript
详解小程序BackgroundAudioManager踩坑之旅
2019/12/08 Javascript
跟老齐学Python之再深点,更懂list
2014/09/20 Python
python实现基于两张图片生成圆角图标效果的方法
2015/03/26 Python
Python输出汉字字库及将文字转换为图片的方法
2016/06/04 Python
Python数据分析中Groupby用法之通过字典或Series进行分组的实例
2017/12/08 Python
django 中QuerySet特性功能详解
2019/07/25 Python
Python简易版停车管理系统
2019/08/12 Python
python中如何打包用户自定义模块
2020/09/23 Python
python利用xpath爬取网上数据并存储到django模型中
2021/02/26 Python
联想哥伦比亚网上商城:Lenovo Colombia
2017/01/10 全球购物
Hotels.com香港酒店网:你的自由行酒店订房专家
2018/01/22 全球购物
如何提高JDBC的性能
2013/04/30 面试题
商务日语专业毕业生求职信
2013/10/26 职场文书
动物科学专业毕业生的自我评价
2013/11/29 职场文书
2014年迎新年联欢会活动策划方案
2014/02/26 职场文书
影子教师研修方案
2014/06/14 职场文书
2014公司年终工作总结
2014/12/19 职场文书
见义勇为事迹材料
2014/12/24 职场文书
利用python调用摄像头的实例分析
2021/06/07 Python
分析Python感知线程状态的解决方案之Event与信号量
2021/06/16 Python