DIV+js后台左侧专用菜单

最新推荐文章于 2018-05-15 11:45:58 发布
最新推荐文章于 2018-05-15 11:45:58 发布
阅读量808 收藏
点赞数
分类专栏： 后台开发 文章标签： 后台模板

转载地址

后台左侧菜单，背景颜色以及长宽都可以改，代码里有注释，本菜单可广泛应用于网站后台管理的左侧，作为主菜单，简洁风格，优点是修改容易，菜单项直接写在HTML里，而非JS文件里

<!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=gb2312">
<title>后台专用树型菜单，可刷新-www.codefans.net </title>
<style type="text/css">
<!--
*{margin:0;padding:0;border:0;}
body {
 font-size:12px;
}
#nav {
 width:190px;
 line-height: 18px;
 list-style-type: none;
 text-align:left;
}
#nav a {
 width: 190px;
 display: block;
 padding-left:20px;
 /*Width(一定要)，否则下面的Li会变形*/
}
#nav li {
 background:#bbde79; /*一级目录的背景色*/
 float:left;
 BORDER-RIGHT: #8c8c8c 1px solid;
 BORDER-TOP: #dbfe99 1px solid;
 FONT-WEIGHT: bold;
 FONT-SIZE: 11px;
 PADDING-BOTTOM: 2px;
 BORDER-LEFT: #dbfe99 1px solid;
 CURSOR: hand;
 COLOR: black;
 PADDING-TOP: 4px;
 BORDER-BOTTOM: #8c8c8c 1px solid;
background: #BBDE78 url('http://www.codefans.net/images/default/star.gif') no-repeat left center;
 /*float：left,本不应该设置，但由于在Firefox不能正常显示
 继承Nav的width,限制宽度，li自动向下延伸*/
}
#nav li a:hover{
 url('http://www.codefans.net/images/default/star.gif') no-repeat left center; /*一级目录onMouseOver显示的背景色*/
}
#nav a:link  {
 color:#666; text-decoration:none;
}
#nav a:visited  {
 color:#666;text-decoration:none;
}
#nav a:hover  {
 color:#FFF;text-decoration:none;font-weight:bold;
}
/*====www.codefans.net=====二级目录=========*/
#nav li ul {
 list-style:none;
 text-align:left;
}
#nav li ul li{
 BORDER-RIGHT: #cccccc 1px solid;
 BORDER-TOP: white 1px solid;
 FONT-SIZE: 11px;
 PADDING-BOTTOM: 2px;
 BORDER-LEFT: white 1px solid;
 CURSOR: hand;
 PADDING-TOP: 2px;
 BORDER-BOTTOM: #cccccc 1px solid;
 BACKGROUND-COLOR: #eeeeee; /*二级目录的背景色*/
}
#nav li ul a{
         padding-left:20px;
         width:188px;
 /* padding-left二级目录中文字向右移动，但Width必须重新设置=(总宽度-padding-left)*/
}
/*下面是二级目录的链接样式*/
#nav li ul a:link  {
 color:#666; text-decoration:none;
}
#nav li ul a:visited  {
 color:#666;text-decoration:none;
}
#nav li ul li a:hover {
 background:#d5d5d5;
 text-decoration:none;
 font-weight:normal;
}
/* www.codefans.net */
#nav li:hover ul {
 left: auto;
}
#nav li.sfhover ul {
 left: auto;
}
#content {
 clear: left;
}
#nav ul.collapsed {
 display: none;
}
-->
#PARENT{
 width:300px;
 padding-left:20px;
}
</style>
<script type=text/javascript><!--
var LastLeftID = "";
function menuFix() {
 var obj = document.getElementById("Nav").getElementsByTagName("li");
 // www.codefans.net
 for (var i=0; i<obj.length; i++) {
  obj[i].οnmοuseοver=function() {
   this.className+=(this.className.length>0? " ": "") + "sfhover";
  }
  obj[i].onMouseDown=function() {
   this.className+=(this.className.length>0? " ": "") + "sfhover";
  }
  obj[i].onMouseUp=function() {
   this.className+=(this.className.length>0? " ": "") + "sfhover";
  }
  obj[i].οnmοuseοut=function() {
   this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
  }
 }
}
function DoMenu(emid)
{
 var obj = document.getElementById(emid);
 obj.className = (obj.className.toLowerCase() == "expanded"?"collapsed":"expanded");
 if((LastLeftID!="")&&(emid!=LastLeftID)) //关闭上一个Menu
 {
  document.getElementById(LastLeftID).className = "collapsed";
 }
 LastLeftID = emid;
}
function GetMenuID()
{
 var MenuID="";
 var _paramStr = new String(window.location.href);
 var _sharpPos = _paramStr.indexOf("#");
 // www.codefans.net
 if (_sharpPos >= 0 && _sharpPos < _paramStr.length - 1)
 {
  _paramStr = _paramStr.substring(_sharpPos + 1, _paramStr.length);
 }
 else
 {
  _paramStr = "";
 }
 
 if (_paramStr.length > 0)
 {
  var _paramArr = _paramStr.split("&");
  if (_paramArr.length>0)
  {
   var _paramKeyVal = _paramArr[0].split("=");
   if (_paramKeyVal.length>0)
   {
    MenuID = _paramKeyVal[1];
   }
  }
 }
 
 if(MenuID!="")
 {
  DoMenu(MenuID)
 }
}
GetMenuID(); //*function顺序要注意，否则在Firefox里GetMenuID()不起效果。
menuFix();
-->
</script>
</head>
<body>
<div id="PARENT">
<ul id="nav">
<li><a href="#Menu=ChildMenu1"  οnclick="DoMenu('ChildMenu1')">我的网站</a>
<ul id="ChildMenu1" class="collapsed">
 <li><a href="http://www.codefans.net" target="_blank">www.codefans.net</a></li>
 <li><a href="http://www.codefans.net" target="_blank">www.codefans.net</a></li>
 <li><a href="http://www.codefans.net" target="_blank">www.codefans.net</a></li>
 </ul>
