导航菜单显示隐藏案例

<!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="jquery.js"></script>
<title>制作树形菜单</title>
<style type="text/css">
body{margin:0px; font-family:Arial, Sans-Serif; font-size:13px;}
a{color:blue;text-decoration:none}
img{border:0px;}
/* panels 设定左侧导航中内容的行样式没关*/
#dock ul li {padding:5px; border: solid 1px #F1F1F1;}
#dock ul li:hover {background:#D3DAED url(item_bkg.png) repeat-x; border: solid 1px #A8D8EB;}
#dock ul li.header, #dock ul li .header:hover {background:#D3DAED url(header_bkg.png) repeat-x;border: solid 1px #F1F1F1;}

/*有用*/
#dock > li:hover ul {display:block;}
#dock > li ul {position:absolute; top:0px; left:-180px; z-index:-1;180px; display:none;
background-color:#F1F1F1; border:solid 1px #969696; padding:0px; margin:0px; list-style:none;}
#dock > li ul.docked { display:block;z-index:-2;}
/* dock 左侧与右侧内容样式 */
#dock{margin:0px; padding:0px; list-style:none; position:fixed; top:0px; height:100%;
z-index:100; background-color:#f0f0f0; left:0px;}
/* 左侧预留框 */
#dock > li {40px; height:120px; margin: 0 0 1px 0; background-color:#dcdcdc;
background-repeat:no-repeat; background-position:left center;}

/*指定固定按钮隐藏的位置*/
.dock-keleyi-com,.undock{float:right;}
/*初始隐藏按钮为隐藏*/
.undock {display:none;}
/*右侧内容初始位置*/
#content {margin: 10px 0 0 60px;}
</style>

$("#dock li ul").height($(window).height());

$("#dock .dock-keleyi-com").click(function () {
$(this).parent().parent().addClass("docked").removeClass("free");

docked += 1;
var dockH = ($(window).height()) / docked
var dockT = 0;

$("#dock li ul.docked").each(function () {
$(this).height(dockH).css("top", dockT + "px");
dockT += dockH;
});
$(this).parent().find(".undock").show();
$(this).hide();

if (docked > 0)
$("#content").css("margin-left", "250px");
else
$("#content").css("margin-left", "60px");
});

$("#dock .undock").click(function () {
$(this).parent().parent().addClass("free").removeClass("docked")
.animate({ left: "-180px" }, 200).height($(window).height()).css("top", "0px");

docked = docked - 1;
var dockH = ($(window).height()) / docked
var dockT = 0;

$("#dock li ul.docked").each(function () {
$(this).height(dockH).css("top", dockT + "px");
dockT += dockH;
});
$(this).parent().find(".dock-keleyi-com").show();
$(this).hide();

if (docked > 0)
$("#content").css("margin-left", "250px");
else
$("#content").css("margin-left", "60px");
});

$("#dock li").hover(function () {
$(this).find("ul").animate({ left: "40px" }, 200);
}, function () {
$(this).find("ul.free").animate({ left: "-180px" }, 200);
});
});
</script>
</head>

<ul class="free">
<li class="header"><a href="javascript:;" class="dock-keleyi-com" target="_self">固定</a><a href="javascript:;" class="undock">隐藏</a>链接</li>
<li><a href="http://keleyi.com/menu/cms/" >CMS</a></li><li><a href="http://keleyi.com/menu/net/" >.NET</a></li><li><a href="http://keleyi.com/menu/javascript/" >Javascript</a></li><li><a href="http://keleyi.com/menu/jquery/" >jQuery</a></li><li><a href="http://keleyi.com/menu/csharp/" >C#</a></li><li><a href="http://keleyi.com/menu/aspnet/" >ASP.NET</a></li><li><a href="http://keleyi.com/menu/mvc/" >MVC</a></li><li><a href="http://keleyi.com/menu/html5/" >HTML5</a></li>
<li><a href="http://keleyi.com/menu/webqd/" >web前端</a></li><li><a href="http://keleyi.com/menu/sqlserver/" >SQL Server</a></li><li><a href="http://keleyi.com/menu/cpp/" >C++</a></li><li><a href="http://keleyi.com/menu/hbyy/" >汇编语言</a></li><li><a href="http://keleyi.com/menu/flhz/" >分类汇总</a></li><li><a href="http://keleyi.com/menu/other/" >其他</a></li><li><a href="http://keleyi.com/list/">最新文章</a></li><li><a href="http://keleyi.com/ziliao/js/zzbds.htm">JS正则表达式</a></li>
</ul>

</li>

<li id="tools">
<ul class="free">
<li class="header"><a href="javascript:;" class="dock-keleyi-com" target="_self">固定</a><a href="javascript:;" class="undock">隐藏</a>工具</li>
<li><a href="http://keleyi.com/tool/md5.htm">MD5加密</a></li>
<li><a href="http://keleyi.com/tool/htmlencode.htm" target="_blank">HTML编码与解码</a></li>
<li><a href="http://keleyi.com/tool/urldecode.htm" target="_blank">URL编码与解码</a></li>
<li><a href="http://keleyi.com/tool/regex.htm" target="_blank">.NET正则表达式匹配工具</a></li>
<li><a href="http://keleyi.com/ziliao/googlejavascriptstyle.htm">JavaScript代码风格指南</a></li>
<li><a href="http://keleyi.com/ziliao/unicode/">Unicode字符列表</a></li>
<li><a href="http://keleyi.com/tool/color.htm" target="_blank" title="颜色选择器"><img src="http://keleyi.com/tool/color/colormap_80.gif" alt="颜色选择器" /></a></li>
</ul>
</li>
</ul>

<div id="content">
<h1>keleyi.com</h1>
<h2>jQuery高级可停靠侧边栏</h2>
<script type="text/javascript" src="/kineryi/js/gggg728x90a.js"></script>
<p>
把光标移动到左侧按钮上，相应的侧边栏会自动弹出。
</p>
<p>
当光标离开栏目区域时，侧边栏自动隐藏。
</p>
<p>
侧边栏弹出时，点击"固定"链接可以使相应的栏目固定，不自动隐藏。
</p>
<p>
点击"隐藏"链接可以是相应栏目隐藏。
</p>
<p>
原文：<a href="http://keleyi.com/a/bjac/mt97p5y9.htm" target="_blank">http://keleyi.com/a/bjac/mt97p5y9.htm</a> <a href="http://keleyi.com/a/bjac/lt4rmbjl.htm" target="_blank">更多侧边栏效果</a>
</p>
<p>增加菜单淡入效果:<a href="http://keleyi.com/keleyi/phtml/jqmenu/2a.htm">http://keleyi.com/keleyi/phtml/jqmenu/2a.htm</a></p>
<p>在淡入效果基础上，增加滚动条，当菜单较多时可滚动查看。<a href="http://keleyi.com/keleyi/phtml/jqmenu/2b.htm">http://keleyi.com/keleyi/phtml/jqmenu/2b.htm</a></p>
</div>
</body>
</html>

导航菜单 显示隐藏 案例

导航菜单显示隐藏案例