分类分类
更新时间:2026-03-29 02:43:43作者:yezheng
本文实例讲述了jquery实现向下滑出的二级导航下滑菜单效果。分享给大家供大家参考。具体如下:
这是一款由jQuery配合JavaScript来共同实现的网页上的下滑菜单特效,带颜色的是一级主菜单,点击后会展开向上滑出二级的子菜单,再次点击主菜单,会合拢子菜单,就菜单所能展现的功能来说,适用于企业网站产品分类、新闻类文章栏目导航等,目前本款菜单支持两级,有兴趣的可自己扩展更多级的菜单。
运行效果截图如下:

具体代码如下:
<!DOCTYPE html>
<html>
<head>
<title>向下滑动展开的JS下滑菜单</title>
<style type="text/css">
ul#sidemenu, ul#sidemenu ul{list-style-type: none;margin: 0;padding: 0;width: 185px;}
ul#sidemenu a{display: block;text-decoration: none;}
ul#sidemenu li{margin: 5px auto;}
ul#sidemenu li a{background: #333;font-size: 12px;color: #fff;height: 28px;line-height: 28px;padding-left: 5px;}
ul#sidemenu li a: hover{background: #000;}
ul#sidemenu li ul li a{background: #ccc;color: #000;padding-left: 20px;}
ul#sidemenu li ul li a: hover{background: #aaa;border-left: 5px #000 solid;padding-left: 15px;}
</style>
</head>
<body>
<div class="leftbar">
<ul id="sidemenu">
<li><a href="#" >+ 网页菜单类素材一</a>
<ul>
<li><a href="#">下滑菜单</a></li>
<li><a href="#">折叠菜单</a></li>
<li><a href="#">垂直菜单</a></li>
</ul>
</li>
<li><a href="#" >+ 编程源码类资源</a>
<ul>
<li><a href="#">ASP源码</a></li>
<li><a href="#">Delphi源码</a></li>
<li><a href="#">vc++源码</a></li>
<li><a href="#">VB源码</a></li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
function initMenu() {
$('#sidemenu ul').hide();
$('#sidemenu ul:first').hide();
$('#sidemenu li a').click(
function() {
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#sidemenu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
}
);
}
$(document).ready(function() {initMenu();});
</script>
</body>
</html>
希望本文所述对大家的jquery程序设计有所帮助。
相关
王道三国策略游戏380.18 MBv0.0.12026-03-28
下载刮个爽手机版休闲益智186.96 MBv1.0.282026-03-28
下载龙符天祭策略游戏756.03 Mv22026-03-28
下载入魂一番赏app网上购物106.66 Mv4.3.52026-03-28
下载童话师经营养成504.02 Mv1.1.52026-03-28
下载Bebo Cam app图像拍照264.51 Mv2.3.02026-03-28
下载纯三国官方正版策略游戏167.24 Mv0.0.12026-03-28
下载Poka Cam app图像拍照74.7 Mv1.8.02026-03-28
下载COLMO app趣味娱乐199.15 Mv2.3.5.22026-03-28
下载愤怒的小鸟变形金刚苹果版休闲游戏439.4 Mv2.39.02026-03-28
下载这也能切苹果版休闲游戏479.6 Mv21342026-03-28
下载口袋吉伊卡哇苹果手机版模拟游戏920.4 Mv2.0.02026-03-28
下载










