使用media Queries實現一個響應式的選單

黃博文發表於2013-12-15

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

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

要實現這樣的特效，首先要建立一個下拉選單形式的選單，如下所示。

1
2
3
4
5
6
7
8
9

<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元素的選單，放置在上面選單的後面。

1
2
3
4
5
6
7
8
9
10
11
12
13

<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元素，用來放置一些文字以填充頁面其他部分。

1
2
3
4
5
6

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

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

當螢幕寬度小於400px時，我們需要隱藏ul選單，顯現下拉框選單。

1
2
3
4
5
6
7
8
9
10

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

        .small-menu {
            display: inline;
        }

        .large-menu {
            display: none;
        }
    }

當螢幕介於401px和800px時，顯示ul選單，並且將其設定為水平排列。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

@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選單設定為頁面左邊，並且選單排列為垂直排列。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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

    .small-menu {
        display: none;
    }

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

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

    }
}

這樣就簡單實現了一個響應式的選單，其實主要就是根據media queries來設定screen的條件，根據不同screen寬度來給頁面元素設定對應的樣式。當螢幕寬度發生變化時，會自動應用相應的樣式。

程式碼已經被放置到了github上了，地址是https://github.com/huangbowen521/ResponsiveDesignTrial

相關文章