js实现的后台左侧管理菜单代码

2024-09-28 00:08:50

本文实例讲述了js实现的后台左侧管理菜单代码。分享给大家供大家参考。具体如下：

这是一个完美的后台左侧管理菜单，从样式来说，貌似出自专业人士之手，风格清新，操作实用，用在WEB管理系统中或用在网站后台管理中，最恰当不过了。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-left-main-menu-style-codes/

具体代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>后台左侧菜单<HEAD>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<style>
BODY {
 MARGIN: 0px
}
P {
 MARGIN: 0px
}
BODY {
 COLOR: #000; BACKGROUND-COLOR: #fff
}
BODY {
 FONT-SIZE: 12px; LINE-HEIGHT: 150%; FONT-FAMILY: "Verdana", "Arial", "Helvetica", "sans-serif"
}
TABLE {
 FONT-SIZE: 12px; LINE-HEIGHT: 150%; FONT-FAMILY: "Verdana", "Arial", "Helvetica", "sans-serif"
}
INPUT {
 FONT-SIZE: 12px; FONT-FAMILY: "Verdana", "Arial", "Helvetica", "sans-serif"
}
SELECT {
 FONT-SIZE: 12px; FONT-FAMILY: "Verdana", "Arial", "Helvetica", "sans-serif"
}
TEXTAREA {
 FONT-SIZE: 12px; FONT-FAMILY: "Verdana", "Arial", "Helvetica", "sans-serif"
}
A:link {
 COLOR: #036; TEXT-DECORATION: none
}
A:visited {
 COLOR: #036; TEXT-DECORATION: none
}
A:hover {
 COLOR: #f60; TEXT-DECORATION: underline
}
A.menuChild:link {
 COLOR: #036; TEXT-DECORATION: none
}
A.menuChild:visited {
 COLOR: #036; TEXT-DECORATION: none
}
A.menuChild:hover {
 COLOR: #f60; TEXT-DECORATION: underline
}
A.menuParent:link {
 COLOR: #000; TEXT-DECORATION: none
}
A.menuParent:visited {
 COLOR: #000; TEXT-DECORATION: none
}
A.menuParent:hover {
 COLOR: #f60; TEXT-DECORATION: none
}
TABLE.position {
 WIDTH: 100%
}
TR.position {
 HEIGHT: 25px; BACKGROUND-COLOR: #f4f7fc
}
TD.position {
 BORDER-RIGHT: #adceff 1px solid; PADDING-LEFT: 20px; BORDER-BOTTOM: #adceff 1px solid
}
TABLE.listTable {
 WIDTH: 98%; BACKGROUND-COLOR: #b1ceee
}
TR.listHeaderTr {
 FONT-WEIGHT: bold; HEIGHT: 25px; BACKGROUND-COLOR: #ebf4fd; TEXT-ALIGN: center
}
TR.listTr {
 HEIGHT: 25px; BACKGROUND-COLOR: #fff; TEXT-ALIGN: center
}
TR.listAlternatingTr {
 HEIGHT: 25px; BACKGROUND-COLOR: #fffdf0; TEXT-ALIGN: center
}
TR.listFooterTr {
 HEIGHT: 30px; BACKGROUND-COLOR: #ebf4fd; TEXT-ALIGN: center
}
TABLE.editTable {
 WIDTH: 98%; BACKGROUND-COLOR: #b1ceee
}
TR.editHeaderTr {
 HEIGHT: 25px; BACKGROUND-COLOR: #ebf4fd
}
TD.editHeaderTd {
 PADDING-LEFT: 50px; FONT-WEIGHT: bold
}
TR.editTr {
 HEIGHT: 30px
}
TD.editLeftTd {
 WIDTH: 150px; BACKGROUND-COLOR: #fffdf0; TEXT-ALIGN: center
}
TD.editRightTd {
 PADDING-LEFT: 10px; BACKGROUND-COLOR: #fff
}
TR.editFooterTr {
 HEIGHT: 40px; BACKGROUND-COLOR: #ebf4fd
}
TD.editFooterTd {
 PADDING-LEFT: 150px
}
</style>
<SCRIPT language=javascript>
 function expand(el)
 {
  childObj = document.getElementById("child" + el);
  if (childObj.style.display == 'none')
  {
   childObj.style.display = 'block';
  }
  else
  {
   childObj.style.display = 'none';
  }
  return;
 }
