一个极其常用的网站内页导航菜单

详细内容

[关闭窗口]

一个极其常用的网站内页导航菜单

发布日期：2010-09-04 点击：28404

<!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>JS弹出菜单 - 站点基地 zdbase.com</title>
<style type="text/css">
body {font-family: Arial, Helvetica, sans-serif;line-height: 20px;padding: 50px;background-color: #fcfcfc;font-size: 12px;}
* {	margin: 0px;padding: 0px;}
a {color: #336699;text-decoration: none;}
.clear {font-size: 0px;line-height: 0px;clear: both;}
ul, ol {list-style-type: none;}
.menu {width: 200px;background-color: #fff;}
.menu h1 {border: 1px solid #dbdbdb;font-size: 14px;line-height: 29px;height: 29px;padding-left: 20px;background-color: #f1f1f1;}
.menu ul {}
.menu ul li{border-right-width: 1px;border-bottom-width: 1px;border-left-width: 1px;border-right-style: solid;border-bottom-style: solid;	border-left-style: solid;border-right-color: #dbdbdb;border-bottom-color: #dbdbdb;border-left-color: #dbdbdb;height: 29px;position: relative;color: #336699;float: left;width: 198px;}
.menu ul li span{border-bottom-width: 1px;font-size: 14px;line-height: 29px;height: 29px;cursor: pointer;position: relative;padding-left: 20px;width: 150px;display: block;}
.menu ul li.this {color: #f83100;background-color: #f2f2f2;}
.menu ul li.this a{color: #f83100;background-color: #f2f2f2;}
.menu ul li.this ol {position: absolute;display: block;}
.menu ul li ol {position: absolute;left: 198px;width: 250px;background-color: #f2f2f2;border: 1px solid #ccc;top: -31px;display: none;}
.menu ul li ol dl {position: relative;padding-right: 8px;padding-bottom: 7px;padding-left: 8px;}
.menu ul li ol dd {padding: 10px;border: 1px solid #e1e1e1;background-color: #fff;}
.menu ul li ol h2 {line-height: 30px;font-size: 12px;height: 30px;}
.menu ul li ol h2 em {float: right;font-weight: normal;font-style: normal;color: #777;cursor: pointer;}
.menu ul li ol small  {font-size: 0px;line-height: 0px;background-color: #f2f2f2;display: block;height: 29px;width: 9px;position: absolute;top: 30px;left: -9px;}
</style>
<script type="text/javascript">
function toggle(){
	var arrayli = document.getElementById("allClass").getElementsByTagName("li"); //获取菜单数组
	for(i=0;i<arrayli.length;i++){
		arrayli[i].onmouseover = function(){
			this.className = "this";
		}
		arrayli[i].onmouseout = function(){
			this.className = "";
		}
		arrayli[i].getElementsByTagName("em")[0].onclick=function(){
			this.parentNode.parentNode.parentNode.parentNode.parentNode.className = "";
		}
	}
}
window.onload=function(){
	toggle();
}
</script>
</head>

<body>
<div class="menu">
	<h1>所有分类</h1>
	<ul id="allClass">
		<li><span><a href="http://www.zdbase.com/">站点基地zdbase</a></span>
			<ol><dl><dt><h2><em onclick="closeBox(this)">关闭</em>栏目分类</h2></dt>
			<dd><p><a href="http://www.zdbase.com/content/png.aspx?sClass=1">PNG图标</a></p><p><a href="http://www.zdbase.com/content/pic.aspx?sClass=2">GIF图标</a></p>
			<p><a href="http://www.zdbase.com/content/png.aspx?sClass=7">网站模板</a></p>
			<p><a href="http://www.zdbase.com/content/js.aspx?sClass=4">JS代码</a></p>
			<p><a href="http://www.zdbase.com/content/png.aspx?sClass=9">网页特效</a></p>
			<p><a href="http://www.zdbase.com/content/font.aspx">字体下载</a></p></dd>
			<small>&nbsp;</small></dl></ol>
		</li>
				<li><span><a href="http://www.zdbase.com/">站点基地-网站素材</a></span>
			<ol><dl><dt><h2><em onclick="closeBox(this)">关闭</em>栏目分类</h2></dt>
			<dd><p><a href="http://www.zdbase.com/content/png.aspx?sClass=1">PNG图标</a></p><p><a href="http://www.zdbase.com/content/pic.aspx?sClass=2">GIF图标</a></p>
			<p><a href="http://www.zdbase.com/content/png.aspx?sClass=7">网站模板</a></p>
			<p><a href="http://www.zdbase.com/content/js.aspx?sClass=4">JS代码</a></p>
			<p><a href="http://www.zdbase.com/content/png.aspx?sClass=9">网页特效</a></p>
			<p><a href="http://www.zdbase.com/content/font.aspx">字体下载</a></p></dd>
			<small>&nbsp;</small></dl></ol>
		</li>
		<li><span><a href="http://www.zdbase.com/">站点基地zdbase</a></span>
			<ol><dl><dt><h2><em onclick="closeBox(this)">关闭</em>栏目分类</h2></dt>
			<dd><p><a href="http://www.zdbase.com/content/png.aspx?sClass=1">PNG图标</a></p><p><a href="http://www.zdbase.com/content/pic.aspx?sClass=2">GIF图标</a></p>
			<p><a href="http://www.zdbase.com/content/png.aspx?sClass=7">网站模板</a></p>
			<p><a href="http://www.zdbase.com/content/js.aspx?sClass=4">JS代码</a></p>
			<p><a href="http://www.zdbase.com/content/png.aspx?sClass=9">网页特效</a></p><p><a href="http://www.zdbase.com/content/font.aspx">字体下载</a></p></dd>
			<small>&nbsp;</small></dl></ol>
		</li>
				<li><span><a href="http://www.zdbase.com/">站点基地-网站素材</a></span>
			<ol><dl><dt><h2><em onclick="closeBox(this)">关闭</em>栏目分类</h2></dt>
			<dd><p><a href="http://www.zdbase.com/content/png.aspx?sClass=1">PNG图标</a></p><p><a href="http://www.zdbase.com/content/pic.aspx?sClass=2">GIF图标</a></p>
			<p><a href="http://www.zdbase.com/content/png.aspx?sClass=7">网站模板</a></p>
			<p><a href="http://www.zdbase.com/content/js.aspx?sClass=4">JS代码</a></p>
			<p><a href="http://www.zdbase.com/content/png.aspx?sClass=9">网页特效</a></p>
			<p><a href="http://www.zdbase.com/content/font.aspx">字体下载</a></p></dd>
			<small>&nbsp;</small></dl></ol>
		</li>
		<li><span><a href="http://www.zdbase.com/">站点基地zdbase</a></span>
			<ol><dl><dt><h2><em onclick="closeBox(this)">关闭</em>栏目分类</h2></dt>
			<dd><p><a href="http://www.zdbase.com/content/png.aspx?sClass=1">PNG图标</a></p><p><a href="http://www.zdbase.com/content/pic.aspx?sClass=2">GIF图标</a></p>
			<p><a href="http://www.zdbase.com/content/png.aspx?sClass=7">网站模板</a></p>
			<p><a href="http://www.zdbase.com/content/js.aspx?sClass=4">JS代码</a></p>
			<p><a href="http://www.zdbase.com/content/png.aspx?sClass=9">网页特效</a></p><p><a href="http://www.zdbase.com/content/font.aspx">字体下载</a></p></dd>
			<small>&nbsp;</small></dl></ol>
		</li>
				<li><span><a href="http://www.zdbase.com/">站点基地-网站素材</a></span>
			<ol><dl><dt><h2><em onclick="closeBox(this)">关闭</em>栏目分类</h2></dt>
			<dd><p><a href="http://www.zdbase.com/content/png.aspx?sClass=1">PNG图标</a></p><p><a href="http://www.zdbase.com/content/pic.aspx?sClass=2">GIF图标</a></p>
			<p><a href="http://www.zdbase.com/content/png.aspx?sClass=7">网站模板</a></p>
			<p><a href="http://www.zdbase.com/content/js.aspx?sClass=4">JS代码</a></p>
			<p><a href="http://www.zdbase.com/content/png.aspx?sClass=9">网页特效</a></p>
			<p><a href="http://www.zdbase.com/content/font.aspx">字体下载</a></p></dd>
			<small>&nbsp;</small></dl></ol>
		</li>
		<li><span><a href="http://www.zdbase.com/">站点基地zdbase</a></span>
			<ol><dl><dt><h2><em onclick="closeBox(this)">关闭</em>栏目分类</h2></dt>
			<dd><p><a href="http://www.zdbase.com/content/png.aspx?sClass=1">PNG图标</a></p><p><a href="http://www.zdbase.com/content/pic.aspx?sClass=2">GIF图标</a></p>
			<p><a href="http://www.zdbase.com/content/png.aspx?sClass=7">网站模板</a></p>
			<p><a href="http://www.zdbase.com/content/js.aspx?sClass=4">JS代码</a></p>
			<p><a href="http://www.zdbase.com/content/png.aspx?sClass=9">网页特效</a></p><p><a href="http://www.zdbase.com/content/font.aspx">字体下载</a></p></dd>
			<small>&nbsp;</small></dl></ol>
		</li>
				<li><span><a href="http://www.zdbase.com/">站点基地-网站素材</a></span>
			<ol><dl><dt><h2><em onclick="closeBox(this)">关闭</em>栏目分类</h2></dt>
			<dd><p><a href="http://www.zdbase.com/content/png.aspx?sClass=1">PNG图标</a></p><p><a href="http://www.zdbase.com/content/pic.aspx?sClass=2">GIF图标</a></p>
			<p><a href="http://www.zdbase.com/content/png.aspx?sClass=7">网站模板</a></p>
			<p><a href="http://www.zdbase.com/content/js.aspx?sClass=4">JS代码</a></p>
			<p><a href="http://www.zdbase.com/content/png.aspx?sClass=9">网页特效</a></p>
			<p><a href="http://www.zdbase.com/content/font.aspx">字体下载</a></p></dd>
			<small>&nbsp;</small></dl></ol>
		</li>
		<div class="clear"></div>
	</ul>
</div>
<br /><br />
<p>站点基地 - 网站素材，PNG图标，网页广告特效代码。网址：<a href="http://www.zdbase.com">http://www.zdbase.com</a></p>
</body>
</html>

提示：您可以先修改部分代码再运行，复制代码和保存代码功能在Firefox下无效。

很实用，推荐！