</li>
<li><a href="#Menu=ChildMenu2" οnclick="DoMenu('ChildMenu2')">我的帐务</a>
 <ul id="ChildMenu2" class="collapsed">
 <li><a href="http://www.codefans.net" target="_blank">支付</a></li>
 <li><a href="http://www.codefans.net">网上支付</a></li>
 <li><a href="http://www.codefans.net">登记汇款</a></li>
 <li><a href="http://www.codefans.net">历史帐务</a></li>
 </ul>
</li>
<li><a href="#Menu=ChildMenu3" οnclick="DoMenu('ChildMenu3')">网站管理</a>
 <ul id="ChildMenu3" class="collapsed">
 <li><a href="#">登录</a></li>
 <li><a href="http://www.codefans.net" target="_blank">管理</a></li>
 <li><a href="#">管理</a></li>
 <li><a href="#">管理</a></li>
 </ul>
</li>
<li><a href="#Menu=ChildMenu4" οnclick="DoMenu('ChildMenu4')">网站管理</a>
 <ul id="ChildMenu4" class="collapsed">
 <li><a href="http://www.codefans.net">登录</a></li>
 <li><a href="www.codefans.net" target="_blank">管理</a></li>
 <li><a href="http://www.codefans.net">管理</a></li>
 <li><a href="http://www.codefans.net">管理</a></li>
 </ul>
</li>
</ul>
</div>
</body>
</html>

