金魚都能懂的網頁設計入門-RWD選單製作

發表於 更新於 分類於 閱讀次數：
金魚都能懂的網頁設計入門-第二十二天 - RWD選單製作

RWD選單的歩驟會比較長一點，
第一需要知道媒體查詢，
第二需要知道在手機選單要使用什麼方法來控制
第三手機上面要顯示漢堡選單，在桌機上面又要消失，桌機要呈現的外歡又不太一樣.
先從手機畫面開始：

先以手機為主，接著再做桌機的畫面，好處，因大部份人是用手機上網，因手機電力不像電腦始終有電力，效能可能也不如桌機，不用擔心先讀取手機再讀取桌機較被覆寫的問題，多經過一道處理手續，會比較耗電。

再始囉～ 先做架構：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>金魚都能懂的網頁設計入門-第二十二天 - RWD選單製作</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0 ;
            list-style: none;
        }
    </style>
</head>
<body>
    <input type="checkbox" id="menu_control">
     <div class="header">
        <!-- logo 圖片不用做太大 ，大約60*40 -->
        <h1 class="logo">
            <!-- 通常logo 會有個超連結 -->
            <a href="#">
                <img src="https://picsum.photos/60/40/?random=3">  
            </a>
        </h1>
        <!-- 第三 在手機上面要顯示漢堡選單 ，製作過程： 先使用一個 label 裹面用 for 屬性，包一個span放 文字 ,  label 是跟表單有關係，可以用來控制input  , input 放在前方，使用checkbox類型 -->
        <label for="menu_control">
            <span>選單</span>
        </label>
            
        <!-- 第二做選單 a[#]{link} -->
        <nav>
            <a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a>
        </nav>

    </div>
</body>
</html>

完成RWD選單製作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>金魚都能懂的網頁設計入門-第二十二天 - RWD選單製作</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0 ;
            list-style: none;
        }
        #menu_control{
            position: absolute;
            z-index: -2; 
            /*讓check box 到後面去不要出現在畫面上  */
            opacity: 0;/*確保check box 永遠消失  */
        } 
        .header{
            height: 50px;
            background-color: #ccc;
            position: relative;
        }
        .logo{
            width: 60px;
            height: 40px;
            margin-left: 10px;
        }
        .logo a{
            display: block;
            height: 40px;
        }
        .logo img{
            display:block;
        }
        .menu_btn{
            width: 40px;
            height: 40px;
            background-color: #000;
            display: block;
            position: absolute;
            top: 5px;
            right: 10px;
        }
        .menu_btn span{
            /* 選單文字不要秀出來，把文字消失 */
            opacity: 0; 
            width: 1px;
            height: 1px;
            display: block;
            overflow: hidden;
        }
        /* 第四做漢堡圖裹面一根一根的部份，做用偽元素來製作 */
        .menu_btn::before{
            content: "";
            position: absolute;
            height: 2px;
            left: 2px;
            width: 36px;
            /* 36＋2+2 = 40px */
            background-color: #aaa;
            /* 放置正中間 ,垂直置中top:0 bottom:0  margin: auto*/
            top:0;
            bottom: 0;
            margin: auto; 
            /* 利用 box-shadow來製作另外二根 */
            box-shadow: 0px 8px 0px #aaa
           ,0px -8px 0px #aaa;
        }
        /* 第五做處理選單的部份,通常會在手機上出現，然後是滿版高度 */
        nav{
            width: 80%;
            /*height: 100vh;  view port height視窗高 */
            /* 高度用計算機來算, 用 100vh,扣掉header 的50px */
            height: calc(100vh - 50px);
            background-color: #2a2923;
            /* 設定絕對定位，定在header裹正 */
            position: absolute;
            top: 50px;
            /* left:0; */
            /* 第七 先讓選單離闕視窗standby，設定left: -100% */
            left: -100%;
            transition: .5s ;
        }
        /* 第六 處理選單超連結的部份 */
        nav a{
            display: block; /* 縰向排列 */
            
            text-decoration: none;
            color: #a6e22c;
            padding: 10px 20px;
            border-bottom: 1px solid #a6e22c;

        }
        /* 選到後面的header 再選到nav */
        #menu_control:checked ~ .header nav{
            left: 0;
        }
        /* 第八 處理桌機的部份，使用media query */
        @media screen and (min-width:768px) {
            .menu_btn{ display:none;}
            .header{
                display: flex;
                justify-content: space-between; 
                /* 讓桌機的選單靠右 */
                background-color: #2a2923;
                /* 垂直置中 */
                align-items: center;
            }
            nav{
                position: relative; 
                /* 做回相對定位 */
                left: 0;
                /* 不要位移 */
                display: flex;
                width: auto;
                height: auto;
                /* 因為折行 ，沒有在nav上，跑到下面了，所以 top 改回0 */
                top:0;
                background-color: transparent;
                border-bottom: none;
                
            }
        }
    </style>
