基于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 相关文章推荐
广告代码静态化js通用函数
May 09 Javascript
JS是否可以跨文件同时控制多个iframe页面的应用技巧
Dec 16 Javascript
extjs 学习笔记(三) 最基本的grid
Oct 15 Javascript
javascript实现微信分享
Dec 23 Javascript
AngularJS单选框及多选框实现双向动态绑定
Jan 13 Javascript
深入浅出讲解ES6的解构
Aug 03 Javascript
js设置随机切换背景图片的简单实例
Nov 12 Javascript
angularjs select 赋值 ng-options配置方法
Feb 28 Javascript
微信小程序实现文字从右向左无限滚动
Nov 18 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
Apr 28 Javascript
JS中==、===你分清楚了吗
Mar 04 Javascript
vue实现的多页面项目如何优化打包的步骤详解
Jul 19 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 XML操作的各种方法解析(比较详细)
2010/06/17 PHP
Laravel如何使用数据库事务及捕获事务失败后的异常详解
2017/10/23 PHP
用JS写的一个TableView控件代码
2010/01/23 Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
2013/04/27 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
2013/08/06 Javascript
jQuery scroll事件实现监控滚动条分页示例
2014/04/04 Javascript
jQuery实现简单的图片查看器
2020/09/11 Javascript
jQuery下拉框的简单应用
2016/06/24 Javascript
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
2018/11/28 Javascript
如何用RxJS实现Redux Form
2018/12/29 Javascript
基于vue实现web端超大数据量表格的卡顿解决
2019/04/02 Javascript
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
2019/05/13 Javascript
js实现移动端轮播图滑动切换
2020/12/21 Javascript
[48:23]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第一局
2016/03/05 DOTA
Python算法应用实战之栈详解
2017/02/04 Python
Python使用filetype精确判断文件类型
2017/07/02 Python
使用Python的package机制如何简化utils包设计详解
2017/12/11 Python
详解Django的CSRF认证实现
2018/10/09 Python
解决Python运行文件出现out of memory框的问题
2018/12/03 Python
Django model select的多种用法详解
2019/07/16 Python
python线程定时器Timer实现原理解析
2019/11/30 Python
python实现简单日志记录库glog的使用
2019/12/13 Python
Python实现bilibili时间长度查询的示例代码
2020/01/14 Python
pycharm导入源码的具体步骤
2020/08/04 Python
期末复习计划
2015/01/19 职场文书
工会工作个人总结
2015/03/03 职场文书
开除通知书范本
2015/04/25 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书
老舍《猫》教学反思
2016/02/17 职场文书
学生会2016感恩节活动小结
2016/04/01 职场文书
2016年暑期社会实践活动总结报告
2016/04/06 职场文书
教你如何让spark sql写mysql的时候支持update操作
2022/02/15 MySQL
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js
斗罗大陆八大特殊魂兽,龙族始祖排榜首,第五最残忍(翠魔鸟)
2022/03/18 国漫
Redis如何实现验证码发送 以及限制每日发送次数
2022/04/18 Redis