黄志刚
关注
专栏目录
【前端代码实例】使用HTML5+CSS3+JavaScript制作一个响应式的后台管理系统~带侧边导航栏仪表盘功能
南北极之间
08-08 1万+
classList 属性返回元素的类名，作为 DOMTokenList 对象。该属性用于在元素中添加，移除及切换 CSS 类。classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它。
HTML+CSS+JavaScript后台管理页面1： 实现头部菜单，内容中分为左侧菜单和右侧表格以及返回顶部，表格中实现全选，反选，取消，添加。
风从北方来的博客
05-30 2505
代码：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;link rel="stylesheet" href="fo
js折叠菜单.后台左侧菜单（亲测经典）
07-05
js折叠菜单.后台左侧菜单 亲测可用。 经典的后台折叠菜单，类似Qq效果。 找了好久，绝对可用
js通过下拉菜单选择不同的div显示
哦嘛咪嘛咪哄~~~
04-23 859
New Document a b a.test1 a.test2 sb sb1
JS实现折叠菜单后台管理页面
06-25
用JS实现的左侧菜单可以上下折叠的后台管理平台
js构建函数，点击按钮显示div，再点击按钮或其他区域，隐藏div
anda9128的博客
09-09 183
这只是一个例子，先看看效果： html代码： <nav> <span class="nav_logo"></span> <h1>云蚂客首页</h1> <button class="nav_btn"></button&...
CSS + Js 超级 左侧可折叠 树形菜单 后台专用版
03-17
CSS + Js 超级 左侧可折叠 树形菜单 后台专用版 一款后台左侧专用的可折叠树形菜单，设计外形超级漂亮，本折叠菜单最大可支持三级，三级菜单对于中小型网站的后台已经够用了，而且代码也不是太复杂，水平好点的可自行扩展。通过点击最上部的展开、收缩按钮，可将全部闭合的菜单一律调整为展开状态，反之亦然。
基于Ajax+div的“左边菜单、右边内容”页面效果实现
10-21
Ajax（Asynchronous JavaScript and XML）技术结合div元素，可以实现“左边菜单、右边内容”的动态加载效果，从而提供更流畅的用户体验，而无需每次操作都刷新整个页面。以下将详细介绍这种效果的实现步骤。 1. **...
js实现的后台左侧管理菜单代码
10-23
JavaScript实现后台左侧管理菜单是前端开发中常见的一个功能模块，主要目的是为管理员或用户提供一个直观、易用的界面来管理后台内容。本知识点将详细解析如何利用JavaScript结合CSS实现一个美观大气的左侧折叠菜单...
一款漂亮实用的OA系统左侧DIV+CSS菜单
02-01
描述中提到的“后台左侧菜单 div+css+js”进一步指出了这个菜单不仅涉及到HTML结构和CSS样式，还包含了JavaScript（js）的交互功能。JavaScript是一种常用的客户端脚本语言，用于实现网页的动态效果和交互性。在这种...
左侧导航菜单div+css样式
11-03
左侧导航菜单div+css样式，样式非常好看，适合faq页面使用，分层级的可折叠菜单
DIV+CSS+JS商城左侧可展开产品分类菜单特效 浮层特效
10-09
DIV+CSS+JS商城左侧可展开产品分类菜单特效 浮层特效
常用的JS后台导航菜单，可刷新不变
02-25
常用的JS后台导航菜单，可刷新不变 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xml:lang="UTF-8" lang="UTF-8"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="UTF-8" /> <title>后台管理</title> <style type="text/css"> body {margin:0;text-align:center;color:#000;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://www.tblog.com.cn/attachments/month_0609/m20069110491.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> [removed] // --- 获取ClassName 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(); } [removed] = cookieString; } //--- 获取cookie function getCookie(sName) { var aCookie = [removed].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 { 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] { 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"; } } } } [removed] </head> <body> <ul id="menu"> <li class="item"><a href="[removed]void(0)" class="title" name="1">基本信息</a> <ul id="opt_1" class="optiton"> <li><a href="#">企业简介</a></li> <li><a href="#">企业新闻</a></li> </ul> </li> <li class="item"><a href="[removed]void(0)" class="title" name="2">系统管理</a> <ul id="opt_2" class="optiton"> <li><a href="#">企业简介</a></li> <li><a href="#">企业新闻</a></li> </ul> </li> <li class="item"><a href="[removed]void(0)" class="title" name="3">系统管理</a> <ul id="opt_3" class="optiton"> <li><a href="#">会员管理</a></li> <li><a href="#">管理员设置</a></li> <li><a href="#">权限组设置</a></li> <li><a href="#">退出系统</a></li> </ul> </li> </ul> </body> </html> <a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>
非常漂亮的HTML5后台管理模板
10-26
非常漂亮的HTML5后台管理模板，简约大气，适应各种业务后台使用
js侧边栏导航菜单.zip
11-29
js侧边栏导航菜单，用css和JavaScript制作的简单网页界面，用法简单，通俗易懂，点击下载即可
js应用例子—导航栏子菜单
weixin_30263073的博客
12-09 170
*{ margin:0px auto; padding:0px;}先做出5个导航栏。每个导航栏下面做个DIV。这个div宽度高度设置为0.在套一个div。这里面做子菜单，然后把子菜单移动到每个导航栏下面 （用relative定位），设置隐藏，display:none; 给每个导航栏做鼠标移上事件。var menu=document.getElementsByClassname("menu");...
div布局,主内容居中,左侧导航栏放置在主内容左侧
Byte_Dance的博客
03-01 2750
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; *{ margin:0;
JS后台菜单简易版（转）
frank1998819
07-11 192
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;meta
【JS】仿adminLTE 和layerUI风格用js实现后台框架(一)
wan小小冰的博客
05-15 3728
侧边栏多级菜单的实现 本篇用html+css+jq实现侧边栏的菜单功能，可实现侧边以及菜单的展开隐藏效果。 一、HTML &amp;lt;aside class=&quot;sidebar&quot;&amp;gt; &amp;lt;ul class=&quot;sidebar-menu&quot;&amp;gt; &amp;lt;li class=&quot;header text-
JavaScript实现后台左侧折叠菜单
"js实现的后台左侧管理菜单代码，用于创建美观且实用的折叠式后台管理菜单，通过JavaScript处理鼠标事件来改变页面元素样式。" 本文介绍的是一种使用JavaScript实现的后台左侧管理菜单的代码实现。这种菜单设计适用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值