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

网站常用管理导航效果

2010-06-01 10:46 302 查看
网站常用管理导航代码

<!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>
<title> 管理导航</title>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
body {padding: 0;margin: 5px;background-color: #f9f9f9;background-color: #fff;font-family: Verdana, Arial,Vrinda,Tahoma;line-height: 175%;font-size: 12px;color: #666;}
a {color: #09c;text-decoration: none;}
a:hover {color: #09c;text-decoration: underline;}
#left_content {clear: both;width: 200px;padding: 0 5px 0;border: #b4c9c6 1px solid;}
#left_content h2 {cursor: pointer;font-size: 14px;font-weight: bold;margin: 5px 0;padding-left: 2px;}
#left_content h2.c1 {color: #09c;border-bottom: #b4c9c6 1px solid;}
#left_content h2.c2 {color: #fff;background-color: #09c;}
#left_content ul {list-style-type: none;margin: 0 5px;padding: 0;}
#left_content li {margin: 0;padding: 0;list-style-type: none;}
#left_content li a {color: #555;}
#left_content li a:hover {color: #09c;}
.triangle-r_1, .triangle-r_2, .triangle-b_1, .triangle-b_2 {float: left;border-style: solid;overflow: hidden;height: 0px;}
.triangle-r_1, .triangle-r_2 {/*height: 8px;*/margin: 5px 3px 0 2px;border-width: 4px 0px 4px 6px;}
.triangle-r_1 {border-color: #fff #fff #fff #09c;}
.triangle-r_2 {border-color: #09c #09c #09c #fff;}
.triangle-b_1, .triangle-b_2 {height: 7px;margin: 7px 3px 0 0;border-width: 6px 4px 0px 4px;}
.triangle-b_1 {border-color: #09c #fff #fff #fff;}
.triangle-b_2 {border-color: #fff #09c #09c #09c;}
#left_content li.c {font-weight: bold;background-color: #f3f8f7;}
-->
</style>
<script type="text/javascript">
//<![data[
//获取对象属性兼容方法
function $(objectId) {
if(document.getElementById && document.getElementById(objectId)) {
// W3C DOM
return document.getElementById(objectId);
} else if (document.all && document.all(objectId)) {
// MSIE 4 DOM
return document.all(objectId);
} else if (document.layers && document.layers[objectId]) {
// NN 4 DOM.. note: this won't find nested layers
return document.layers[objectId];
} else {
return false;
}
}
function h_click(id, sort) {
var h = $("main_nav").getElementsByTagName("h2");
for (var i=0; i<h.length; i++) {
h[i].className = "c1";
h[i].firstChild.className = i>0?h[i].firstChild.className.replace("_2","_1"):"triangle-r_1";
h[i].onclick = function() {
l_click();
h_click(this.id, 1);
}
}
$(id).className = "c2";
var ulid = $(id.replace("sub_sort_","sub_detail_"));
if (ulid && sort) {
if (ulid.style.display=="none") {
ulid.style.display = "block";
$(id).firstChild.className = "triangle-b_2";
} else {
ulid.style.display = "none";
$(id).firstChild.className = "triangle-r_2";
}
} else {
$(id).firstChild.className = "triangle-" + (ulid?"b":"r") + "_2";
}
}
function l_click() {
var l = $("main_nav").getElementsByTagName("li");
for (var i=0; i<l.length; i++) {
l[i].className = "";
l[i].onclick = function() {
h_click(this.parentNode.id.replace("sub_detail_","sub_sort_"));
l_click();
this.className = "c";
}
}
}
window.onload=function() {
h_click("sub_sort_0", 1);
l_click();
}
//]]-->
</script>
</head>
<body style="background-color: #f9f9f9;">
<div id="left_content">
<div id="main_nav">
<h2 id='sub_sort_0' class='c1'><span class='triangle-r_1'></span>管理首页</h2>
<h2 id='sub_sort_1' class='c1'><span class='triangle-b_1'></span>基本设置</h2>
<ul id='sub_detail_1'>
<li>◇<a href='javascript:void(0)'>基本信息设置</a></li>
<li>◇<a href='javascript:void(0)'>邮件发送设置</a></li>
</ul>
<h2 id='sub_sort_2' class='c1'><span class='triangle-b_1'></span>外观设置</h2>
<ul id='sub_detail_2'>
<li>◇<a href='javascript:void(0)'>添加新的模板</a></li>
<li>◇<a href='javascript:void(0)'>管理现有模板</a></li>
</ul>
<h2 id='sub_sort_3' class='c1'><span class='triangle-b_1'></span>软件下载管理</h2>
<ul id='sub_detail_3'>
<li>◇<a href='javascript:void(0)'>软件分类管理</a></li>
<li>◇<a href='javascript:void(0)'>添加新的软件</a></li>
<li>◇<a href='javascript:void(0)'>采集新的软件</a></li>
<li>◇<a href='javascript:void(0)'>所有待审软件</a></li>
<li>◇<a href='javascript:void(0)'>管理现有软件</a></li>
<li>◇<a href='javascript:void(0)'>所有报错软件</a></li>
<li>◇<a href='javascript:void(0)'>下载服务器地址管理</a></li>
</ul>
<h2 id='sub_sort_4' class='c1'><span class='triangle-b_1'></span>新闻管理</h2>
<ul id='sub_detail_4'>
<li>◇<a href='javascript:void(0)'>文章分类管理</a></li>
<li>◇<a href='javascript:void(0)'>添加新的文章</a></li>
<li>◇<a href='javascript:void(0)'>管理现有文章</a></li>
</ul>
<h2 id='sub_sort_5' class='c1'><span class='triangle-b_1'></span>用户管理</h2>
<ul id='sub_detail_5'>
<li>◇<a href='javascript:void(0)'>管理员管理</a></li>
<li>◇<a href='javascript:void(0)'>注册会员管理</a></li>
<li>◇<a href='javascript:void(0)'>注册会员审核</a></li>
<li>◇<a href='javascript:void(0)'>群发邮件</a></li>
</ul>
<h2 id='sub_sort_6' class='c1'><span class='triangle-b_1'></span>数据处理(Access)</h2>
<ul id='sub_detail_6'>
<li>◇<a href='javascript:void(0)'>压缩数据库</a></li>
<li>◇<a href='javascript:void(0)'>备份数据库</a></li>
<li>◇<a href='javascript:void(0)'>恢复数据库</a></li>
<li>◇<a href='javascript:void(0)'>系统空间占用</a></li>
</ul>
<h2 id='sub_sort_7' class='c1'><span class='triangle-b_1'></span>程序信息</h2>
<ul id='sub_detail_7'>
<li>◇程序版本：<a href="#" target="_blank">SenFe V1.0</a></li>
<li>◇术支持：<a href="#" target="_blank">盛飞(SenFe)</a></li>
</ul>
</div>
</div>
</body>
</html>


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