使用media Queries實現一個響應式的菜單 - huang0925－IT工程師數位筆記本

文章出處

Media queries是CSS3引入的一個特性，使用它可以方便的實現各種響應式效果。在這個示例中我們將會使用media queries實現一個響應式的菜單。這個菜單會根據當前瀏覽器屏幕的大小變化而自動的呈現出不同的樣式。如果瀏覽器屏幕大于800px，菜單則會顯示在頁面左側；如果瀏覽器屏幕介于401px到800px之間，菜單則會顯示在頁面上方，與其他內容是上下關系；如果屏幕小于400px，則菜單仍在頁面上方，但是菜單會變為下拉列表形式。

預覽地址: http://htmlpreview.github.io/?https://github.com/huangbowen521/ResponsiveDesignTrial/blob/master/responsiveMenu.html

要實現這樣的特效，首先要創建一個下拉列表形式的菜單，如下所示。

<div class="small-menu">
    <form>
        <select name="URL">
            <option value="home.html">我的博客首頁</option>
            <option value="blog.html">我的博客列表</option>
            <option value="whoami.html">我的個人簡介</option>
        </select>
    </form>
</div>

然后還要創建一個使用了ul和li元素的菜單，放置在上面菜單的后面。

<div class="large-menu">
    <ul>
        <li>
            <a href="home.html">我的博客首頁</a>
        </li>
        <li>
            <a href="blog.html">我的博客列表</a>
        </li>
        <li>
            <a href="whoami.html">我的個人簡介</a>
        </li>
    </ul>
</div>

最后再加一個div元素，用來放置一些文本以填充頁面其他部分。

<div class="content">
    <p>
        上周五的時候我對某個項目做了一個更改，將里面的構建腳本由maven換成了gradle。原因之一是因為maven的配置太繁瑣，由于其引入了lifecycle的機制，
        導致其不夠靈活，而gradle作為用groovy寫的DSL，代碼清爽、簡單、靈活。原因之二是我們所有的項目構建都換成了gradle，為了保持技術棧單一，此項目
        做遷移也是大勢所趨。</p>
</div>

接下來就要設置media queries了，指定在不同屏幕尺寸下菜單表現出不同的樣式。

當屏幕寬度小于400px時，我們需要隱藏ul菜單，顯現下拉框菜單。

@media screen and ( max-width: 400px ) {

        .small-menu {
            display: inline;
        }

        .large-menu {
            display: none;
        }
    }

當屏幕介于401px和800px時，顯示ul菜單，并且將其設置為水平排列。

@media screen and ( min-width: 401px ) and ( max-width: 800px ) {

    .small-menu {
        display: none;
    }

    .large-menu {
        display: inline;
        width: 100%;
    }

    .large-menu ul {
        list-style-type: none;
    }

    .large-menu ul li {
        display: inline;
    }

    .content {
        width: 100%;
    }
}

當屏幕尺寸大于800px時，則將ul菜單設置為頁面左邊，并且菜單排列為垂直排列。

@media screen and ( min-width: 801px ) {

    .small-menu {
        display: none;
    }

    .large-menu {
        display: inline;
        float: left;
        width: 20%;
    }

    .content {
        float: right;
        width: 80%;

    }
}