回答編集履歴
1
追記
test
CHANGED
|
@@ -1,3 +1,22 @@
|
|
|
1
1
|
既出の質問です。
|
|
2
2
|
|
|
3
3
|
[[ハンバーガーメニュー 外] の検索結果： 10000件 | teratail【テラテイル】｜ITエンジニア特化型Q&Aサイト](https://teratail.com/search?q=%E3%83%8F%E3%83%B3%E3%83%90%E3%83%BC%E3%82%AC%E3%83%BC%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%20%E5%A4%96)
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
### 追記
|
|
8
|
+
|
|
9
|
+
失礼しました。ピュアCSSで対応したいということなのですね。
|
|
10
|
+
|
|
11
|
+
```html
|
|
12
|
+
<label class="hamburger" for="hamburger" tabindex="0">
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
```css
|
|
16
|
+
input.hamburger:checked ~ label:focus ~.drawer-list {
|
|
17
|
+
transform: translatex(0);
|
|
18
|
+
border-bottom-left-radius: 0;
|
|
19
|
+
}
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
`:focus-within`も併用すれば、さらにそれっぽくなるかもしれませんので、試行錯誤されてはどうでしょうか。
|