</SCRIPT>
</HEAD>
<BODY>
<TABLE height="100%" cellSpacing=0 cellPadding=0 width=170
background=images/menu_bg.jpg border=0>
 <TR>
 <TD vAlign=top align=middle>
 <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
 <TR>
  <TD height=10></TD></TR></TABLE>
 <TABLE cellSpacing=0 cellPadding=0 width=150 border=0>
 <TR height=22>
  <TD style="PADDING-LEFT: 30px" background=images/menu_bt.jpg><A
  class=menuParent onclick=expand(1)
  href="javascript:void(0);">关于我们</A></TD></TR>
 <TR height=4>
  <TD></TD></TR></TABLE>
 <TABLE id=child1 style="DISPLAY: none" cellSpacing=0 cellPadding=0
 width=150 border=0>
 <TR height=20>
  <TD align=middle width=30><IMG height=9
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild
  href="#"
  target=main>公司简介</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild
  href="#"
  target=main>荣誉资质</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild
  href="#"
  target=main>分类管理</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild
  href="#"
  target=main>子类管理</A></TD></TR>
 <TR height=4>
  <TD colSpan=2></TD></TR></TABLE>
 <TABLE cellSpacing=0 cellPadding=0 width=150 border=0>
 <TR height=22>
  <TD style="PADDING-LEFT: 30px" background=images/menu_bt.jpg><A
  class=menuParent onclick=expand(2)
  href="javascript:void(0);">新闻中心</A></TD></TR>
 <TR height=4>
  <TD></TD></TR></TABLE>
 <TABLE id=child2 style="DISPLAY: none" cellSpacing=0 cellPadding=0
 width=150 border=0>
 <TR height=20>
  <TD align=middle width=30><IMG height=9
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild
  href="#"
  target=main>公司新闻</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild
  href="#"
  target=main>分类管理</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild
  href="#"
  target=main>子类管理</A></TD></TR>
 <TR height=4>
  <TD colSpan=2></TD></TR></TABLE>
 <TABLE cellSpacing=0 cellPadding=0 width=150 border=0>
 <TR height=22>
  <TD style="PADDING-LEFT: 30px" background=images/menu_bt.jpg><A
  class=menuParent onclick=expand(3)
  href="javascript:void(0);">产品中心</A></TD></TR>
 <TR height=4>
  <TD></TD></TR></TABLE>
 <TABLE id=child3 style="DISPLAY: none" cellSpacing=0 cellPadding=0
 width=150 border=0>
 <TR height=20>
  <TD align=middle width=30><IMG height=9
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild
  href="#"
  target=main>产品展示</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild
  href="#"
  target=main>最新产品</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild
  href="#"
  target=main>分类管理</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild
  href="#"
  target=main>子类管理</A></TD></TR>
 <TR height=4>
  <TD colSpan=2></TD></TR></TABLE>
 <TABLE cellSpacing=0 cellPadding=0 width=150 border=0>
 <TR height=22>
  <TD style="PADDING-LEFT: 30px" background=images/menu_bt.jpg><A
  class=menuParent onclick=expand(4)
  href="javascript:void(0);">客户服务</A></TD></TR>
 <TR height=4>
  <TD></TD></TR></TABLE>
 <TABLE id=child4 style="DISPLAY: none" cellSpacing=0 cellPadding=0
 width=150 border=0>
 <TR height=20>
  <TD align=middle width=30><IMG height=9
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild
  href="#"
  target=main>客户服务</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild
  href="#"
  target=main>分类管理</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild
  href="#"
  target=main>子类管理</A></TD></TR>
 <TR height=4>
  <TD colSpan=2></TD></TR></TABLE>
 <TABLE cellSpacing=0 cellPadding=0 width=150 border=0>
 <TR height=22>
  <TD style="PADDING-LEFT: 30px" background=images/menu_bt.jpg><A
  class=menuParent onclick=expand(5)
  href="javascript:void(0);">经典案例</A></TD></TR>
 <TR height=4>
  <TD></TD></TR></TABLE>
 <TABLE id=child5 style="DISPLAY: none" cellSpacing=0 cellPadding=0
 width=150 border=0>
 <TR height=20>
  <TD align=middle width=30><IMG height=9
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild
  href="#"
  target=main>分类管理</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild
  href="#"
  target=main>子类管理</A></TD></TR>
 <TR height=4>
  <TD colSpan=2></TD></TR></TABLE>
 <TABLE cellSpacing=0 cellPadding=0 width=150 border=0>
 <TR height=22>
  <TD style="PADDING-LEFT: 30px" background=images/menu_bt.jpg><A
  class=menuParent onclick=expand(6)
  href="javascript:void(0);">高级管理</A></TD></TR>
 <TR height=4>
  <TD></TD></TR></TABLE>
 <TABLE id=child6 style="DISPLAY: none" cellSpacing=0 cellPadding=0
 width=150 border=0>
 <TR height=20>
  <TD align=middle width=30><IMG height=9
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild
  href="#"
  target=main>广告管理</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild
  href="#"
  target=main>访问统计</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild
  href="#"
  target=main>邮件发送设置</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild
  href="#"
  target=main>联系部门</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild
  href="#"
  target=main>用户留言</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild
  href="#"
  target=main>招聘职位</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild
  href="#"
  target=main>应聘人员</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild
  href="#"
  target=main>留言簿</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild
  href="#"
  target=main>产品订购</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild
  href="#"
  target=main>链接管理</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild
  href="#"
  target=main>文件管理</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild
  href="#"
  target=main>信息转移</A></TD></TR>
 <TR height=4>
  <TD colSpan=2></TD></TR></TABLE>
 <TABLE cellSpacing=0 cellPadding=0 width=150 border=0>
 <TR height=22>
  <TD style="PADDING-LEFT: 30px" background=images/menu_bt.jpg><A
  class=menuParent onclick=expand(7)
  href="javascript:void(0);">系统管理</A></TD></TR>
 <TR height=4>
  <TD></TD></TR></TABLE>
 <TABLE id=child7 style="DISPLAY: none" cellSpacing=0 cellPadding=0
 width=150 border=0>
 <TR height=20>
  <TD align=middle width=30><IMG height=9
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild
  href="#"
  target=main>基本设置</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild
  href="#"
  target=main>样式管理</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild
  href="#"
  target=main>栏目管理</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild
  href="#"
  target=main>功能管理</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild
  href="#"
  target=main>菜单管理</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild
  href="#"
  target=main>首页设置</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild
  href="#"
  target=main>管理员列表</A></TD></TR>
 <TR height=4>
  <TD colSpan=2></TD></TR></TABLE>
 <TABLE cellSpacing=0 cellPadding=0 width=150 border=0>
 <TR height=22>
  <TD style="PADDING-LEFT: 30px" background=images/menu_bt.jpg><A
  class=menuParent onclick=expand(0)
  href="javascript:void(0);">个人管理</A></TD></TR>
 <TR height=4>
  <TD></TD></TR></TABLE>
 <TABLE id=child0 style="DISPLAY: none" cellSpacing=0 cellPadding=0
 width=150 border=0>
 <TR height=20>
  <TD align=middle width=30><IMG height=9
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild
  href="#"
  target=main>修改口令</A></TD></TR>
 <TR height=20>
  <TD align=middle width=30><IMG height=9
  src="images/menu_icon.gif" width=9></TD>
  <TD><A class=menuChild
  onclick="if (confirm('确定要退出吗？')) return true; else return false;"
  href="http://www.jb51.net"
  target=_top>退出系统</A></TD></TR></TABLE></TD>
 <TD width=1 bgColor=#d1e6f7></TD></TR></TABLE></BODY></HTML>

