Skip to content

ハンバーガーの三本線をガイドラインと同じ形にする #3295

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ma91n merged 1 commit into from
Sep 15, 2026
+32 −7
Merged

ハンバーガーの三本線をガイドラインと同じ形にする #3295

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 29 additions & 5 deletions themes/future/css-src/theme-styles.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -950,32 +950,56 @@ Header and header elements
押せる面は 24×24px を下回らないように上下左右に 4px ずつ取る */
.header-drawer-toggle {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: space-step;
margin: 0;
padding: space-step;
cursor: pointer;
}
/* 3本は同じ長さで、右端をそろえて左端だけずらす。窓で切って見せるので、
開くときは線を伸ばさず横へ滑らせるだけで済む（アーキテクチャ
ガイドラインと同じ形）。高さ 14px は 2px の線3本と 4px の間隔2つの和 */
.header-drawer-icon {
display: block;
position: relative;
width: 20px;
height: 14px;
overflow: hidden;
}
.header-drawer-bar {
display: block;
position: absolute;
left: 0;
width: 20px;
height: 2px;
/* 線なのでピルにする。角丸の段の3つ目 */
border-radius: 999px;
background: var(--ink-mute);
/* 開閉は反応ではなく状態の変化なので、hover-speed ではなく state-speed */
transition: transform state-speed ease, opacity state-speed ease;
transition: transform state-speed ease;
}
/* 窓からはみ出した分が隠れるので、見える長さは 20 / 10 / 15px になる */
.header-drawer-bar:nth-child(1) {
top: 0;
}
.header-drawer-bar:nth-child(2) {
top: 6px;
transform: translateX(10px);
}
.header-drawer-bar:nth-child(3) {
top: 12px;
transform: translateX(5px);
}
/* 上下の線を中央へ寄せてから回す。6px は線の高さ2pxと間隔4pxの和で、
間隔の段として選んだ値ではない。角度は参照実装（リクルートサイト）と
同じ ±135deg で、45deg と違って回る向きが両者で逆になる */
同じ ±135deg で、45deg と違って回る向きが両者で逆になる。
✕ の2本は左端もそろえて同じ長さにする */
.header-drawer-input:checked + .header-drawer-toggle .header-drawer-bar:nth-child(1) {
transform: translateY(6px) rotate(-135deg);
}
/* 真ん中は消すのではなく窓の外へ送る */
.header-drawer-input:checked + .header-drawer-toggle .header-drawer-bar:nth-child(2) {
opacity: 0;
transform: translateX(20px);
}
/* 動きを減らす設定では回さずに ✕ の形へ切り替える */
@media (prefers-reduced-motion: reduce) {
Expand Down
5 changes: 3 additions & 2 deletions themes/future/layout/_partial/header.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,9 @@
名前は中の sr-only が持つ（label に絵しか無いと読み上げる名前が無い） %>
<input type="checkbox" id="header-drawer" class="header-drawer-input">
<%# 三本線は svg-icon の辞書ではなく3本の span で描く (#2883)。開くと1本目と
3本目が回って ✕ になり、2本目が消える。1枚の絵では動かせないため %>
<label for="header-drawer" class="header-drawer-toggle"><span class="header-drawer-bar"></span><span class="header-drawer-bar"></span><span class="header-drawer-bar"></span><span class="sr-only">メニュー</span></label>
3本目が回って ✕ になり、2本目は窓の外へ抜ける。1枚の絵では動かせないため。
包む span はその窓で、3本を同じ長さのまま違う長さに見せる %>
<label for="header-drawer" class="header-drawer-toggle"><span class="header-drawer-icon"><span class="header-drawer-bar"></span><span class="header-drawer-bar"></span><span class="header-drawer-bar"></span></span><span class="sr-only">メニュー</span></label>

<%# 行き先の帯。畳んだ中身は :hover と :focus-within で開く（JS は使わない）。
開く合図がフォーカスなので、押す必要のあるボタンにはしていない
Expand Down
Loading