<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background-color: #F9F9F9;
}
#menu-div {
position: absolute;
width: 103px;
height: 30px;
position: absolute;
bottom: 0px;
right: 10%;
background: blue;
z-index: 1001;
cursor: pointer;
}
#tip-div {
position: relative;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background: white;
opacity: 0.4;
z-index: 999;
}
.head {
width: 80%;
height: 50px;
background: blue;
margin-left: auto;
margin-right: auto;
opacity: 0.86;
border-radius: 0 0 140px 140px;
}
.head li {
list-style-type: none;
display: inline-block;
margin-left: 10px;
width: 80px;
}
.head li a {
color: white;
text-decoration: none;
line-height: 50px;
width: 80px;
display: block;
text-align: center;
font-weight: bold;
}
.footer {
height: 30px;
width: 80%;
background: blue;
position: absolute;
bottom: 0;
left: 10%;
z-index: 999;
}
.bottom-menu {
width: 70%;
height: 90px;
left: 10%;
position: absolute;
bottom: 5px;
z-index: 1001;
}
.bottom-menu ul li {
float: left;
border-radius: 50%;
width: 80px;
height: 80px;
background: #6666FF;
margin-left: 20px;
cursor: pointer;
z-index: 999;
}
.bottom-menu ul li:HOVER {
background-color: #00B500;
background-origin: content-box;
}
.bottom-menu ul li a {
display:block;
text-align: center;
width: 80px;
height: 80px;
line-height: 80px;
color: white;
font-weight: bold;
}
h3 {
text-align: center;
line-height: 30px;
color: white;
}
ul li {
list-style-type: none;
}
#menu-div div {
display: none;
border: 1px solid blue;
border-radius: 10px 10px 0 0;
font-size: 16px;
color: white;
text-align: center;
}
#menu-div:HOVER div {
position: absolute;
width: 101px;
height: 210px;
bottom: 30px;
right: 0px;
background: blue;
z-index: 1000;
cursor: pointer;
opacity: 0.55;
display: block;
}
#menu-div li {
width: 100%;
height:30px;
line-height:30px;
background-color: blue;
font-weight: bold;
}
#menu-div .first {
border-radius: 10px 10px 0 0;
}
.main {
width: 80%;
position: absolute;
top: 52px;
left: 10%;
bottom: 90px;
}
</style>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#tip-div").css({
"position" : "relative",
"width" : "100%",
"height" : "100%",
"position" : "absolute",
"top" : "0px",
"left" : "0px",
"background" : "white",
"opacity" : "0.4",
"z-index" : "999"
}).show();
$("em").css({
"width" : "0",
"height" : "0",
"border-left" : "5px solid transparent",
"border-right" : "5px solid transparent",
"border-bottom" : "10px solid red"
});
$("#menu-div").bind("click", function() {
//$("#menu-div div").show();
});
});
</script>
</head>
<body>
<div class="head">
<ul>
<li><a href="#"></a></li>
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单一</a></li>
</ul>
</div>
<div class="main">
<iframe width="100%" height="100%" src="a.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes"></iframe>
</div>
<div class="bottom-menu">
<ul>
<li><a>主题一</a></li>
<li><a>主题一</a></li>
<li><a>主题一</a></li>
<li><a>主题一</a></li>
<li><a>主题一</a></li>
<li><a>主题一</a></li>
<li><a>主题一</a></li>
<li><a>主题一</a></li>
</ul>
</div>
<div class="footer"></div>
<div id="tip-div" style="display: none;"></div>
<div id="menu-div">
<h3>导 航</h3>
<div>
<ul>
<li class="first">权限管理</li>
<li>报警规则</li>
<li>报警信息</li>
<li>节点列表</li>
<li>权限管理</li>
<li>报警规则</li>
</ul>
</div>
</div>
</body>
</html>
