免JS！純CSS就可打造出，開合式的漢堡選單功能

Mon, 21 Nov 2022 00:00:00 +0000

前言

選單一直是製作網頁最基本的功能需求之一，因此對於許多的套件內建都會提供選單的功能，且這些滑動式選單，大部分都是透過 Javascript 所製作而成，最主要的原因就在於，透過 Javascript 可以精準的知道，目前使用是點選開啟還是關閉。

而最近發現一個超酷的寫法，直接透過 HTML 中的核許框，就可判斷目前是開啟還是關閉，再搭配 CSS 就可實作出展開與收合，甚至連漢堡選單的那圖示，也可透過 CSS 繪製出來，且當選單開啟時，還可透過動畫將選單變叉叉的圖示，因此現在就一塊來看看，如何透過純 CSS 打造出開合式漢堡選單吧！

做法

1. 加入以下的 HTML 架構

首先，先在HTML中加入以下的HTML架構。

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


<nav class="nav-box">
 <input type="checkbox" id="menu">
 <label for="menu" class="line">
 <div class="menu"></div>
 </label>

 <div class="menu-list">
 <ul>
 <li>選單1</li>
 <li>選單2</li>
 <li>選單3</li>
 </ul>
</div>
</nav>

2. 加入 CSS 設定漢堡選單的圖示

接著再透過CSS來設定漢堡選單的圖示。

 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


/*
選單線
*/
.line {
 width: 24px;
 height: 24px;
 background: #FFF;
 cursor: pointer;
 display: block;
 padding: 16px;
 position: fixed;
 z-index: 2;
}
.line .menu,
.line .menu::before,
.line .menu::after {
 background: #222;
 content: '';
 display: block;
 height: 1px;
 position: absolute;
 transition: background ease .15s, top ease .15s .15s, transform ease .15s;
 width: 20px;
}
.line .menu {
 left: 18px;
 top: 27px;
}

.line .menu::before {
 top: -6px;
}

.line .menu::after {
 top: 6px;
}

3. 加入 :checked 屬性的判斷

接著再透過 :checked 的屬性，來判斷目前為開啟狀態，當選單開啟時，原來的三條線就變成叉叉。

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


/*
點選選單變叉叉
*/
#menu:checked + .line .menu {
 background: transparent;
}

#menu:checked + .line .menu::before {
 transform: rotate(45deg);
}

#menu:checked + .line .menu::after {
 transform: rotate(-45deg);
}

#menu:checked + .line .menu::before,
#menu:checked + .line .menu::after {
 top: 0;
 transition: top ease .15s, transform ease .15s .15s;
}

4. 設定開合樣式

當選單按鈕處理好後，一樣用 :checked 來設定選單展開(200px)與收合(60px)。

 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


/*
選單開合
*/
#menu:checked ~ .menu-list {
 width: 200px;
}

.menu-list {
 width: 60px;
 height: 100vh;
 background: #FFF;
 box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
 padding-top: 60px;
 position: fixed;
 z-index: 1;
 transition: all .3s;
 overflow: hidden;
}

/*
選單向外推
*/
.menu-list ul {
 list-style: none;
 margin-left:70px;
 padding: 0;
}
.menu-list ul>li{
 display:block;
 width:100px;
}

5. 隱藏 checkbox

都弄好後，再把 input 的核許框給隱藏起來，這樣就可透過純CSS打造出滑動式的漢堡選單啦！

範例預覽

See the Pen blog/pure-css-toggle-menu-icon by wjdesign (@WJDesign) on CodePen.

避免無效 favicon.ico 存取動作

Mon, 21 Nov 2022 00:00:00 +0000

參考網站

問題原因

瀏覽器初到新網站時，會試著下載名為 Favicon (Favorite Icon) 的網站代表圖示，用在地址列、頁籤、書籤(我的最愛)上。

若網頁沒特別指定，瀏覽器預設會抓取網站根路徑的 /favicon.ico 檔案，找不到就算了不會觸發錯誤。

一般我們不為會為測試、開發用網站設計圖示，但瀏覽器仍會在第一次存取時嘗試下載 /favicon.ico，不意外地以 HTTP 404 收場：

嚴格來說，瀏覽器會記住結果，404 失敗只會發生一次(直到瀏覽器重啟)，大小 5KB 說來無傷大雅。但它最困擾我的地方是使用 F12 網路工具或 Fidder 抓封包時，觀察結果天下飛來一筆 /favicon.ico 404，說明時還要額外解釋，蠻煩人的。

解決方式

爬文查了避免瀏覽器抓 /favicon.ico 的方法，有以下幾種：

Firefox 25+ 不支援

1

<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">

有些舊瀏覽器不支援 (Android Lollipop)

1

<link rel="icon" href="data:,">

註：若有設定 Content-Security-Policy default-src ‘self’ 會封限 data:image/png … 來源，需調整為 default-src 'self' data: 參考

1

<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">

結論

結論：若只考慮 Chrome，三種做法均可避免瀏覽器嘗試存取 favicon.ico，第三種做法涵蓋瀏覽器最廣。

HTML on Wayne's blog | 偉恩的部落格 | 技術博客