响应式菜单--@media screen的应用

在不同分辨率的窗口下，菜单显示不同的样式
<!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>
响应式菜单--@media screen的应用

猜你喜欢
