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 拖放效果实现代码
Jan 22 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
Nov 14 Javascript
封装的jquery翻页滚动(示例代码)
Nov 18 Javascript
js 绑定键盘鼠标事件示例代码
Feb 12 Javascript
Javascript实现禁止输入中文或英文的例子
Dec 09 Javascript
javascript下拉框选项单击事件的例子分享
Mar 04 Javascript
jquery让指定的元素闪烁显示的方法
Mar 17 Javascript
实例代码讲解jquery easyui动态tab页
Nov 17 Javascript
基于jQuery实现点击列表加载更多效果
May 31 Javascript
JS与HTML结合实现流程进度展示条思路详解
Sep 03 Javascript
基于layui的table插件进行复选框联动功能的实现方法
Sep 19 Javascript
vue-cli创建的项目中的gitHooks原理解析
Feb 14 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类(查找/修改)xml文档
2013/03/26 PHP
深入php-fpm的两种进程管理模式详解
2013/06/03 PHP
php截取字符串函数分享
2015/02/02 PHP
php自定义时间转换函数示例
2016/12/07 PHP
php遍历目录下文件并按修改时间排序操作示例
2019/07/12 PHP
使用jQuery的ajax功能实现的RSS Reader 代码
2009/09/03 Javascript
javascript Keycode对照表
2009/10/24 Javascript
java和javascript获取word文档的书签位置对比
2014/06/19 Javascript
JS控制网页动态生成任意行列数表格的方法
2015/03/09 Javascript
js实现字符串转日期格式的方法
2015/05/20 Javascript
深入探讨前端框架react
2015/12/09 Javascript
详解AngularJS控制器的使用
2016/03/09 Javascript
JS简单循环遍历json数组的方法
2016/04/22 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
2016/08/26 Javascript
JavaScript实现经典排序算法之选择排序
2016/12/28 Javascript
React根据宽度自适应高度的示例代码
2017/10/11 Javascript
Angular2整合其他插件的方法
2018/01/20 Javascript
Vue.set() this.$set()引发的视图更新思考及注意事项
2018/08/30 Javascript
150行Node.js实现的dns代理工具
2019/08/02 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
2019/09/06 Javascript
JavaScript前端开发时数值运算的小技巧
2020/07/28 Javascript
JS实现斐波那契数列的五种方式(小结)
2020/09/09 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
2020/11/12 Javascript
python中lambda函数 list comprehension 和 zip函数使用指南
2014/09/28 Python
Python中使用ElementTree解析XML示例
2015/06/02 Python
Python内建数据结构详解
2016/02/03 Python
Python生成器generator用法示例
2018/08/10 Python
利用jupyter网页版本进行python函数查询方式
2020/04/14 Python
俄罗斯最大的灯具网站:Fandeco
2020/03/14 全球购物
Structs界面控制层技术
2013/10/11 面试题
大专计算机个人求职的自我评价
2013/10/21 职场文书
五一家具促销方案
2014/01/10 职场文书
初中音乐教学反思
2014/01/12 职场文书
学生旷课检讨书500字
2014/10/28 职场文书
有关信念的名言语录集锦
2019/12/06 职场文书
基于Python实现对比Exce的工具
2022/04/07 Python