</head>
<body>
    <input type="checkbox" id="menu_control">
     <div class="header">
        <!-- logo 圖片不用做太大 ，大約60*40 -->
        <h1 class="logo">
            <!-- 通常logo 會有個超連結 -->
            <a href="#">
                <img src="https://picsum.photos/60/40/?random=3">  
            </a>
        </h1>
        <!-- 第三 在手機上面要顯示漢堡選單 ，製作過程： 先使用一個 label 裹面用 for 屬性，包一個span放 文字 ,  label 是跟表單有關係，可以用來控制input  , input 放在前方，使用checkbox類型 -->
        <label for="menu_control" class="menu_btn">
            <span>選單</span>
        </label>
            
        <!-- 第二做選單 a[#]{link} -->
        <nav>
            <a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a>
        </nav>

    </div>
</body>
</html>

加上昨天製作的RWD 網頁

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 金魚都能懂的網頁設計入門-第二十一天 - RWD 試排版</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }


        #menu_control{
            position: absolute;
            z-index: -2; 
            /*讓check box 到後面去不要出現在畫面上  */
            opacity: 0;/*確保check box 永遠消失  */
        } 
        .header{
            height: 50px;
            background-color: #ccc;
            position: relative;
        }
        .logo{
            width: 60px;
            height: 40px;
            margin-left: 10px;
        }
        .logo a{
            display: block;
            height: 40px;
        }
        .logo img{
            display:block;
        }
        .menu_btn{
            width: 40px;
            height: 40px;
            background-color: #000;
            display: block;
            position: absolute;
            top: 5px;
            right: 10px;
        }
        .menu_btn span{
            /* 選單文字不要秀出來，把文字消失 */
            opacity: 0; 
            width: 1px;
            height: 1px;
            display: block;
            overflow: hidden;
        }
        /* 第四做漢堡圖裹面一根一根的部份，做用偽元素來製作 */
        .menu_btn::before{
            content: "";
            position: absolute;
            height: 2px;
            left: 2px;
            width: 36px;
            /* 36＋2+2 = 40px */
            background-color: #aaa;
            /* 放置正中間 ,垂直置中top:0 bottom:0  margin: auto*/
            top:0;
            bottom: 0;
            margin: auto; 
            /* 利用 box-shadow來製作另外二根 */
            box-shadow: 0px 8px 0px #aaa
           ,0px -8px 0px #aaa;
        }
        /* 第五做處理選單的部份,通常會在手機上出現，然後是滿版高度 */
        nav{
            width: 80%;
            /*height: 100vh;  view port height視窗高 */
            /* 高度用計算機來算, 用 100vh,扣掉header 的50px */
            height: calc(100vh - 50px);
            background-color: #2a2923;
            /* 設定絕對定位，定在header裹正 */
            position: absolute;
            top: 50px;
            /* left:0; */
            /* 第七 先讓選單離闕視窗standby，設定left: -100% */
            left: -100%;
            transition: .5s ;
        }
        /* 第六 處理選單超連結的部份 */
        nav a{
            display: block; /* 縰向排列 */
            
            text-decoration: none;
            color: #a6e22c;
            padding: 10px 20px;
            border-bottom: 1px solid #a6e22c;

        }
        /* 選到後面的header 再選到nav */
        #menu_control:checked ~ .header nav{
            left: 0;
        }
        /* 第八 處理桌機的部份，使用media query */
        @media screen and (min-width:768px) {
            .menu_btn{ display:none;}
            .header{
                display: flex;
                justify-content: space-between; 
                /* 讓桌機的選單靠右 */
                background-color: #2a2923;
                /* 垂直置中 */
                align-items: center;
            }
            nav{
                position: relative; 
                /* 做回相對定位 */
                left: 0;
                /* 不要位移 */
                display: flex;
                width: auto;
                height: auto;
                /* 因為折行 ，沒有在nav上，跑到下面了，所以 top 改回0 */
                top:0;
                background-color: transparent;
                border-bottom: none;
                
            }
        }






        /* 因為圖片垂直對齊方式是base-line,所以圖片下面會有一點點空白，解決方式就是： 把圖片先抓出來單獨設定垂直對齊方式，可以是bottom top middle , 就是不要 base-line ,這樣圖片就會黏緊緊*/
        
        img{
            vertical-align: bottom;
        }
        .banner img{
            width: 100%;
        }
        .title{
            margin: 0 0px 20px;
            padding: 30px 10px;
            background-color: #ccc;
        }
        .title h2{
            text-align: center;
            font-size: 46px;
        }
        .title p{
            font-size: 22px;
            text-align: center;
        }
        .item{
            margin: 0 10px 40px;
        }
        .item h3{
            font-size: 24px;
            text-align: center;
        }
        .item .pic img{
            width: 100%;
        }
        .footer{
            background-color: #333;
            color: #aaa;
            text-align: center;
            padding: 10px 0px;
        }
        .item-group{
            width: 100%;
            /* 為了桌機版設定最大寬度 */
            max-width: 1400px;
            margin: auto;
        }

        .service{
            margin: 60px 0px;
            background-color:#ffa ;
        }

        /* 以上為手機版設定
        再來用 media query 來設定桌機版
        */
        /* 先設定平版  768px */
        @media screen and (min-width: 768px){
            .item-group{
        display: flex;}
            .service .item{
                display: flex;
            }
            .service .item .pic,
            .service .item .text{
                width:50%;
                margin: 0;
            }
            /* 手機版的 margin ok 但到桌機版下方會多出來，所以要單獨設定 margin */
            .service .item{margin: 0px;}
            
            .service .item .text{
                /* 設定右邊文字區土戈心一為橫排，文字置中 先以column 顯示，才能置中flex-direction: column; */
                display: flex;
                padding: 0px 20px;
                flex-direction: column;
                justify-content: center;
                /* 因為整個service 有點偏左歪去，所以要設定 box-size: border-box */
                box-sizing: border-box;

            }

        }
    
    </style>
