首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onSeptember 11, 2015

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

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

运行效果截图如下：

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

在线演示地址如下：

具体代码如下：

<!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="https://3water.com" 
  target=_top>退出系统</A></TD></TR></TABLE></TD>
 <TD width=1 bgColor=#d1e6f7></TD></TR></TABLE></BODY></HTML>

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

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

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
SOSO地图API使用(一)在地图上画圆实现思路与代码
Jan 15 Javascript
Jquery同辈元素选中/未选中效果的实例代码
Aug 01 Javascript
JavaScript把数组作为堆栈使用的方法
Mar 20 Javascript
javascript数组去重的六种方法汇总
Aug 16 Javascript
基于jQuery插件实现点击小图显示大图效果
May 11 Javascript
Json解析的方法小结
Jun 22 Javascript
关于vue.js弹窗组件的知识点总结
Sep 11 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
Jul 03 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
Angular2监听页面大小变化的解决方法
Oct 09 Javascript
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
layui--js控制switch的切换方法
Sep 03 Javascript
微信企业号开发之微信考勤Cookies的使用
Sep 11 #Javascript
微信企业号开发之微信考勤百度地图定位
Sep 11 #Javascript
JavaScript处理解析JSON数据过程详解
Sep 11 #Javascript
在easyUI开发中，出现jquery.easyui.min.js函数库问题的解决办法
Sep 11 #Javascript
JavaScript实现算术平方根算法-代码超简单
Sep 11 #Javascript
js图片卷帘门导航菜单特效代码分享
Sep 10 #Javascript
jQuery超精致图片轮播幻灯片特效代码分享
Sep 10 #Javascript
Hash(1) Vmware(3) RabbitMQ(3) 入门基础(1) 磁盘管理(1) html5+(1) Get(1) 虚拟机(3) 目录管理(1) plus.io(1)
You might like
ThinkPHP打水印及设置水印位置的方法
2016/10/14 PHP
PHP substr()函数参数解释及用法讲解
2017/11/23 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
PHP时间类完整代码实例
2021/02/26 PHP
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
2013/01/11 Javascript
javascript用函数实现对象的方法
2015/05/14 Javascript
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
概述如何实现一个简单的浏览器端js模块加载器
2016/12/07 Javascript
详解nodejs爬虫程序解决gbk等中文编码问题
2017/04/06 NodeJs
vue实现文件上传功能
2018/08/13 Javascript
Python BeautifulSoup中文乱码问题的2种解决方法
2014/04/22 Python
Python3实现生成随机密码的方法
2014/08/23 Python
Python最基本的输入输出详解
2015/04/25 Python
使用python加密自己的密码
2015/08/04 Python
Python实现列表删除重复元素的三种常用方法分析
2017/11/24 Python
Python中的pygal安装和绘制直方图代码分享
2017/12/08 Python
判断python字典中key是否存在的两种方法
2018/08/10 Python
python使用zip将list转为json的方法
2018/12/31 Python
2019 Python最新面试题及答案16道题
2019/04/11 Python
django如何实现视图重定向
2019/07/24 Python
python GUI库图形界面开发之PyQt5信号与槽机制、自定义信号基础介绍
2020/02/25 Python
JSF面试题：Jsf中导航的标签是什么
2013/04/20 面试题
大学生蛋糕店创业计划书
2014/01/13 职场文书
理发店策划方案
2014/06/05 职场文书
家长会欢迎标语
2014/06/24 职场文书
公共场所禁烟倡议书
2014/08/30 职场文书
2014全年工作总结
2014/11/27 职场文书
董事长助理岗位职责
2015/02/11 职场文书
2015年学校减负工作总结
2015/05/19 职场文书
婚宴父母致辞
2015/07/27 职场文书
二胎满月酒致辞
2015/07/29 职场文书
情感电台广播稿
2015/08/18 职场文书
初中化学教学反思
2016/02/22 职场文书
Arthas排查Kubernetes中应用频繁挂掉重启异常
2022/02/28 MySQL
Tomcat starup.bat 脚本实现开机自启动
2022/04/20 Servers