首页
所有分类
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 相关文章推荐
使用jquery+CSS实现控制打印样式
Dec 31 Javascript
JavaScript通过字符串调用函数的实现方法
Mar 18 Javascript
Node.js Sequelize如何实现数据库的读写分离
Oct 23 Javascript
用js制作淘宝放大镜效果
Oct 28 Javascript
JS实现简单拖拽效果
Jun 21 Javascript
AngularJS页面带参跳转及参数解析操作示例
Jun 28 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
Apr 12 Javascript
vue如何通过id从列表页跳转到对应的详情页
May 01 Javascript
解决Mac安装thrift因bison报错的问题
May 17 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
Sep 14 Javascript
JS调用安卓手机摄像头扫描二维码
Oct 16 Javascript
vue 集成jTopo 处理方法
Aug 07 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
长波(3) 广播(8) 收音机(62) 保养(1) 短波(8) 烈阳天道(2) 中学科技(1) 下载(1) 怀旧期刊(1) 无线电(12)
You might like
浅谈Eclipse PDT调试PHP程序
2014/06/09 PHP
跟我学Laravel之路由
2014/10/15 PHP
实例说明js脚本语言和php脚本语言的区别
2019/04/04 PHP
jQuery布局插件UI Layout简介及使用方法
2013/04/03 Javascript
javascript数组去重的方法汇总
2015/04/14 Javascript
详解JavaScript中的blink()方法的使用
2015/06/08 Javascript
jQuery中队列queue()函数的实例教程
2016/05/03 Javascript
vue货币过滤器的实现方法
2017/04/01 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
2017/07/24 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
2018/01/23 Javascript
node app 打包工具pkg的具体使用
2019/01/17 Javascript
微信小程序实现简单表格
2019/02/14 Javascript
JS实现音乐钢琴特效
2020/01/06 Javascript
微信小程序canvas开发水果老虎机的思路详解
2020/02/07 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
2020/09/04 Javascript
JS实现密码框效果
2020/09/10 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
2020/11/02 Javascript
[38:39]完美世界DOTA2联赛循环赛 IO vs GXR BO2第二场 11.04
2020/11/05 DOTA
python正则表达式的使用
2017/06/12 Python
matplotlib简介,安装和简单实例代码
2017/12/26 Python
Django rest framework实现分页的示例
2018/05/24 Python
Flask Web开发入门之文件上传（八）
2018/08/17 Python
Python实现的拉格朗日插值法示例
2019/01/08 Python
PyCharm在新窗口打开项目的方法
2019/01/17 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
python 实现IP子网计算
2021/02/18 Python
个人自我评价和职业目标
2014/01/24 职场文书
校园联欢晚会主持词
2014/03/17 职场文书
物业管理专业求职信
2014/06/11 职场文书
公务员年终个人总结
2015/02/12 职场文书
停电通知范文
2015/04/16 职场文书
2015年社区平安建设工作总结
2015/05/13 职场文书
法律意见书范文
2015/05/20 职场文书
MySQL索引是啥?不懂就问
2021/07/21 MySQL
JavaScript正则表达式实现注册信息校验功能
2022/05/30 Java/Android
python实现一个简单的贪吃蛇游戏附代码
2022/06/28 Python