基于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 相关文章推荐
jQuery 幻灯片插件(带缩略图功能)
Jan 24 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
May 10 Javascript
A标签中通过href和onclick传递的this对象实现思路
Apr 19 Javascript
AngularJS 使用$sce控制代码安全检查
Jan 05 Javascript
JS HTML5实现拖拽移动列表效果
Aug 27 Javascript
Bootstrap基本样式学习笔记之图片(6)
Dec 07 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
Dec 08 Javascript
AngularJs每天学习之总体介绍
Aug 07 Javascript
JS简单实现滑动加载数据的方法示例
Oct 18 Javascript
vue router 传参获取不到的解决方式
Nov 13 Javascript
微信小程序实现多行文字滚动
Nov 18 Javascript
node中使用shell脚本的方法步骤
Mar 23 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
延长phpmyadmin登录时间的方法
2011/02/06 PHP
使用ThinkPHP自带的Http类下载远程图片到本地的实现代码
2011/08/02 PHP
PHP处理大量表单字段的便捷方法
2015/02/07 PHP
Laravel使用Caching缓存数据减轻数据库查询压力的方法
2016/03/15 PHP
PHPExcel实现的读取多工作表操作示例
2020/04/14 PHP
索趣科技的答案
2007/02/07 Javascript
jQuery 打造动态渐变按钮 详细图文教程
2010/04/25 Javascript
jquery插件如何使用 jQuery操作Cookie插件使用介绍
2012/12/15 Javascript
纯JS实现本地图片预览的方法
2015/07/31 Javascript
Position属性之relative用法
2015/12/14 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
2016/05/10 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
2016/11/09 Javascript
Bootstrap table右键功能实现方法
2017/02/20 Javascript
JavaScript之面向对象_动力节点Java学院整理
2017/06/29 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
2017/09/13 Javascript
express默认日志组件morgan的方法
2018/04/05 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
2018/07/09 Javascript
快速解决处理后台返回json数据格式的问题
2018/08/07 Javascript
layui中使用jquery控制radio选中事件的示例代码
2018/08/15 jQuery
详解vuex之store拆分即多模块状态管理(modules)篇
2018/11/13 Javascript
详解如何运行vue项目
2019/04/15 Javascript
微信小程序吸底区域适配iPhoneX的实现
2020/04/09 Javascript
python3访问sina首页中文的处理方法
2014/02/24 Python
用Python展示动态规则法用以解决重叠子问题的示例
2015/04/02 Python
详细解读Python的web.py框架下的application.py模块
2015/05/02 Python
在centos7中分布式部署pyspider
2017/05/03 Python
详解Django中CBV(Class Base Views)模型源码分析
2019/02/25 Python
Python pip 安装与使用(安装、更新、删除)
2019/10/06 Python
python时间序列数据转为timestamp格式的方法
2020/08/03 Python
python里glob模块知识点总结
2021/01/05 Python
基于HTML5的WebSocket的实例代码
2018/08/15 HTML / CSS
Sneaker Studio匈牙利:购买运动鞋
2018/03/26 全球购物
婚礼主持词开场白
2014/03/13 职场文书
县委常委班子专题民主生活会查摆问题及整改措施
2014/09/27 职场文书
领导干部学习三严三实心得体会
2016/01/05 职场文书
Python可视化学习之seaborn调色盘
2022/02/24 Python