響應式布局之網站頭部導航

 愛編程愛分享，原創文章，轉載請注明出處，謝謝！http://www.cnblogs.com/fozero/p/6187798.html 

網頁支持響應式布局的好處我就不說了，這里我通過寫一個簡單的網站導航來學習響應布局的開發

 

Meta標簽定義

<!--使用 viewport meta 標簽在手機瀏覽器上控制布局-->
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
        <!--通過快捷方式打開時全屏顯示-->
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <!--隱藏狀態欄-->
        <meta name="apple-mobile-web-app-status-bar-style" content="blank" />
        <!--iPhone會將看起來像電話號碼的數字添加電話連接，應當關閉-->
        <meta name="format-detection" content="telephone=no" />

定義body中的結構

<div class="nav">
                <ul>
                    <li>
                        <a href="#" class="actived">網站首頁</a>
                    </li>
                    <li>
                        <a href="#">公司案例</a>
                    </li>
                    <li>
                        <a href="#">公司相冊</a>
                    </li>
                    <li>
                        <a href="#">團隊博客</a>
                    </li>
                    <li>
                        <a href="#">關於我們</a>
                    </li>
                </ul>
                <img src="img/more_black.png" />
            </div>

定義樣式

<style type="text/css">
            body {
                margin: 0;
                padding: 0;
            }
            
            .nav {
                position: relative;
                background-color: #fff;
                height: 78px;
                width: 100%;
                border-bottom: 1px solid #DADADA;
            }
            
            .nav img {
                position: absolute;
                right: 20px;
                top: 30px;
                width: 28px;
                display: none;
            }
            
            .nav ul {
                list-style: none;
                margin: 0;
                padding: 0;
                text-align: center;
            }
            
            .nav ul li {
                height: 78px;
                width: 168px;
                line-height: 78px;
                text-align: center;
                display: inline-block;
            }
            
            .nav ul li:hover {
                cursor: pointer;
            }
            
            .nav ul li a {
                text-decoration: none;
                color: #666;
                padding-bottom: 8px;
            }
            
            .nav ul li .actived {
                border-bottom: 3px solid #EE5C42;
            }
           
        </style>

 

查看效果圖

 

可以看到導航已經顯示出來了，我們給導航加上點擊事件以改變導航選中樣式

<script>
            $(function() {
                $(".nav ul li").click(function() {//導航點擊
                    $(".nav ul li a").removeClass("actived");
                    $(this).children("a").addClass("actived");
                });
            });
        </script>

 

那如果說我們想要支持響應式布局該怎么做呢？

上面最開始我們已經添加支持手機的Meta相關標簽元素了，接着我們通過媒體查詢來使我們手機支持響應式導航顯示

主要用到@media only screen and (max-width: 878px) {}   設置當屏幕寬度小於878px的時候執行里面的樣式

這里我們先在右上角顯示一個圖標，然后點擊圖標的時候顯示右側的導航，再點擊圖標隱藏右側的導航

我們繼續在Style標簽內添加以下樣式

/*媒體查詢*/
            /*屏幕寬度小於878px的時候執行里面的css*/
            
            @media only screen and (max-width: 878px) {
                .nav img {
                    display: inline;
                }
                .nav ul {
                    position: absolute;
                    right: 0;
                    text-align: right;
                    top: 78px;
                    display: none;
                }
                .nav ul li {
                    display: block;
                    border: 1px solid #dadada;
                    height: 58px;
                    line-height: 58px;
                    width: 98px;
                }
                .nav ul li a {
                    display: block;
                    padding-bottom: 0;
                }
                .nav ul li .actived {
                    border-bottom: none;
                }
                .nav ul li a:hover {
                    background-color: #6E6E6E;
                    color: #fff;
                }
            }

 

最后將js添加上去，用於操作顯示或隱藏下方導航列表

$(".nav img").click(function() {//顯示或隱藏下方導航列表
                    $(".nav ul").slideToggle(100);
                });

 

OK，完成。

我們來看下效果，在手機上面打開網頁顯示導航如下圖

點擊右側圖標顯示導航效果