在不同分辨率的窗口下,菜单显示不同的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
@font-face{
font-family:'icon-font';
src: url('font/flat-ui-icons-regular.ttf'), url('font/flat-ui-icons-regular.eot'), url('font/flat-ui-icons-regular.woff'), url('font/flat-ui-icons-regular.svg');
}
*{
margin: 0%;
padding: 0%;
}
body{
background: #FFF;
margin: 5%;
font-family:"Helvetica Neue", sans-serif;
}
#page-nav{
position: relative;
}
#page-nav-list li{
display: block;
float: left;
width: 16.66%;
}
#page-nav-list li a{
display: block;
text-decoration: none;
/* 文字垂直居中,高度为定值*/
text-align: center;
font-size: 1.2em;
line-height: 4em;
color:#FFF;
}
#page-nav-list li a::before{
font-family: 'icon-font';
margin-left: -1em;
margin-right: 1em;
/*content分开写*/
}
#page-nav-list li:nth-child(1) a{
background:#1ABC9C;
}
#page-nav ul li:nth-child(2) a{
background:#2ECC71;
}
#page-nav ul li:nth-child(3) a{
background:#F1C40F;
}
#page-nav ul li:nth-child(4) a{
background:#E67E22;
}
#page-nav ul li:nth-child(5) a{
background:#E74C3C;
}
#page-nav ul li:nth-child(6) a{
background:#9B59B6;
}
#page-nav ul li a:hover{
background:#333;
}
#page-nav ul li:nth-child(1) a::before{
content:"\e62e";
}
#page-nav ul li:nth-child(2) a::before{
content:"\e62a";
}
#page-nav ul li:nth-child(3) a::before{
content:"\e631";
}
#page-nav ul li:nth-child(4) a::before{
content:"\e644";
}
#page-nav ul li:nth-child(5) a::before{
content:"\e62d";
}
#page-nav ul li:nth-child(6) a::before{
content:"\e629";
}
/* 添加媒体查询,屏幕宽度小于980时,图标显示在文字的上方
after元素转换为块元素,调整高度*/
@media screen and (max-width: 979px) {
#page-nav ul li a::before{
display:block;
margin: 0 auto;
line-height: 1;
padding-top: 2em;
}
}
/* 当屏幕宽度小于768像素时,隐藏文字,只显示图标,并将菜单的图标从动态的4em变为
固定的80px,此时图标的文字大小也不能使用em了,因为在父元素li的font-size为0的
情况下,任何大小的em的数值均为0,在此将其设置为20px*/
@media screen and (max-width: 767px){
#page-nav ul li a{
font-size: 0;
height: 80px;
}
#page-nav ul li a::before{
font-size: 20px;
line-height: 80px;
text-align: center;
margin: 0%;
padding: 0%; /*继承padding-top: 2em;重置*/
}
}
/* 480px时,将菜单显示为一个菜单图标,点击时展开全部的图标,使用JS动态吃哈如图标*/
/* 默认情况下不显示*/
#menutoggle{
display:none;
}
@media screen and (max-width: 480px) {
#menutoggle{
display:block;
width: 100%;
height: 60px;
text-align: left;
text-indent: 60px;
font-size: 1.5em;
color: #FFF;
cursor: pointer;
background:#000;
border:none;/*去掉button的边框*/
position: relative;/* 用于按钮图标的定位*/
}
/* 绘制menu之前的三条横线*/
#menutoggle::after{
content: '';
width:22px;
box-sizing: border-box;
box-shadow: 0 10px 0 2px #FFF, 0 20px 0 2px #FFF, 0 30px 0 2px;
position: absolute;
left: 20px;
top: 10px;
}
/*隐藏列表,并将li横向显示*/
#page-nav-list{
display: none;
}
#page-nav-list li{
width: 100%;/* 继承上一步的样式,只有图标纵向排列*/
}
/* 显示图标和文字,图标在左,文字在右*/
#page-nav ul li a{
text-align:left;
font-size:1.2em;
text-indent:3.5em;
}
#page-nav ul li a::before{
position:absolute;
left:-2em;
}
/* + 代表相邻, 创建显示类,点击menu之后菜单显示或者消失*/
#menutoggle.active + ul{
display: block;
}
}
</style>
</head>
<body>
<nav id="page-nav">
<ul id="page-nav-list">
<li><a href="" id="home">Home</a></li>
<li><a href="" id="photo">Photo</a></li>
<li><a href="" id="user">User</a></li>
<li><a href="" id="document">Document</a></li>
<li><a href="" id="chat">Chat</a></li>
<li><a href="" id="video">Video</a></li>
</ul>
</nav>
<script type="text/javascript">
var nav = document.getElementById('page-nav');
var navlist = document.getElementById('page-nav-list');
nav.insertAdjacentHTML('afterBegin','<button id = "menutoggle">Metu</button>')
var menutoggle = document.getElementById('menutoggle');
menutoggle.onclick = function() {
//navlist.style.display只能判断将dispaly直接写于标签的情况,如<ul style="display :none">
//而后者可以对该元素的所有的css样式进行计算之后加以判断,匹配所有none的情况
if(window.getComputedStyle(navlist).display === "none"){
menutoggle.className = "active";
}else{
menutoggle.className = "";
}
}
</script>
</body>
</html>