js+css+cookie后台管理菜单,刷新后保持状态

注意: 需要引入prototype.js // 可从网上下载
三个自定义文件
1、js文件 menu.js
2、.css, my.css
3、测试页面 test.html

---

menu.js:

//----2008-1-21 add by chen
var MenusClass = Class.create();

document.getElementsByClassName = function(classname) {
var retnode = [];
var myclass = new RegExp('\\b'+classname+'\\b');
var elem = this.getElementsByTagName('*');
for (var j = 0; j < elem.length; j++) {
var classes = elem[j].className;
if (myclass.test(classes)) retnode.push(elem[j]);
}
return retnode;
}
MenusClass.prototype.hideByClassName = function(classname) {
var items = document.getElementsByClassName(classname);
for (var j=0; j<items.length; j++) {
items[j].style.display = "none";
}
}
MenusClass.prototype.delCookie = function(sName){
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval=this.getCookie(sName);
if(cval!=null) {
document.cookie = sName+"="+cval+";expires="+exp.toGMTString();
}
}
MenusClass.prototype.setCookie = function(sName,sValue,expiredays) {
var cookieString = sName + "=" + escape(sValue);
//time is expired?

if (expiredays>0) {
var exdate = new Date();
if(this.getCookie(sName)!=null){
this.delCookie(sName);
}

var argv=this.setCookie.arguments;
var argc=this.setCookie.arguments.length;
var path=(4<argc)?argv[4]:"/";
var domain=(5<argc)?argv[5]:".your.com"; //此处设置为域内Cookie
var secure=(6<argc)?argv[6]:false;

exdate.setDate(exdate.getDate()+expiredays);
cookieString = cookieString + "; expires=" + exdate.toGMTString() +"; path="+path+"; domain="+domain+((secure==true)?"; secure":"");
}
document.cookie = cookieString;
}
MenusClass.prototype.getCookie = function(cookieName) {
var aCookie = document.cookie.split("; ");
for (var j=0; j < aCookie.length; j++){
var aCrumb = aCookie[j].split("=");
if (escape(cookieName) == aCrumb[0])
return unescape(aCrumb[1]);
}
return null;
}

MenusClass.prototype.initialize = function(onClickClassname,showItemClassname,showItemPrefix,cookieName) {
this.onClickClassname=onClickClassname;
this.showItemClassname=showItemClassname;
this.showItemPrefix=showItemPrefix;
this.cookieName=cookieName;
}

MenusClass.prototype.onclick = function(cookieValue){
this.setCookie(this.cookieName,cookieValue,1);
this.hideByClassName(this.showItemClassname);
this.show();
}

MenusClass.prototype.show=function(){
var show_item = this.showItemPrefix+"1";
if (this.getCookie(this.cookieName) != null) {
show_item= this.showItemPrefix + this.getCookie(this.cookieName);
}
document.getElementById(show_item).style.display = "block";
}

---

my.css

#adminmenu {
PADDING-LEFT: 0px;
FONT-WEIGHT: normal;
FLOAT: left;
MARGIN: 10px 5px 5px;
WIDTH: 140px;
FONT-FAMILY: "宋体";
HEIGHT: auto;
TEXT-ALIGN: left;

}
#adminmenu .item {
MARGIN: 0px 3px 0px 3px;
WIDTH: 140px;
padding: 1px;

}
A.menu_title:link {
PADDING-RIGHT: 5px;
DISPLAY: block;
PADDING-LEFT: 15px;
FONT-WEIGHT: normal;
FONT-SIZE: 14px;
PADDING-BOTTOM: 5px;
MARGIN: 0px;
CURSOR: pointer;
COLOR: #1e3e93;
PADDING-TOP: 5px;
TEXT-DECORATION: none;
background-image: url(bg.gif);//菜单背景图
}
A.menu_title:visited {
PADDING-RIGHT: 5px;
DISPLAY: block;
PADDING-LEFT: 15px;
FONT-WEIGHT: normal;
FONT-SIZE: 14px;
PADDING-BOTTOM: 5px;
MARGIN: 0px;
CURSOR: pointer;
COLOR: #1e3e93;
PADDING-TOP: 5px;
TEXT-DECORATION: none;
background-image: url(beijing/wang_024.gif);
}
A.menu_title:hover {
PADDING-RIGHT: 5px;
DISPLAY: block;
PADDING-LEFT: 15px;
FONT-WEIGHT: bold;
FONT-SIZE: 14px;
PADDING-BOTTOM: 5px;
MARGIN: 0px;
CURSOR: pointer;
COLOR: #1e3e93;
PADDING-TOP: 5px;
TEXT-DECORATION: none;
background-image: url(blue.gif);
}
#adminmenu .item UL {
PADDING-RIGHT: 0px; DISPLAY: none; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
#adminmenu .item UL LI {
PADDING-RIGHT: 5px; DISPLAY: block; PADDING-LEFT: 15px; FONT-SIZE: 12px; PADDING-BOTTOM: 5px; MARGIN: 1px 0px 0px; COLOR: #1e3e93; PADDING-TOP: 5px; HEIGHT: 16px; BACKGROUND-COLOR: #eeeeee
}
#adminmenu .item UL LI A {
PADDING-RIGHT: 5px; DISPLAY: block; PADDING-LEFT: 25px; FONT-SIZE: 12px; PADDING-BOTTOM: 4px; MARGIN: -4px -5px -5px -15px; COLOR: #1e3e93; PADDING-TOP: 5px; HEIGHT: 16px; BACKGROUND-COLOR: #f4f4f4; TEXT-DECORATION: none
}
#adminmenu .item UL LI A:hover {
COLOR: #fff; BACKGROUND-COLOR: #bbbbbb; TEXT-DECORATION: underline
}

---

admin.html

<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD><TITLE> cms</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">

<SCRIPT src="tmenu.js"></SCRIPT>
<SCRIPT src="prototype.js"></SCRIPT>
<LINK href="my.css" type=text/css rel=stylesheet>
<SCRIPT language=javascript>
<!--
var menus_item=new MenusClass("menu_title","options","items_","cookie_menu");
//-->
</SCRIPT>
</head>
<body>
<DIV id=adminmenu>
<UL class=item><A class=menu_title onclick=menus_item.onclick(1)
href="#"
name=1>管理菜单1</A>
<UL class=options id=items_1>
<LI><A
href="">管理菜单1-1</A>
</LI>
<LI><A
href="#">管理菜单1-2</A>
</LI>
</UL>
</UL>
<UL class=item><A class=menu_title onclick=menus_item.onclick(2)
href="#" name=2>管理菜单2</A>
<UL class=options id=items_2>
<LI><A
href="#">管理菜单2-1</A>
</LI>
<LI><A
href="#">管理菜单2-2</A>
</LI>
<LI><A
href="#">管理菜单2-3</A>
</LI>
<LI><A
href="#">管理菜单2-4</A>
</LI>
</UL>
</UL>
<UL class=item><A class=menu_title onclick=menus_item.onclick(3)
href="#"
name=3>管理菜单3</A>
<UL class=options id=items_3>
<LI><A href="#">管理菜单3-1</A>
</LI>
<LI><href='#'>管理菜单3-2</A>
</LI>
<LI><A
href="#">管理菜单3-3</A>
</LI></UL>
</UL>
<SCRIPT language=javascript>
<!--
menus_item.show();
//-->
</SCRIPT>
</DIV>
</body>
</html>