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

免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，第三種做法涵蓋瀏覽器最廣。

Markdown 語法指南

Sat, 16 Jul 2022 00:00:00 +0000

Markdown 是讓你快速撰寫筆記，流暢管理知識，支援多種衍生功能的生產力工具

標題

當您想要將一段文字標示為標題的時候，請使用這個語法。
請在行首輸入 # 符號，並在後面加上一個空白後，再輸入標題文字。
標題有分成 6 個層級，# 的數量愈多，層級越低。

1
2
3
4
5
6


# 第一層級標題 h1
## 第二層級標題 h2
### 第三層級標題 h3
#### 第四層級標題 h4
##### 第五層級標題 h5
###### 第六層級標題 h6

Paragraph

Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.

Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.

Blockquotes

The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element, and optionally with in-line changes such as annotations and abbreviations.

Blockquote without attribution

Tiam, ad mint andaepu dandae nostion secatur sequo quae. Note that you can use Markdown syntax within a blockquote.

Blockquote with attribution

Don’t communicate by sharing memory, share memory by communicating.
— Rob Pike¹

Tables

Tables aren’t part of the core Markdown spec, but Hugo supports supports them out-of-the-box.

Name	Age
Bob	27
Alice	23

Inline Markdown within tables

Italics	Bold	Code
italics	bold	`code`

A	B	C	D	E	F
Lorem ipsum dolor sit amet, consectetur adipiscing elit.	Phasellus ultricies, sapien non euismod aliquam, dui ligula tincidunt odio, at accumsan nulla sapien eget ex.	Proin eleifend dictum ipsum, non euismod ipsum pulvinar et. Vivamus sollicitudin, quam in pulvinar aliquam, metus elit pretium purus	Proin sit amet velit nec enim imperdiet vehicula.	Ut bibendum vestibulum quam, eu egestas turpis gravida nec	Sed scelerisque nec turpis vel viverra. Vivamus vitae pretium sapien

Code Blocks

Code block with backticks

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Example HTML5 Document</title>
</head>
<body>
 <p>Test</p>
</body>
</html>

Code block indented with four spaces

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example HTML5 Document</title>
</head>
<body>
<p>Test</p>
</body>
</html>

Code block with Hugo’s internal highlight shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Example HTML5 Document</title>
</head>
<body>
 <p>Test</p>
</body>
</html>

Diff code block

1
2
3
4
5


[dependencies.bevy]
git = "https://github.com/bevyengine/bevy"
rev = "11f52b8c72fc3a568e8bb4a4cd1f3eb025ac2e13"
- features = ["dynamic"]
+ features = ["jpeg", "dynamic"]

List Types

Ordered List

First item
Second item
Third item

Unordered List

List item
Another item
And another item

Nested list

Fruit
- Apple
- Orange
- Banana
Dairy
- Milk
- Cheese

Other Elements — abbr, sub, sup, kbd, mark

GIF is a bitmap image format.

H₂O

Xⁿ + Yⁿ = Zⁿ

Press CTRL+ALT+Delete to end the session.

Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures.

Hyperlinked image

The above quote is excerpted from Rob Pike’s talk during Gopherfest, November 18, 2015. ↩︎