您的位置：首页 > 运维架构 > 网站架构

网站内页导航菜单

2013-10-24 10:31 323 查看


<!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="PNG'<http://www.zdbase.com/content/png.aspx?sClass=1">PNG图标</a></p><p><a href="GIF'<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="JS'<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> </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="PNG'<http://www.zdbase.com/content/png.aspx?sClass=1">PNG图标</a></p><p><a href="GIF'<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="JS'<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> </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="PNG'<http://www.zdbase.com/content/png.aspx?sClass=1">PNG图标</a></p><p><a href="GIF'<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="JS'<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> </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="PNG'<http://www.zdbase.com/content/png.aspx?sClass=1">PNG图标</a></p><p><a href="GIF'<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="JS'<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> </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="PNG'<http://www.zdbase.com/content/png.aspx?sClass=1">PNG图标</a></p><p><a href="GIF'<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="JS'<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> </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="PNG'<http://www.zdbase.com/content/png.aspx?sClass=1">PNG图标</a></p><p><a href="GIF'<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="JS'<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> </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="PNG'<http://www.zdbase.com/content/png.aspx?sClass=1">PNG图标</a></p><p><a href="GIF'<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="JS'<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> </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="PNG'<http://www.zdbase.com/content/png.aspx?sClass=1">PNG图标</a></p><p><a href="GIF'<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="JS'<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> </small></dl></ol>

</li>

<div class="clear"></div>

</ul>

</div>

<br /><br />

<p>站点基地 - 网站素材，PNG图标，网页广告特效代码。网址：<a href="http://www.zdbase.comhttp://www.zdbase.com">http://www.zdbase.com</a></p>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航