希望本文所述对大家的JavaScript程序设计有所帮助。

JS实现适合于后台使用的动画折叠菜单效果

本文实例讲述了JS实现适合于后台使用的动画折叠菜单效果.分享给大家供大家参考.具体如下: 这是一款适合于后台使用的动画折叠菜单,代码超简,无jQuery,展开与折叠效果平滑.本演示中有两组菜单,向大家展示如何在一个网页中布局两个菜单,整体效果以及兼容性还算可以,希望在实际应用中不会出现什么问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-ht-control-animate-zd-menu-codes/ 具体代码如下: <!DOCTY
前台JS(jquery ajax)调用后台方法实现无刷新级联菜单示例

前台用AJAX直接调用后台方法,老有人发帖提问,没事做个示例 CasMenu.aspx页面: 复制代码代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="CasMenu.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr
JS实现可编辑的后台管理菜单功能【附demo源码下载】

本文实例讲述了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"> <he
用javascript实现div可编辑的常见方法

功能:实现网页内容的即时编辑,增加页面的可用性.交互性. 方法1:直接通过textarea标签实现,请运行下边代码: New Document #info { font-size: 12px; overflow:hidden; background-color: #ffffcc; color: black; padding-right:5px; padding-left:5px; font-family: courier; width:100%; letter-spacing:0; line-h
ExtJS中设置下拉列表框不可编辑的方法

