基于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 相关文章推荐
onbeforeunload与onunload事件异同点总结
Jun 24 Javascript
浅析JavaScript中的CSS属性及命名规范
Nov 28 Javascript
JS跨域问题详解
Nov 25 Javascript
jQuery中has()方法用法实例
Jan 06 Javascript
基于javascript实现窗口抖动效果
Jan 03 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
Sep 06 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
Jan 16 Javascript
简述JS浏览器的三种弹窗
Jul 15 Javascript
浅谈Angular单元测试总结
Mar 22 Javascript
详解小程序如何动态绑定点击的执行方法
Nov 26 Javascript
js判断一个对象是数组(函数)的方法实例
Dec 19 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
Feb 06 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
在Windows下编译适用于PHP 5.2.12及5.2.13的eAccelerator.dll(附下载)
2010/05/04 PHP
PHP页面间传递值和保持值的方法
2016/08/24 PHP
php结合redis高并发下发帖、发微博的实现方法
2016/12/15 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
优秀js开源框架-jQuery使用手册(1)
2007/03/10 Javascript
msn上的tab功能Firefox对childNodes处理的一个BUG
2008/01/21 Javascript
JavaScript 的方法重载效果
2009/08/07 Javascript
JavaScript 组件之旅(二)编码实现和算法
2009/10/28 Javascript
数组Array进行原型prototype扩展后带来的for in遍历问题
2010/02/07 Javascript
使用jquery插件实现图片延迟加载技术详细说明
2011/03/12 Javascript
jquery实现盒子下拉效果示例代码
2013/09/12 Javascript
javascript实现网页背景烟花效果的方法
2015/08/06 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
2016/02/06 Javascript
不使用script导入js文件的几种方法
2016/10/27 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
Angular2使用Augury来调试Angular2程序
2017/05/21 Javascript
Angular利用trackBy提升性能的方法
2018/01/26 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
vue计算属性无法监听到数组内部变化的解决方案
2019/11/06 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
2020/05/13 Javascript
python读取Android permission文件
2013/11/01 Python
Python实现的手机号归属地相关信息查询功能示例
2017/06/08 Python
Python下使用Scrapy爬取网页内容的实例
2018/05/21 Python
python实现雨滴下落到地面效果
2018/06/21 Python
Python/Django后端使用PIL Image生成头像缩略图
2019/04/30 Python
python从ftp获取文件并下载到本地
2020/12/05 Python
python中用ggplot绘制画图实例讲解
2021/01/26 Python
H5页面适配iPhoneX(就是那么简单)
2019/12/02 HTML / CSS
英国办公用品商店:Office Outlet
2018/04/04 全球购物
Linux文件操作命令都有哪些
2016/07/23 面试题
农场厂长岗位职责
2013/12/28 职场文书
员工评语大全
2014/01/19 职场文书
我的长生果教学反思
2014/04/28 职场文书
学习雷锋精神倡议书
2015/04/27 职场文书
刑事上诉状(无罪)
2015/05/23 职场文书
使用Redis实现实时排行榜功能
2021/07/02 Redis