CSS高級篇：響應式導航條

我很懶，懶到什么程度，算了，懶得說了......

直接上代碼

body:

 

<div class="container">
    <ul>
        <li>首頁</li>
        <li>貼吧</li>
        <li>糯米</li>
        <li>翻譯</li>
        <li>地圖</li>
        <li>圖片</li>
        <li>知道</li>
    </ul>
    <div class="menu">〓</div>
</div>    

css:

<style type="text/css">
    * {
        margin: 0px;
        padding: 0px;
    }
            
    .container {
        background-color: #333;
        height: 48px;
        position: relative;
    }
            
    .container ul {
        padding-left: 100px;
    }
            
    .container ul li {
        list-style: none;
        float: left;
        width: 100px;
        color: rgba(255, 255, 255, 0.8);
        text-align: center;
        height: 48px;
        line-height: 48px;
        cursor: pointer;
    }
            
    .container ul li:hover {
        color: rgba(255, 255, 255, 1);
    }
            
    .container .menu {
        width: 40px;
        height: 30px;
        border: 2px solid white;
        position: absolute;
        line-height: 30px;
        text-align: center;
        border-radius: 6px;
        color: white;
        cursor: pointer;
        right: 40px;
        top: calc((48px - 34px) / 2);
        display: none;
        -webkit-user-select: none;
    }
            
    @media all and (max-width: 767px) {
            .container .menu {
            display: block;
        }
    .container ul {
            position: absolute;
            top: 50px;
            padding-left: 0px;
            right: 10px;
            display: none;
        }
        .container ul li {
            float: none;
            background-color: #333;
            border-radius: 4px;
            margin-bottom: 1px;
        }
        .container ul li:hover {
            background-color: #333;
            opacity: 0.9;
        }
    }
</style>

額，由於出了點小問題，so，加了點script代碼

script:

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(".menu").toggle(
            function() {
                $(this).css("background-color", "rgba(255,255,255,0.5)");
                $(".container ul").slideDown(200);
            },
            function() {
                $(this).css("background-color", "transparent");
                $(".container ul").slideUp(200);
            }
        );
        $(window).resize(function() {
            if($(this).width() > 767) $(".container ul").show(500);    
        });
</script>

 

PC端效果：

移動端效果：

OK，完活。 O(∩_∩)O