首页
所有分类
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中var声明变量作用域的推断
Dec 16 Javascript
基于jquery ajax 用户无刷新登录方法详解
Apr 28 Javascript
js跨域请求数据的3种常用的方法
Dec 01 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
Aug 05 Javascript
Angularjs上传图片实例详解
Aug 06 Javascript
JS实现可视化文件上传
Sep 08 Javascript
vue 实现边输入边搜索功能的实例讲解
Sep 16 Javascript
使用pm2部署node生产环境的方法步骤
Mar 09 Javascript
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
深入理解Vue keep-alive及实践总结
Aug 21 Javascript
微信小程序实现手势滑动卡片效果
Aug 26 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
Sep 25 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
kubernetes(1) GPU(1) Three.js(1) tree shaking(1) OOP(1) 条形码(1) MutationObserver(1) 分布式追踪(1) HBuilder(1) Express(1)
You might like
发挥语言的威力--融合PHP与ASP
2006/10/09 PHP
用PHP将数据导入到Foxmail的实现代码
2010/09/05 PHP
php中使用Akismet防止垃圾评论的代码
2011/06/10 PHP
php中CI操作多个数据库的代码
2012/07/05 PHP
关于url地址传参数时字符串有回车造成页面脚本赋值失败的解决方法
2013/06/28 PHP
php实现CSV文件导入和导出
2015/10/24 PHP
PHP使用glob方法遍历文件夹下所有文件的实例
2018/10/17 PHP
javascript事件模型代码
2007/07/01 Javascript
javascrip客户端验证文件大小及文件类型并重置上传
2011/01/12 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
2012/12/21 Javascript
js倒计时显示实例
2016/12/11 Javascript
基于require.js的使用(实例讲解)
2017/09/07 Javascript
详解JS构造函数中this和return
2017/09/16 Javascript
JavaScript数组排序reverse()和sort()方法详解
2017/12/24 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
2018/07/23 Javascript
js实现多个倒计时并行 js拼团倒计时
2019/02/25 Javascript
VSCode使用之Vue工程配置eslint
2019/04/30 Javascript
微信小程序授权登录解决方案的代码实例（含未通过授权解决方案）
2019/05/10 Javascript
微信小程序 生成携带参数的二维码
2019/10/23 Javascript
详解vue beforeEach 死循环问题解决方法
2020/02/25 Javascript
[47:04]EG vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
[01:01:01]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第一场 10.29
2020/10/29 DOTA
Python 搭建Web站点之Web服务器与Web框架
2016/11/06 Python
Python使用回溯法子集树模板解决迷宫问题示例
2017/09/01 Python
pycharm下打开、执行并调试scrapy爬虫程序的方法
2017/11/29 Python
Django中的静态文件管理过程解析
2019/08/01 Python
python 进程池pool使用详解
2020/10/15 Python
HTML5实现一个能够移动的小坦克示例代码
2013/09/02 HTML / CSS
Why do we need Unit test
2013/01/03 面试题
艺术应用与设计个人的自我评价
2013/11/23 职场文书
大学信息公开实施方案
2014/03/09 职场文书
2014教师年度思想工作总结
2014/11/10 职场文书
给老婆道歉的话
2015/01/20 职场文书
英文慰问信范文
2015/03/24 职场文书
八年级作文之我的母亲
2019/12/10 职场文书
Vue.js中v-bind指令的用法介绍
2022/03/13 Vue.js