 |
热门文章 |
|
|
|
相关文章 |
|
| 没有相关文章 |
|
|
| 适用于网站后台的竖向二级下拉导航菜单 |
| 来源：中国站长天空 更新时间：2010/4/15 22:28:20 阅读次数： 我要投稿 |
|
<!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-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
/*reset CSS*/
body, div, ul, li, h3 {
margin:0;
padding:0
}
li {
list-style:none;
}
body {
font-size:12px;
line-height:1.25;
font-family:Tahoma, sans-serif
}
#side {
width:198px;
border-right:2px solid #395E9F;
float:left;
margin:20px;
}
#side h3 {
width:194px;
background:#395E9F;
font-size:14px;
line-height:25px;
font-weight:bold;
text-indent:10px;
margin:2px;
}
#side h2 {
background:#395E9F url(http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081114143822.gif) 10px center no-repeat;
font-size:14px;
line-height:25px;
font-weight:bold;
text-indent:25px;
margin:2px;
}
#side h3 a, #side h2 a {
display:block;
width:194px;
height:25px;
_height:21px;
_padding-top:4px;
color:#fff;
text-decoration:none
}
#side li {
text-indent:20px;
line-height:25px;
}
#side li a {
display:block;
width:188px;
height:25px;
line-height:25px;
text-decoration:none
}
#side .menu_cur {
color:#B50394;
border-left:5px solid #ccc;
background:#eee;
margin:0 auto;
}
#side .h3_cur {
background:#000;
color:#fc99cc;
margin:0 auto;
}
#side .h2_click {
color:#fc99cc;
text-indent:25px;
background:#000 url(http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081114143822.gif) 10px center no-repeat;
margin:0 auto;
}
</style>
<script language="javascript">
//@Mr.Think---加载样式---类
function addClass(elem, value) {
if (!elem.className) {
elem.className = value;
} else {
newClass = elem.className;
newClass += " ";
newClass += value;
elem.className = newClass;
}
}
//@Mr.Think---点击实现高亮显示---类
function highOnclick(elemId, tagOff, tagOff2,classCur,add_cur) {
if(!document.getElementsByTagName) return false;
if(!document.getElementById(elemId)) return false;
var elemId = document.getElementById(elemId);
var links = elemId.getElementsByTagName("a");
for (i = 0; i < links.length; i++) {
if (links[i].parentNode.nodeName !== tagOff&&links[i].parentNode.nodeName !== tagOff2) {
links[i].onclick = function() {
for (n = 0; n < links.length; n++) {
links[n].className = "";
}
this.className = classCur;
firsttagoff(elemId, tagOff, this.parentNode.parentNode,add_cur);
this.blur();
}
}
}
}
//@Mr.Think---附属点击实现高亮显示---感谢盛飞---类
function firsttagoff(elemId, tagOff, addtag,add_cur) {
var ulitem = elemId.getElementsByTagName(addtag.nodeName);
var tagoffitem = elemId.getElementsByTagName(tagOff);
for (i = 0; i < tagoffitem.length; i++) {
tagoffitem[i].firstChild.className = "";
tagoffitem[i].firstChild.children[0].src = "http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081114143814.gif"
}
for (j = 0; j < ulitem.length; j++) {
if (ulitem[j].innerHTML == addtag.innerHTML) {
tagoffitem[j].firstChild.className = add_cur;
tagoffitem[j].firstChild.children[0].src = "http://www.cwydesign.cn/effects/UploadFiles_7074/201008/2010081114270711.gif";
break;
}
}
}
//加载高亮显示函数
window.onload=function sidemenu() {
highOnclick("side", "H3","H2", "menu_cur", "h3_cur");
}
//点击管理首页后高亮当前并清除其他链接的样式
function clickindex(){
if(!document.getElementsByTagName) return false;
if(!document.getElementById("side")) return false;
var side=document.getElementById("side");
var links=side.getElementsByTagName("h2")[0].getElementsByTagName("a");
links[0].className="h2_click";
var sidelink=side.getElementsByTagName("a");
for(var i=1; i<sidelink.length; i++){
sidelink[i].className="";
}
}
//@Mr.Think---展开/关闭
function m_id(id) {
return document.getElementById(id);
}
function getcookie(name) {
var cookie_start = document.cookie.indexOf(name);
var cookie_end = document.cookie.indexOf(";", cookie_start);
return cookie_start == -1 ? '' : unescape(document.cookie.substring(cookie_start + name.length + 1, (cookie_end > cookie_start ? cookie_end : document.cookie.length)));
}
var collapsed = getcookie('m_shutoropen');
function shutoropen(menucount) {
var classname = m_id('menuimg_' + menucount).parentNode.className;
if(m_id('menu_' + menucount).style.display == 'none') {
m_id('menu_' + menucount).style.display = '';collapsed = collapsed.replace('[' + menucount + ']' , '');
m_id('menuimg_' + menucount).src = 'http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081114143814' + (classname==''?'':'2') + '.gif';
} else {
m_id('menu_' + menucount).style.display = 'none';collapsed += '[' + menucount + ']';
m_id('menuimg_' + menucount).src = 'http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081114143822' + (classname==''?'':'2') + '.gif';
}
}
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div id="side">
<h2><a href="javascript:void(0)" class="h2_click" onClick="clickindex()">管理首页</a></h2>
<h3><a href="javascript:void(0)" onClick="shutoropen(1)"><img id="menuimg_1" src="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081114143814.gif" border="0"/> 博文管理</a></h3>
<ul id="menu_1">
<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>
<h3><a href="javascript:void(0)" onClick="shutoropen(2)"><img id="menuimg_2" src="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081114143814.gif" border="0"/> 标签管理</a></h3>
<ul id="menu_2">
<li><a href="javascript:void(0)">标签管理</a></li>
<li><a href="javascript:void(0)">上传附件管理</a></li>
</ul>
<h3><a href="javascript:void(0)" onClick="shutoropen(3)"><img id="menuimg_3" src="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081114143814.gif" border="0"/> 评论留言</a></h3>
<ul id="menu_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>
</ul>
</div>
</body>
</html> |
| 特效说明： |
适用于网站后台的竖向二级下拉导航菜单
用到的图片：
|
|
| 上一篇文章： 简洁漂亮且附带提示的二级导航菜单下一篇文章： 仿天涯固定在网页顶部的导航条 |
|
|
|
注册 登录
