响应式菜单

来源：互联网发布：编程小白学 python 编辑：程序博客网时间：2024/05/29 03:58

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>响应式菜单</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
width: 100%;
height: 100%;
}
.menu{
width: 100%;
}
ul{
width: 100%;
list-style-type: none;
text-align: center;
}
li{
float: left;
display: block;
background-color: #ccc;
margin: 0 2%;
width: 16%;
height: 70px;
line-height: 70px;
}
.toplogo{
display: none;
font-size: 50px;
font-weight: bold;
text-align: center;
}
.logo{
font-size: 50px;
font-weight: bold;
background-color: #fff;
}
.image{
width:6%;
height: 6%;
float: right;
margin: 20px 20px 0 0;
display: none;
}
@media screen and (max-width: 950px) {
li{
width: 23%;
margin: 20px 1%;
}
.logo{
display: none;
}
.toplogo{
display: block;
}
}
@media screen and (max-width: 600px) {
ul{
display: none;
}
li{
width: 100%;
margin: 10px 0;
}
.toplogo{
display: block;
}
.image{
display: block;
}
}
</style>
<script type="text/javascript">
window.onload=function(){
var image=document.getElementById("image");
var ul=document.getElementById("ul");
image.onclick=function(){
//ul的状态要放到点击之后取，否则它做到的状态一直是window加载之后的那一状态
var display=attrStyle(ul,"display");
if(display=="none"){
ul.style.display="block";
}else{
ul.style.display="none";
}
}
}
function attrStyle(elem,attr){

if(elem.attr){

//若样式存在于html中,优先获取

return elem.style[attr];

}else if(elem.currentStyle){

//IE下获取CSS属性最终样式(同于CSS优先级)

return elem.currentStyle[attr];

}else if(document.defaultView && document.defaultView.getComputedStyle){

//W3C标准方法获取CSS属性最终样式(同于CSS优先级)

//注意,此法属性原格式(text-align)获取的,故要转换一下

attr=attr.replace(/([A-Z])/g,'-$1').toLowerCase();

//获取样式对象并获取属性值

return document.defaultView.getComputedStyle(elem,null).getPropertyValue(attr);

}else{

return null;

}

}

</script>
</head>
<body>

<div class="menu">
<div class="toplogo">慕课网
<img class="image" id="image" src="image/menu.jpg" alt="菜单栏" />
</div>
<ul id="ul">
<li>课程大厅</li>
<li>学习中心</li>
<li class="logo">慕课网</li>
<li>个人中心</li>
<li>关于我们</li>
</ul>
</div>

</body>
</html>

0 0