JS实现可编辑的后台管理菜单功能【附实现可编辑的后台管理菜单功能【附demo源码下载】源码下载】
本文实例讲述了JS实现可编辑的后台管理菜单功能。分享给大家供大家参考,具体如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS可编辑后台菜单</title>
<style type="text/css">
body {
font-size: 12px;
}
ul, li, h2 {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
#top {
width: 900px;
height: 40px;
margin: 0 auto;
background-color: #CCCC00
}
#top h2 {
width: 150px;
height: 40px;
background-color: #99CC00;
float: left;
font-size: 14px;
text-align: center;
line-height: 40px;
}
#topTags {
width: 750px;
height: 40px;
margin: 0 auto;
background-color: #CCCC00;
float: left
}
#topTags ul li {
float: left;
width: 100px;
height: 25px;
margin-right: 5px;
display: block;
text-align: center;
cursor: pointer;
padding-top: 15px;
}
#main {
width: 900px;
height: 500px;
margin: 0 auto;
background-color: #F5F7E6;
}
#leftMenu {
width: 150px;
height: 500px;
background-color: #009900;
float: left
}
#leftMenu ul {
margin: 10px;
}
#leftMenu ul li {
width: 130px;
height: 30px;
display: block;
background: #99CC00;
cursor: pointer;
line-height: 30px;
text-align: center;
margin-bottom: 5px;
}
#leftMenu ul li a {
color: #000000;
text-decoration: none;
}
#content {