基于jQuery实现的向下滑动二级菜单效果代码


Posted in Javascript onAugust 31, 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>向下滑动的二级菜单</title>
<style type="text/css">
body{ margin:0px; padding:0px; font-family: Arial, Helvetica, sans-serif; background-color:#dedede; color:#333333; position:relative;}
a{ text-decoration:none;}
h1,h2,h3,li,ul,dd,dt,dl,input{ margin:0px; padding:0px; list-style:none;}
.clear{ clear:both; width:0px; height:0px; line-height:0px; overflow:hidden; font-size:0px; display:block;}
img {border: none;}
.top{ width:890px; height:68px; margin:0px auto; padding:10px 0px 2px 0px; background-color:#FFFFFF;}
.logo{ width:269px; height:68px; padding:0px 8px 0px 3px; float:left;}
.logo h1{ width:269px; height:68px; background-image:url(images/logo.gif); background-repeat:no-repeat;}
.logo h1 a{ display:block; width:269px; height:68px; line-height:68px; font-size:14px; text-indent:-999px;}
.topad{ width:610px; height:68px; float:left;}
.dh{ width:890px; height:39px;margin:0px auto; background-image:url(images/nvabg.gif); background-repeat:repeat-x;}
.nav{ width:785px; height:38px; padding:1px 0px 0px 15px; float:left;}
.nav li{ height:38px; line-height:38px; float:left; font-size:14px; padding:0px 20px; color:#FFFFFF; position:relative;}
.nav li a{ color:#FFFFFF;}
.nav li a:hover{ text-decoration:underline; font-size:16px;}
.nav li .ttg{ height:auto; background-color:#FFFFFF; FILTER: alpha(opacity=80); opacity: 0.8; -moz-opacity: 0.8; position:absolute; left:0px; top:37px; z-index:1; width:150px; padding:10px 0px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; box-shadow:2px 2px 3px #666666; display:none;}
.nav li .ttg li{ width:120px; line-height:30px; font-size:16px; padding:0px 10px; font-family:"微软雅黑";}
.nav li .ttg li a{ color:#000;}
.sc{ width:90px; height:38px; line-height:38px; float:left; font-size:14px; color:#FFFFFF; text-align:center;}
.sc a{ color:#FFFFFF;}
.sc a:hover{ text-decoration:underline;}
.ad{ width:890px; height:auto; margin:10px auto;}
.ad img{ float: left; width:445px; overflow:hidden;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".nav li").hover(function(){
    $(this).find(".ttg").slideToggle(500);
  });
});
</script>
</head>
<body>
<div class="top">
<div class="logo"><h1><a href="#" title="">网站标题文字</a></h1></div>
<div class="topad"></div>
<div class="clear"></div>
</div>
<div class="dh">
<div class="nav">
<ul>
<li><a href="#" title="首页">首页</a>
<div class="ttg">
<ul>
<li><a href="#" title="蛋白粉">蛋白粉</a></li>
<li><a href="#" title="健身计划">健身计划</a></li>
<li><a href="#" title="热门标签">热门标签</a></li>
</ul>
</div>
</li>
<li><a href="#" title="蛋白粉">蛋白粉</a>
<div class="ttg">
<ul>
<li><a href="#" title="蛋白粉">乳清蛋白粉</a></li>
<li><a href="#" title="热门标签">增肌粉</a></li>
</ul>
</div>
</li>
<li><a href="#" title="健身计划">健身计划</a>
<div class="ttg">
<ul>
<li><a href="#" title="蛋白粉">胸肌锻炼</a></li>
<li><a href="#" title="热门标签">小腿锻炼</a></li>
<li><a href="#" title="热门标签">腹肌锻炼</a></li>
</ul>
</div>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
</body>
</html>

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

Javascript 相关文章推荐
window.parent调用父框架时 ie跟火狐不兼容问题
Jul 30 Javascript
jQuery选择没有colspan属性的td的代码
Jul 06 Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
Jan 13 Javascript
JQuery中$.ajax()方法参数详解及应用
Dec 12 Javascript
包含中国城市的javascript对象实例
Aug 03 Javascript
jQuery表单对象属性过滤选择器实例详解
Sep 13 Javascript
用react-redux实现react组件之间数据共享的方法
Jun 08 Javascript
JavaScript实现图片懒加载的方法分析
Jul 05 Javascript
Vue项目引进ElementUI组件的方法
Nov 11 Javascript
微信小程序module.exports模块化操作实例浅析
Dec 20 Javascript
vue基本使用--refs获取组件或元素的实例
Nov 07 Javascript
JavaScript实现多个物体同时运动
Mar 12 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
Aug 31 #Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
Aug 31 #Javascript
js实现黑色简易的滑动门网页tab选项卡效果
Aug 31 #Javascript
jquery实现点击变换导航样式的方法
Aug 31 #Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
Aug 31 #Javascript
js实现TAB切换对应不同颜色的代码
Aug 31 #Javascript
Bootstrap的图片轮播示例代码
Aug 31 #Javascript
You might like
PHP调用Twitter的RSS的实现代码
2010/03/10 PHP
php下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
关于js与php互相传值的介绍
2013/06/25 PHP
PHP根据IP判断地区名信息的示例代码
2014/03/03 PHP
10个php函数实用却不常见
2015/10/13 PHP
隐藏Nginx或Apache以及PHP的版本号的方法
2016/01/03 PHP
php使用pdo连接sqlite3的配置示例
2016/05/27 PHP
javascript中parseInt()函数的定义和用法分析
2014/12/20 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
2016/01/07 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
2016/02/28 Javascript
js判断是否为空和typeof的用法(详解)
2016/10/07 Javascript
JavaScript实现经典排序算法之插入排序
2016/12/28 Javascript
Angular4表单验证代码详解
2017/09/03 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
2017/11/07 Javascript
javascript实现弹幕墙效果
2019/11/28 Javascript
[02:40]DOTA2英雄基础教程 巨牙海民
2013/12/23 DOTA
用Python程序抓取网页的HTML信息的一个小实例
2015/05/02 Python
cmd运行python文件时对结果进行保存的方法
2018/05/16 Python
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
解决pyinstaller打包exe文件出现命令窗口一闪而过的问题
2018/10/31 Python
浅谈pandas用groupby后对层级索引levels的处理方法
2018/11/06 Python
python读取几个G的csv文件方法
2019/01/07 Python
python调用外部程序的实操步骤
2019/03/04 Python
Python如何计算语句执行时间
2019/11/22 Python
python 读取数据库并绘图的实例
2019/12/03 Python
python+requests接口压力测试500次,查看响应时间的实例
2020/04/30 Python
浅析Python requests 模块
2020/10/09 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
Django视图类型总结
2021/02/17 Python
印度和世界各地的精美产品:Ikka Dukka
2018/02/12 全球购物
C#笔试题集合
2013/06/21 面试题
企业员工爱岗敬业演讲稿
2014/08/26 职场文书
文体活动总结
2015/02/04 职场文书
人事聘任通知
2015/04/21 职场文书
工作时间调整通知
2015/04/24 职场文书
2016教师国培研修感言
2015/12/08 职场文书