基于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 相关文章推荐
JavaScript 对象成员的可见性说明
Oct 16 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
Jul 17 Javascript
Javascript操作cookie的函数代码
Oct 03 Javascript
详解AngularJS实现表单验证
Dec 10 Javascript
Node.js 中exports 和 module.exports 的区别
Mar 14 Javascript
Vue2.0 UI框架ElementUI使用方法详解
Apr 14 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
May 04 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
Nov 30 Javascript
layui表格内容溢出的解决方法
Sep 06 Javascript
解决vue+router路由跳转不起作用的一项原因
Jul 19 Javascript
AJAX学习笔记
May 18 Javascript
javascript之Object.assign()的痛点分析
Mar 03 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
一个阿拉伯数字转中文数字的函数
2006/10/09 PHP
二十行语句实现从Excel到mysql的转化
2006/10/09 PHP
第十节--抽象方法和抽象类
2006/11/16 PHP
通过具体程序来理解PHP里面的抽象类
2010/01/28 PHP
PHP 中常量的知识整理
2017/04/14 PHP
PHP7 安装event扩展的实现方法
2019/10/08 PHP
javascript下查找父节点的简单方法
2007/08/13 Javascript
有一段有意思的代码-javascript现实多行信息
2007/08/26 Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
2010/02/06 Javascript
JavaScript格式化数字的函数代码
2010/11/30 Javascript
jQuery 选择器项目实例分析及实现代码
2012/12/28 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
2013/03/18 Javascript
js获取URL的参数的方法(getQueryString)示例
2013/09/29 Javascript
如何防止回车(enter)键提交表单
2014/05/11 Javascript
Js实现网页键盘控制翻页的方法
2014/10/30 Javascript
js实现字符全排列算法的简单方法
2017/05/01 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
2017/12/18 Javascript
微信小程序之多文件下载的简单封装示例
2018/01/29 Javascript
JS实现点击按钮可实现编辑功能
2018/07/03 Javascript
[52:26]完美世界DOTA2联赛决赛 FTD vs Phoenix 第一场 11.08
2020/11/11 DOTA
python中Flask框架简单入门实例
2015/03/21 Python
详解将Django部署到Centos7全攻略
2018/09/26 Python
python-Web-flask-视图内容和模板知识点西宁街
2019/08/23 Python
PYTHON发送邮件YAGMAIL的简单实现解析
2019/10/28 Python
Pycharm 解决自动格式化冲突的设置操作
2021/01/15 Python
HTML5 CSS3打造相册效果附源码下载
2014/06/16 HTML / CSS
购买中国最好的电子产品:Geekbuying
2018/03/13 全球购物
奥斯汀独木舟和皮划艇:Austin Canoe & Kayak
2018/05/22 全球购物
蔻驰英国官网:COACH英国
2020/07/19 全球购物
高中运动会广播稿
2014/01/21 职场文书
感恩母亲节活动方案
2014/03/04 职场文书
热门专业求职信
2014/05/24 职场文书
校园环保标语
2014/06/13 职场文书
2014年基层党支部工作总结
2014/12/04 职场文书
小学生暑假生活总结
2015/07/13 职场文书
公司安全管理制度范本
2015/08/05 职场文书