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

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

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

运行效果截图如下：

在线演示地址如下：

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

具体代码如下：

后台左侧菜单


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
}





 

 

 
 

 

  
关于我们
 

  

 

 

  

  
公司简介
 

  

  
荣誉资质
 

  

  
分类管理
 

  

  
子类管理
 

  

 

 

  
新闻中心
 

  

 

 

  

  
公司新闻
 

  

  
分类管理
 

  

  
子类管理
 

  

 

 

  
产品中心
 

  

 

 

  

  
产品展示
 

  

  
最新产品
 

  

  
分类管理
 

  

  
子类管理
 

  

 

 

  
客户服务
 

  

 

 

  

  
客户服务
 

  

  
分类管理
 

  

  
子类管理
 

  

 

 

  
经典案例
 

  

 

 

  

  
分类管理
 

  

  
子类管理
 

  

 

 

  
高级管理
 

  

 

 

  

  
广告管理
 

  

  
访问统计
 

  

  
邮件发送设置
 

  

  
联系部门
 

  

  
用户留言
 

  

  
招聘职位
 

  

  
应聘人员
 

  

  
留言簿
 

  

  
产品订购
 

  

  
链接管理
 

  

  
文件管理
 

  

  
信息转移
 

  

 

 

  
系统管理
 

  

 

 

  

  
基本设置
 

  

  
样式管理
 

  

  
栏目管理
 

  

  
功能管理
 

  

  
菜单管理
 

  

  
首页设置
 

  

  
管理员列表
 

  

 

 

  
个人管理
 

  

 

 

  

  
修改口令
 

  

  
退出系统
 

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