ExtJS这个框架,并没有学习和用过,只知道是一个流行的前段框架,和Easy UI,BUI,DWZ等这些框架都是差不多的,只不过比他们更加强大而已,之所以写这个,我觉得还是很有帮助的. 今天朋友遇到了一个问题:ExtJS中的下拉列表如何设置不可编辑的,html中是不可以编辑的,但是现在这种UI框架中的下拉列表框都是可以编辑的,朋友的需求就是像html中的那样效果,所以朋友想到了用editable属性,但是写了这个属性之后就报错了,当时并没有看错误,我给他找了1个属性设置为不可编辑的,但是还是不好
使用js实现一个可编辑的select下拉列表

复制代码代码如下: <select id="name" name="name" onkeydown="clearSelect(this,event);" onkeypress="writeSelect(this,event);" style="width:70px;"> <option value=""></option> <option va
JS在可编辑的div中的光标位置插入内容的方法

本文实例讲述了js实现在可编辑div中指定位置插入内容的方法,就像我们使用的编辑器一样,分享给大家供大家参考.具体实现方法如下: 首先要让DIV启用编辑模式复制代码代码如下: <div contenteditable=true id="divTest"></div> 通过设定contenteditable=true开启div的编辑模式.这样DIV就可以跟文本框一样输入内容了. 不扯话题了.下面说怎么获取或设置光标位置. 2个步骤: ① 获取DIV中的光标位置
jsp中将后台传递过来的json格式的list数据绑定到下拉菜单select

复制代码代码如下: <span style="white-space:pre"> </span><select><c:forEach var="fileList" items="${fileList}" varStatus="i"> <option value="${i.count}">${fileList.filePath}</optio
js类后台管理菜单类-MenuSwitch

写MenuSwitch类的出发点是因为随着后台管理项越来越多,从而导致菜单显示部出现了滚动条导致页面很不美观,自己蒙生写这个JS类了. 这个功能类采用了目前比较流行的Web2.0做法,使用DIV+CSS+JS方式,将样式和功能分开.我下面先把演示效果放出来吧复制代码代码如下: function MenuSwitch(className){ this._elements = []; this._default = -1;
让你的网站可编辑的实现js代码

非常的简单一.打开你要黑的网站, 二.在浏览器的地址栏里输入: 复制代码代码如下: javascript:document.body.contentEditable='true'; document.designMode='on'; void 0 三.现在你会发现他的页面竟然可以任由你自由修改了!! 四.按照你自己的意图修改好后,在地址栏中输入: 复制代码代码如下: javascript:document.body.contentEditable='false'; void 0 好了,截图

js实现的后台左侧管理菜单代码

相关推荐

随机推荐