</head>
<body>
    <!-- 第九 把選單放到前一天製作的RWD html -->
    <input type="checkbox" id="menu_control">
     <div class="header">
        <!-- logo 圖片不用做太大 ，大約60*40 -->
        <h1 class="logo">
            <!-- 通常logo 會有個超連結 -->
            <a href="#">
                <img src="https://picsum.photos/60/40/?random=3">  
            </a>
        </h1>
        <!-- 第三 在手機上面要顯示漢堡選單 ，製作過程： 先使用一個 label 裹面用 for 屬性，包一個span放 文字 ,  label 是跟表單有關係，可以用來控制input  , input 放在前方，使用checkbox類型 -->
        <label for="menu_control" class="menu_btn">
            <span>選單</span>
        </label>
            
        <!-- 第二做選單 a[#]{link} -->
        <nav>
            <a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a>
        </nav>

    </div>





    <!-- 1. 先做滿版區塊，banner裹面放一個圖片 -->
    <div class="banner">
        <img src="https://picsum.photos/1400/500/?random=3"> 
    </div>
    <!-- 2. 再來做一個about 區塊 ，會是固定寬，會主標題，底下有幾個欄-->
    <div class="about">
        <!-- 設計一個wrap 裹面放一個標題區，一個內容欄位區,這樣可以利用 wrap 做固定寬，接著利用item-group 去設定所有的item ，同時也把大標題與內容做區隔 -->
        <div class="wrap"> 
            <div class="title">
                <h2>關於我們</h2>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. A numquam maxime et debitis, eveniet fugit molestiae illum at facilis incidunt?</p>
            </div>
            <!-- 三欄區埤，裹面有 假圖 h3標題 簡單內文 -->
            <div class="item-group">
                <div class="item">
                    <div class="pic">
                        <img src="https://picsum.photos/300/200/?random=3">
                    </div>
                    <div class="text">

                        <h3>title</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui labore dignissimos nam, iusto possimus quaerat assumenda delectus vel quos quasi.</p>  
                    </div>
                </div>
                <div class="item">
                    <div class="pic">
                        <img src="https://picsum.photos/300/200/?random=4">
                    </div>
                    <div class="text">

                        <h3>title</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui labore dignissimos nam, iusto possimus quaerat assumenda delectus vel quos quasi.</p>  
                    </div>
                </div>
                <div class="item">
                    <div class="pic">
                        <img src="https://picsum.photos/300/200/?random=5">
                    </div>
                    <div class="text">

                        <h3>title</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui labore dignissimos nam, iusto possimus quaerat assumenda delectus vel quos quasi.</p>  
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="service">
        <div class="wrap">
            <div class="item-group">
                <div class="item">
                    <div class="pic">
                        <img src="https://picsum.photos/300/200/?random=5">
                    </div>
                    <div class="text">

                        <h3>title</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui labore dignissimos nam, iusto possimus quaerat assumenda delectus vel quos quasi.</p>  
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="about">
        <!-- 設計一個wrap 裹面放一個標題區，一個內容欄位區,這樣可以利用 wrap 做固定寬，接著利用item-group 去設定所有的item ，同時也把大標題與內容做區隔 -->
        <div class="wrap"> 
            <div class="title">
                <h2>關於我們</h2>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. A numquam maxime et debitis, eveniet fugit molestiae illum at facilis incidunt?</p>
            </div>
            <!-- 四欄區埤，裹面有 假圖 h3標題 簡單內文 -->
            <div class="item-group">
                <div class="item">
                    <div class="pic">
                        <img src="https://picsum.photos/300/200/?random=31">
                    </div>
                    <div class="text">

                        <h3>title</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui labore dignissimos nam, iusto possimus quaerat assumenda delectus vel quos quasi.</p>  
                    </div>
                </div>
                <div class="item">
                    <div class="pic">
                        <img src="https://picsum.photos/300/200/?random=41">
                    </div>
                    <div class="text">

                        <h3>title</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui labore dignissimos nam, iusto possimus quaerat assumenda delectus vel quos quasi.</p>  
                    </div>
                </div>
                <div class="item">
                    <div class="pic">
                        <img src="https://picsum.photos/300/200/?random=51">
                    </div>
                    <div class="text">

                        <h3>title</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui labore dignissimos nam, iusto possimus quaerat assumenda delectus vel quos quasi.</p>  
                    </div>
                </div>
                <div class="item">
                    <div class="pic">
                        <img src="https://picsum.photos/300/200/?random=61">
                    </div>
                    <div class="text">

                        <h3>title</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui labore dignissimos nam, iusto possimus quaerat assumenda delectus vel quos quasi.</p>  
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="footer">
        &copy; copyright 2018 by lily
    </div>

</body>
</html>

關於 垂直置中技巧，參考Amos
https://csscoke.com/2018/08/21/css-vertical-align/

關於 list-style CSS屬性詳細說明，參考Amos iThome 鐵人賽：
https://ithelp.ithome.com.tw/m/articles/10251436 by CSScoke

文獻連結:
金魚都能懂的網頁設計入門-第二十二天 - RWD選單製作
https://www.youtube.com/watch?v=E9SosNZkX7Y&list=PLqivELodHt3iL9PgGHg0_EF86FwdiqCre&index=23 by CSScoke Amos

完整版30集 - 金魚都能懂網頁設計入門
https://www.youtube.com/playlist?list=PLqivELodHt3iL9PgGHg0_EF86FwdiqCre by CSScoke Amos