易做图的jquery动画菜单，下拉菜单
一个纯网页无修饰的易做图jquery动画菜单，下拉菜单形式的导航效果，带淡入淡出的功能，点击主菜单，会折叠、隐藏子菜单，最多可以支持易做图的jQuery动画菜单。
当前位置：编程学习 > JS >>
答案：<!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" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<title>jquery菜单</title>
</head>
<body>
<div class="submenu">
<dl>
<div>
<dt>ASP源码</dt>
<dd class="has"><a href="#x">论坛社区</a>
<ul style="display:block">
<li class="this"><a href="#x">轻型论坛</a></li>
<li><a href="#x">大型论坛</a></li>
<li><a href="#x">树形论坛</a></li>
</ul>
</dd>
<dd class="nosub" style="display:block" id="sub1"><a href="#x">常用系统</a>
<ul>
<li><a href="#x">AJAX实例</a></li>
<li><a href="#x">留言聊天</a></li>
<li><a href="#x">新闻文章</a></li>
</ul>
</dd>
<dd class="nosub" style="display:block" id="sub2"><a href="#x">其它源码</a>
<ul>
<li><a href="#x">暂未提供数据</a></li>
</ul>
</dd>
</div>
<div>
<dt>PHP源码</dt>
<dd class="nosub"><a href="#x">论坛社区</a></dd>
<dd class="nosub"><a href="#x">新闻文章</a></dd>
<dd class="nosub"><a href="#x">留言反馈</a></dd>
</div>
<div>
<dt>网页特效</dt>
<dd class="nosub"><a href="#x">菜单导航</a></dd>
<dd class="nosub"><a href="#x">网页综合</a></dd>
<dd class="nosub"><a href="#x">鼠标效果</a></dd>
<dd class="nosub"><a href="#x">计算转换</a></dd>
</div>
<div>
<dt>字体下载</dt>
<dd class="nosub"><a href="#x">中文字体</a></dd>
<dd class="nosub"><a href="#x">英文字体</a></dd>
</div>
<div>
<dt>系统管理</dt>
<dd class="nosub"><a href="#x">部门管理</a></dd>
<dd class="nosub"><a href="#x">用户管理</a></dd>
<dd class="nosub"><a href="#x">角色管理</a></dd>
</div>
</dl>
<script>
$(".nosub").css({display:"none"});
$("#sub1").show();
$("#sub2").show();
$(".submenu > dl > div > dt").bind("click",function(){
$(".submenu > dl > div > dd").hide("fast");
$(this).parent().find("dd").show("slow");
$(".submenu > dl > div > dd").addClass("nosub");
})
$(".submenu > dl > div > dd").bind("click",function(){
$(".submenu > dl > div > dd").addClass("nosub");
$(this).removeClass("nosub");
$(this).addClass("has");
$(this).children().find("ul").show("slow");
})
$(".submenu > dl > div > dd > ul > li").bind("click",function(){
$(".submenu > dl > div > dd > ul > li").removeClass("this");
$(this).addClass("this");
})
//more按钮
$("#btnthis").toggle(
function(){
$(".leftmeun").animate({width: "7px"}, "slow");
$(".submenu").hide("fast");
$("#btnthis > a").removeClass("less");
$("#btnthis > a").addClass("more");
$(".datebox").animate({width:"99%"},"slow");
},
function(){
$(".leftmeun").animate({width: "154px"}, "slow");
$(".submenu").show("fast");
$("#btnthis > a").removeClass("more");
$("#btnthis > a").addClass("less");
$(".datebox").animate({width:"87%"},"slow");
}
)
</script>
</div>
</body>
</html>上一个：CSS3可关闭的下拉手风琴菜单
下一个：一个横向的导航菜单制作实例
- 更多JS疑问解答：
- 几个验证11位手机号码格式的js代码
- js把图片转换成 base64代码
- js把base代码转换成图片
- JS 将 base64编码的图片转化为图片文件
- js中的定时器
- js如何获得FCKeditor控件的值
- 用js限制投票的cookie .目前设置的为：<input type="" class="" onclick="'window.location...
- JS验证，这块“牛皮”反复修改都不能实现
- 在JS中使用DOM模型
- 如何用JS 获取本地文件夹的文件列表
- js中new 了两个Object数组。怎么样将数组内容合并，重复的内容？
- 求实现自动生成图片缩略图的JS代码
- JS脚本网页问题
- js，代码中"object"和"Object"区别？
- js+flash实现网页图片切换效果，出现边框，单击激活此控件。