基于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的表格排序
Sep 11 Javascript
javascript 事件处理、鼠标拖动效果实现方法详解
May 11 Javascript
Javascript 遮罩层和加载效果代码
Aug 01 Javascript
JS对select控件option选项的增删改查示例代码
Oct 21 Javascript
深入领悟JavaScript中的面向对象
Nov 18 Javascript
AngularJS中的过滤器filter用法完全解析
Apr 22 Javascript
vuex 项目结构目录及一些简单配置介绍
Apr 08 Javascript
Vue实现底部侧边工具栏的实例代码
Sep 03 Javascript
浅析Vue下的components模板使用及应用
Nov 27 Javascript
vue.js实现照片放大功能
Jun 23 Javascript
微信小程序拖拽排序列表的示例代码
Jul 08 Javascript
vue backtop组件的实现完整代码
Apr 07 Vue.js
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文件下载类
2006/12/06 PHP
第三章 php操作符与控制结构代码
2011/12/30 PHP
php中让上传的文件大小在上传前就受限制的两种解决方法
2013/06/24 PHP
php实现图片转换成ASCII码的方法
2015/04/03 PHP
php中header跳转使用include包含解决参数丢失问题
2015/05/08 PHP
详解PHP中的状态模式编程
2015/08/11 PHP
PHP7+Nginx的配置与安装教程详解
2016/05/10 PHP
Yii2.0实现生成二维码功能实例
2017/10/24 PHP
jquery简单体验
2007/01/10 Javascript
javascript firefox兼容ie的dom方法脚本
2008/05/18 Javascript
js的闭包的一个示例说明
2008/11/18 Javascript
Chrome中JSON.parse的特殊实现
2011/01/12 Javascript
javascript开发技术大全-第1章javascript概述
2011/07/03 Javascript
一些实用的jQuery代码片段收集
2011/07/12 Javascript
瀑布流布局并自动加载实现代码
2013/03/12 Javascript
JavaScript动态修改网页元素内容的方法
2015/03/21 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
2015/11/09 Javascript
详解JavaScript表单验证(E-mail 验证)
2016/03/31 Javascript
node文字生成图片的示例代码
2017/10/26 Javascript
AngularJS上传文件的示例代码
2018/11/10 Javascript
layer.open组件获取弹出层页面变量、函数的实例
2019/09/25 Javascript
Jquery滑动门/tab切换实现方法完整示例
2020/06/05 jQuery
[02:44]DOTA2英雄基础教程 钢背兽
2013/12/19 DOTA
简单介绍Python中的decode()方法的使用
2015/05/18 Python
python获取一组数据里最大值max函数用法实例
2015/05/26 Python
python opencv读mp4视频的实例
2018/12/07 Python
python安装pil库方法及代码
2019/06/25 Python
Django基于客户端下载文件实现方法
2020/04/21 Python
King Apparel官网:英国街头服饰品牌
2019/09/05 全球购物
英国在线药房和在线药剂师:Chemist 4 U
2020/01/05 全球购物
资产评估专业大学生求职信
2013/09/29 职场文书
医学生就业推荐表自我鉴定
2014/03/26 职场文书
庆元旦演讲稿
2014/09/15 职场文书
英语感谢信范文
2015/01/20 职场文书
2015教师节通讯稿
2015/07/20 职场文书
Python读取文件夹下的所有文件实例代码
2021/04/02 Python