网页特效
建站首页
|
广告代码
|
源码下载
|
站长工具
|
字体下载
|
网页模板
|
收藏本站
|
设为首页
网站首页
菜单导航
日期时间
背景图像
图层样式
鼠标键盘
页面窗口
色彩表格
链接文字
表单按钮
计数转换
游戏娱乐
综合实例
特效
热门搜索:
特效代码
js脚本
导航菜单
热点推荐:
英文字体
人民币汇率
dw插件
站长常用软件
alexa排名查询
您的位置:
网页特效
->
菜单导航
-> 一款常用的后台管理JS折叠菜单
一款常用的后台管理JS折叠菜单
作者:admin 发布时间:2010-12-20 7:43:13 发布人: admin
<!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>一款常用的后台管理JS折叠菜单</title> <style type="text/css"> body {margin:0;text-align:center;font:normal 12px Arial,Verdana,Tahoma;text-align:center;background:#C8D0D5;line-height:150%;} a:link,a:visited {color:#385065;text-decoration:none} a:hover {text-decoration:underline} #menu {width:150px;margin:0px 15px;padding:0px;text-align:left;list-style:none} #menu .item {margin:5px 0px;padding:0px;list-style:none} a.title:link, a.title:visited, a.title:hover {display:block;background:url(http://web.archive.org/web/20150818094718im_/http://myjs.jz123.cn/menubg1.gif) no-repeat;color:#385065;font-weight:bold;padding:2px 0 0 22px;width:128px;line-height:23px;cursor:pointer;text-decoration:none} #menu .item ul {border:1px solid #9FACB7;margin:0;width:118px;padding:3px 0px 3px 30px;background:#fff;list-style:none;display:none} #menu .item ul li {display:block;} </style> <script language="javascript" type="text/javascript"> document.getElementsByClassName = function(cl) { var retnode = []; var myclass = new RegExp('\\b'+cl+'\\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; } // --- 隐藏所有 function HideAll() { var items = document.getElementsByClassName("optiton"); for (var j=0; j<items.length; j++) { items[j].style.display = "none"; } } // --- 设置cookie function setCookie(sName,sValue,expireHours) { var cookieString = sName + "=" + escape(sValue); //;判断是否设置过期时间 if (expireHours>0) { var date = new Date(); date.setTime(date.getTime + expireHours * 3600 * 1000); cookieString = cookieString + "; expire=" + date.toGMTString(); } document.cookie = cookieString; } //--- 获取cookie function getCookie(sName) { var aCookie = document.cookie.split("; "); for (var j=0; j < aCookie.length; j++){ var aCrumb = aCookie[j].split("="); if (escape(sName) == aCrumb[0]) return unescape(aCrumb[1]); } return null; } window.onload = function() { var show_item = "opt_1"; if (getCookie("show_item") != null) { show_item= "opt_" + getCookie("show_item"); } document.getElementById(show_item).style.display = "block"; var items = document.getElementsByClassName("title"); for (var j=0; j<items.length; j++) { items[j].onclick = function() { var o = document.getElementById("opt_" + this.name); if (o.style.display != "block") { HideAll(); o.style.display = "block"; setCookie("show_item",this.name); } else { o.style.display = "none"; } } } } </script> </head> <body> <ul id="menu"> <li class="item"><a href="javascript:void(0)" _fcksavedurl="javascript:void(0)" class="title" name="1">添加信息</a> <ul id="opt_1" class="optiton"> <li><a href="#" _fcksavedurl="#">添加软件</a></li> <li><a href="#" _fcksavedurl="#">软件列表</a></li> </ul> </li> <li class="item"><a href="javascript:void(0)" _fcksavedurl="javascript:void(0)" class="title" name="2">系统管理</a> <ul id="opt_2" class="optiton"> <li><a href="#" _fcksavedurl="#">管理员设置</a></li> <li><a href="#" _fcksavedurl="#">添加管理员</a></li> </ul> </li> <li class="item"><a href="javascript:void(0)" _fcksavedurl="javascript:void(0)" class="title" name="3">友情链接</a> <ul id="opt_3" class="optiton"> <li><a href="#" _fcksavedurl="#">添加链接</a></li> <li><a href="#" _fcksavedurl="#">链接管理</a></li> <li><a href="#" _fcksavedurl="#">退出系统</a></li> </ul> </li> <li class="item"><a href="javascript:void(0)" _fcksavedurl="javascript:void(0)" class="title" name="4">CsrCode.Cn</a> <ul id="opt_4" class="optiton"> <li><a href="#" _fcksavedurl="#">网页特效</a></li> <li><a href="#" _fcksavedurl="#">网址导航</a></li> <li><a href="#" _fcksavedurl="#">源码下载</a></li> <li><a href="#" _fcksavedurl="#">链接平台</a></li> <li><a href="#" _fcksavedurl="#">生活常识</a></li> <li><a href="#" _fcksavedurl="#">搜搜问问</a></li> <li><a href="#" _fcksavedurl="#">购物导航</a></li> </ul> </li> </ul> </body> </html>
一款常用的后台管理JS折叠菜单
将本文收藏到QQ书签与更多好友分享
上一篇:文章:
一个非常简洁的QQ伸缩菜单效果
下一篇:文章:
CSS制作的一个按钮式超链接效果
本类浏览排行 »
CSS制作的一个按钮式超链接效果
一款常用的后台管理JS折叠菜单
一个非常简洁的QQ伸缩菜单效果
适合做网站后台菜单的JS伸缩菜单
jQuery实现的向上弹出的仿flash效果的导航..
一个鼠标悬停时会变色的按钮
点击按钮自动向下滚屏
Windows风格的按钮效果的导航菜单
本站推荐文章 »
JS实现Li列表的无缝垂直文字滚动代码
带关闭功能的网站顶部滑出的广告提示条
漂亮的404错误页面
比较实用的二级下拉导航菜单
点击图片直接把图片地址复制到粘贴板
一款常用的漂亮的JS图片滑动切换效果
兼容ie6、ie7、ff、opera、safari的水平垂..
一款设计精美的CSS滑动门菜单