61,115
社区成员
发帖
与我相关
我的任务
分享
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var itemHeight = 40;
var dividerHeight = 1;
function openMenu(obj) {
menuTitleId = obj.id;
menuId = "menu" + menuTitleId.substring(10);
indicatorId = "indicator" + menuTitleId.substring(10);
menu = document.getElementById(menuId);
indicator = document.getElementById(indicatorId);
height = menu.style.height;
if (height == "0px" || height == "") {
childAmount = menu.getElementsByTagName('div').length;
dividerAmount = menu.getElementsByTagName('li').length;
height = childAmount * itemHeight + dividerAmount * dividerHeight;
menu.style.height = height + "px";
indicator.style.transform = "rotate(180deg)";
} else {
menu.style.height = "0px";
indicator.style.transform = "rotate(0deg)";
}
}
</script>
<style>
.menus {
width: 320px;
overflow: hidden;
box-shadow: 1px 1px 4px gray;
/* border-bottom: 1px solid black;
border-top: 1px solid black; */
border: 1px solid gray;
border-radius: 5px;
}
.menus_tit {
width: 647px;
overflow: hidden;
box-shadow: 1px 1px 4px gray;
/* border-bottom: 1px solid black;
border-top: 1px solid black; */
border: 1px solid gray;
border-radius: 5px;
background-position: center center;
text-align: center;
vertical-align: middle;
}
.menu {
overflow: hidden;
height: 0px;
transition: all 0.3s ease;
}
.menu_title {
width: 305px;
height: 50px;
line-height: 50px;
background: #fafafa;
color: gray;
font-size: 20px;
padding-left: 15px;
transition: all 0.3s ease;
cursor: pointer;
position: relative;
font-weight: bold;
overflow: hidden;
}
.menu_tit {
width: 670px;
height: 50px;
line-height: 50px;
background: #fafafa;
color: gray;
font-size: 20px;
transition: all 0.3s ease;
cursor: pointer;
font-weight: bold;
overflow: hidden;
}
.menu_title:hover {
background: #dedede;
color: black;
}
.menu_tit:hover {
background: #dedede;
color: black;
}
.indicator {
width: 50px;
height: 50px;
font-weight: bold;
position: absolute;
right: 0px;
top: 0px;
transition: all 0.3s ease;
font-weight: bold;
text-align: center;
}
.item {
width: 290px;
height: 40px;
line-height: 40px;
background: gray;
color: white;
padding-left: 30px;
transition: all 0.3s ease;
cursor: pointer;
overflow: hidden;
}
.item:hover {
background: #B22222;
}
.item a {
width: 290px;
height: 40px;
display: block;
text-decoration: none;
color: white;
text-decoration: none;
}
.item_divider {
width: 322px;
height: 1px;
background: white;
display: block;
opacity: 0.8;
}
.menu_divider {
width: 100%;
height: 1px;
background: gray;
}
</style>
</head>
<body>
<table width="640" align="center" >
<tr><td width="640" height="55" colspan="2" align="center" valign="baseline"></td></tr><tr><td colspan="2" >
<div align="center" class="menus_tit">
<div align="center" class="menu_tit">
这是标题 </div></div></td></tr></table>
<table align="center">
<tr>
<td>
<table>
<tr>
<td valign="top">
<div class="menus">
<li class="menu_divider"></li>
<div class="menu_title">
表1 </div>
<li class="menu_divider"></li>
<div id="menu_title1" class="menu_title" onclick="openMenu(this)">
选项 1 </div>
<div class="menu" id="menu1">
<div class="item">
<a href="#">Item1</a>
</div>
<li class="item_divider"></li>
<div class="item">
<a href="#">Item2</a>
</div>
<li class="item_divider"></li>
<div class="item">
<a href="#">Item3</a>
</div>
<li class="item_divider"></li>
<div class="item">
<a href="#">Item4</a>
</div>
</div>
<li class="menu_divider"></li>
<div id="menu_title2" class="menu_title" onclick="openMenu(this)">
选项 2 </div>
<div class="menu" id="menu2">
<div class="item">
<a href="#">Item1</a>
</div>
<li class="item_divider"></li>
<div class="item">
<a href="#">Item2</a>
</div>
</div>
<li class="menu_divider"></li>
<div id="menu_title3" class="menu_title" onclick="openMenu(this)">
选项 3 </div>
<div class="menu" id="menu3">
<div class="item">
<a href="#">Item1</a>
</div>
<li class="item_divider"></li>
<div class="item">
<a href="#">Item2</a>
</div>
</div>
<li class="menu_divider"></li>
<div id="menu_title4" class="menu_title" onclick="openMenu(this)">
选项 4 </div>
<div class="menu" id="menu4">
<div class="item">
<a href="#">Item1</a>
</div>
<li class="item_divider"></li>
<div class="item">
<a href="#">Item2</a>
</div>
<li class="item_divider"></li>
<div class="item">
<a href="#">Item3</a>
</div>
</div>
</div>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td valign="top">
<div class="menus">
<li class="menu_divider"></li>
<div class="menu_title">
表2 </div>
<li class="menu_divider"></li>
<div id="menu_title11" class="menu_title" onclick="openMenu(this)">
选项 1 </div>
<div class="menu" id="menu11">
<div class="item">
<a href="#">Item1</a>
</div>
<li class="item_divider"></li>
<div class="item">
<a href="#">Item2</a>
</div>
<li class="item_divider"></li>
<div class="item">
<a href="#">Item3</a>
</div>
<li class="item_divider"></li>
<div class="item">
<a href="#">Item4</a>
</div>
</div>
<li class="menu_divider"></li>
<div id="menu_title12" class="menu_title" onclick="openMenu(this)">
选项 2 </div>
<div class="menu" id="menu12">
<div class="item">
<a href="#">Item1</a>
</div>
<li class="item_divider"></li>
<div class="item">
<a href="#">Item2</a>
</div>
</div>
<li class="menu_divider"></li>
<div id="menu_title13" class="menu_title" onclick="openMenu(this)">
选项 3 </div>
<div class="menu" id="menu13">
<div class="item">
<a href="#">Item1</a>
</div>
<li class="item_divider"></li>
<div class="item">
<a href="#">Item2</a>
</div>
</div>
<li class="menu_divider"></li>
<div id="menu_title14" class="menu_title" onclick="openMenu(this)">
选项 4 </div>
<div class="menu" id="menu14">
<div class="item">
<a href="#">Item1</a>
</div>
<li class="item_divider"></li>
<div class="item">
<a href="#">Item2</a>
</div>
<li class="item_divider"></li>
<div class="item">
<a href="#">Item3</a>
</div>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>