首页
所有分类
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 相关文章推荐
javascript 有趣而诡异的数组
Apr 06 Javascript
JSON 学习之JSON in JavaScript详细使用说明
Feb 23 Javascript
基于jquery循环map功能的代码
Feb 26 Javascript
js中的caller和callee属性介绍和例子
Jun 07 Javascript
js实现同一个页面多个渐变效果的方法
Apr 10 Javascript
深入分析Javascript跨域问题
Apr 17 Javascript
javascript实现拖动元素交换位置
Nov 29 Javascript
js中el表达式的使用和非空判断方法
Mar 28 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
vue axios重复点击取消上一次请求封装的方法
Jun 19 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
Jan 21 Javascript
JavaScript实现飞舞的泡泡效果
Feb 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
进销存(1) enumerate(1) 自动化(1) list(1) IOC(3) zip(1) find(1) csv(4) Bean(3) metaclass(1)
You might like
php set_time_limit(0) 设置程序执行时间的函数
2010/05/26 PHP
浅谈php中mysql与mysqli的区别分析
2013/06/10 PHP
PHP数据对象映射模式实例分析
2019/03/29 PHP
js 对联广告、漂浮广告封装类（IE,FF,Opera,Safari,Chrome
2009/11/26 Javascript
javascript 清空form表单中某种元素的值
2009/12/26 Javascript
用js写了一个类似php的print_r输出换行功能
2013/02/18 Javascript
cookie的复制与使用记住用户名实现代码
2013/11/04 Javascript
js数组中如何随机取出一个值
2014/06/13 Javascript
jquery通过closest选择器修改上级元素的方法
2015/03/17 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
2016/09/24 Javascript
express如何使用session与cookie的方法
2018/01/30 Javascript
vue树形结构获取键值的方法示例
2018/06/21 Javascript
js事件on动态绑定数据,绑定多个事件的方法
2018/09/15 Javascript
微信小程序手动添加收货地址省市区联动
2020/05/18 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
2020/07/17 Javascript
jquery实现简单自动轮播图效果
2020/07/29 jQuery
查找Vue中下标的操作(some和findindex)
2020/08/12 Javascript
解决element-ui的下拉框有值却无法选中的情况
2020/11/07 Javascript
Python编程中用close()方法关闭文件的教程
2015/05/24 Python
python获取一组数据里最大值max函数用法实例
2015/05/26 Python
Python中的groupby分组功能的实例代码
2018/07/11 Python
Flask框架信号用法实例分析
2018/07/24 Python
Django密码存储策略分析
2020/01/09 Python
python程序如何进行保存
2020/07/03 Python
HTML5边玩边学（2）基础绘图实现方法
2010/09/21 HTML / CSS
Free People中国官网：波西米亚风格女装服饰
2016/08/30 全球购物
卡骆驰新加坡官网：Crocs新加坡
2018/06/12 全球购物
护理工作感言
2014/01/16 职场文书
《理想》教学反思
2014/02/17 职场文书
简单的离婚协议书范本
2014/11/16 职场文书
司机个人年终总结
2015/03/03 职场文书
幼儿园教师自我评价
2015/03/04 职场文书
商务宴会祝酒词
2015/08/11 职场文书
保护环境建议书作文500字
2015/09/14 职场文书
2015年乡镇组织委员工作总结
2015/10/23 职场文书
python字典的元素访问实例详解
2021/07/21 Python