使用jQuery制作向下滑动的二级菜单_菜单导航

使用jQuery制作向下滑动的二级菜单: 发布时间：2020-08-24编辑：脚本学堂

使用jQuery制作向下滑动的二级菜单，使用了Google托管的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>
    <FCK: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; <a href=http://www.jb200.com/article/15092.html target=_blank class=infotextkey>line-height</a>: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(/source/images/201207/tp71302_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(/source/images/201207/tp71301_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/<a href=http://www.jb200.com/js/ target=_blank class=infotextkey>javascript</a>" src="http://ajax.googleapis.com/ajax/libs/<a href=http://www.jb200.com/jb/jquery/ target=_blank class=infotextkey>jquery</a>/1.4/jquery.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="/" _fcksavedurl="/" title="">网站标题文字</a></h1></div>
    <div class="topad"></div>
    <div class="clear"></div>
    </div>
    <div class="dh">
    <div class="nav">
    <ul>
    <li><a href="/" _fcksavedurl="/" title="首页">首页</a>
    <div class="ttg">
    <ul>
    <li><a href="#" _fcksavedurl="#" title="蛋白粉">蛋白粉</a></li>
    <li><a href="#" _fcksavedurl="#" title="健身计划">健身计划</a></li>
    <li><a href="#" _fcksavedurl="#" title="热门标签">热门标签</a></li>
    </ul>
    </div>
    </li>
    <li><a href="#" _fcksavedurl="#" title="蛋白粉">蛋白粉</a>
    <div class="ttg">
    <ul>
    <li><a href="#" _fcksavedurl="#" title="蛋白粉">乳清蛋白粉</a></li>
    <li><a href="#" _fcksavedurl="#" title="热门标签">增肌粉</a></li>
    </ul>
    </div>
    </li>
    <li><a href="/" _fcksavedurl="/" title="健身计划">健身计划</a>
    <div class="ttg">
    <ul>
    <li><a href="#" _fcksavedurl="#" title="蛋白粉">胸肌锻炼</a></li>
    <li><a href="#" _fcksavedurl="#" title="热门标签">小腿锻炼</a></li>
    <li><a href="#" _fcksavedurl="#" title="热门标签">腹肌锻炼</a></li>
    </ul>
    </div>
    </li>
    </ul>
    </div>
    <div class="clear"></div>
    </div>
    </body>
    </html>

提示：可修改代码后再运行!

上一篇：带渐显效果的选项卡菜单
下一篇：纯CSS3制作的Windows 7开始菜单

与使用jQuery制作向下滑动的二级菜单有关的文章

本文标题：使用jQuery制作向下滑动的二级菜单
本页链接：http://www.jb200.com/tx/8.html

浏览排行

栏目分类

热点文章

使用jQuery制作向下滑动的二级菜单