纵向折叠二级菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="Cov" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>lefter</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style/style.css" type="text/css" rel="Stylesheet" />
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/myjs.js" type="text/javascript"></script>
</head>
<body id="lefter">
<strong id="callName">管理员：admin</strong>
<ul id="leftMenu">
<li class="li1">菜单菜单1</li>
<li class="li2">
<ul>
<li><a href="">菜单菜单</a>
</li>
<li><a href="">菜单菜单</a>
</li>
<li><a href="">菜单菜单</a>
</li>
<li><a href="">菜单菜单</a>
</li>
</ul>
</li>
<li class="li1">菜单菜单2</li>
<li class="li2">
<ul>
<li><a href="">菜单菜单</a>
</li>
<li><a href="">菜单菜单</a>
</li>
<li><a href="">菜单菜单</a>
</li>
<li><a href="">菜单菜单</a>
</li>
</ul>
</li>
<li class="li1">菜单菜单3</li>
<li class="li2">
<ul>
<li><a href="">菜单菜单</a>
</li>
<li><a href="">菜单菜单</a>
</li>
<li><a href="">菜单菜单</a>
</li>
<li><a href="">菜单菜单</a>
</li>
</ul>
</li>
<li class="li1">菜单菜单4</li>
<li class="li2">
<ul>
<li><a href="">菜单菜单</a>
</li>
<li><a href="">菜单菜单</a>
</li>
<li><a href="">菜单菜单</a>
</li>
<li><a href="">菜单菜单</a>
</li>
</ul>
</li>
</ul>
</body>
</html>
====================================
/* 通用样式 */
*,
form {
margin: 0;
padding: 0;
}
img {
border: 0
}
body {
font-family: 宋体, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #3d3d3d;
background: #fff;
width: 100%;
height: 100%;
margin: 0 auto 0 auto;
}
ul {
list-style: none;
}
a {
text-decoration: none;
margin: 0 2px 0 2px;
color: #000;
}
a:hover {
text-decoration: underline;
}
html {
height: 100%;
width: 100%;
}
#Cov {
overflow: hidden;
}
#loginBody {
background: url(../images/loginBg.jpg) no-repeat left top;
position: relative;
}
#loginBox {
position: absolute;
top: 230px;
left: 330px;
width: 340px;
}
#loginBox li {
height: 30px;
}
#loginBox li span {
display: block;
width: 80px;
height: 26px;
line-height: 26px;
text-align: right;
float: left;
padding-right: 8px;
color: #FFF
}
.txtSty {
float: left;
width: 200px;
height: 24px;
line-height: 24px;
border: 1px #1570b2 solid;
background: #dcedf9;
font-size: 14px;
}
.txtSty2 {
border: 1px #5eb5f4 solid;
background: #FFF;
}
#img_code {
width: 100px;
}
#loginBut {
width: 101px;
height: 38px;
background: url(../images/loginBut.gif) no-repeat;
border: 0;
float: right;
margin: 20px 45px 0 0;
}
#header {
height: 87px;
background: url(../images/topBg.jpg) repeat-x;
}
#headerMenu {
float: right;
width: 100px;
padding-top: 63px;
}
#headerMenu li {
float: left;
margin-right: 10px;
}
#headerMenu li a {
color: #FFF
}
#drag {
width: 7px;
height: 100%;
text-align: center;
background: url(../images/dragBg.gif) repeat-y;
}
#dgimg {
cursor: pointer;
margin-top: 150px;
}
#lefter {
width: 186px;
height: 100%;
background: #0a3a61;
text-align: center;
}
#callName {
display: block;
width: 186px;
height: 31px;
line-height: 30px;
background: url(../images/menuBg1.jpg) no-repeat;
color: #FFF
}
#leftMenu {
padding-top: 10px;
width: 186px;
}
.li1 {
width: 100%;
height: 31px;
line-height: 31px;
font-weight: bold;
color: #fff;
background: url(../images/menuBg2.jpg);
cursor: pointer;
margin-bottom: 1px;
}
.li2 {
width: 100%;
display: none;
}
.li2 ul li {
width: 100%;
height: 31px;
line-height: 31px;
color: #fff;
background: url(../images/menuBg3.jpg);
cursor: pointer;
margin-bottom: 3px;
}
.li1 a {
color: #FFF
}
.li2 a {
color: #a9d5e0
}
#main {
width: 99.6%;
height: 99.6%;
border: 1px #FFF solid;
background: #d9e5ee;
text-align: center;
}
.myTab {
width: 99.3%;
margin-top: 4px;
overflow: hidden;
position: relative;
z-index: 10;
margin-bottom: -1px;
}
.myTab .tab1 {
display: inline;
height: 25px;
line-height: 25px;
background: url(../images/tab1_l.gif);
float: left;
margin-right: 2px;
padding-left: 5px;
}
.myTab .tab2 {
display: inline;
height: 25px;
line-height: 25px;
background: url(../images/tab2_l.gif);
float: left;
margin-right: 2px;
padding-left: 5px;
}
.myTab .tab1 a,
.myTab .tab2 a {
float: left;
display: block;
width: 80px;
text-align: center;
font-weight: bold;
color: #134a74;
white-space: nowrap;
margin-top: 2px;
}
.myTab .tab2 a {
font-weight: normal;
color: #a5afba;
}
.myTab .tab1 img,
.myTab .tab2 img {
float: left;
}
.cBox {
border: 1px #c8d6e1 solid;
background: #FFF;
width: 99%;
height: 94%;
overflow: auto;
}
.cBox .tabCon {
width: 97%;
margin: 10px;
text-align: left;
display: none;
}
.conT {
color: #7a8791;
padding: 2px 8px;
display: block;
width: 60px;
text-align: center;
white-space: nowrap;
margin: 0 0 -10px 10px;
position: relative;
z-index: 10;
background: #FFF;
}
.conBox {
width: 100%;
overflow: auto;
border: 1px #e6eaed solid;
margin-bottom: 10px;
}
.searForm {
margin: 10px 5px 5px 5px;
background: #F9F9F9
}
.searForm li {
height: 26px;
line-height: 26px;
border-bottom: 1px #c8d6e1 dashed;
}
.searForm li.oddColor {
background: #e8eff5;
}
.searForm li .searLab {
float: left;
display: block;
width: 100px;
text-align: right;
padding-right: 5px;
}
.searForm li .searInput {
float: left;
display: block;
text-align: left;
}
.table1 {
border: 1px #d3dfda solid;
width: 98%;
margin: 10px auto 5px auto;
background: #FFF;
}
.table1 thead {
height: 24px;
width: 100%;
}
.table1 thead td {
background: url(../images/ls4.gif) repeat-x;
font-weight: bold;
color: #2d2d2d
}
.table1 tbody tr {
height: 24px;
line-height: 24px;
background: #f9f9f9;
}
.table1 tbody tr.oddColor {
background: #e8eff5;
}
.table1 tbody tr.overColor {
background: #f2ffc0;
}
.table1 tfoot td {
height: 26px;
line-height: 26px;
background: #eef0e7;
text-align: right;
padding-right: 20px;
}
.alignL {
text-align: left;
padding-left: 10px;
}
.alignM {
text-align: center;
}
.alignR {
text-align: right;
padding-right: 10px;
}
=============================
$(function(){
$(".li2").slideUp("slow");
$(".li2:eq(0)").slideDown("slow");
$(".li1").bind("click",function(){
var flag=$(this).next().css("display");
$(".li2").slideUp("slow");
if(flag=='none'){
$(this).next().slideDown("slow");
}
});
});
==================================================
