線がいったん真ん中に集まり、そのあと回って×になります。閉じるときは逆の順番で戻ります。メニュー本体の開け閉めは、このページの他の素材と組み合わせてください。
MENU
メニュー・ハンバーガーメニューのCSS素材
スマホのハンバーガーメニューや、PCのナビゲーションです。開け閉めには短いJavaScript、またはCSSだけの仕組みを使っています。
12種類
右そろえの長さの違う3本線です。真ん中の線が左へ抜け、上下の線が伸びながら交差します。
2本線がボタンごと半回転しながら×になり、下の文字が「MENU」から「CLOSE」に変わります。文字は CSS の content で書き換えられます。
右上のボタンで、画面の右からメニューがすべり出ます。後ろの暗い部分・リンク・Escキーで閉じます。メニューの幅は --cs-width で変えられます。
画面全体が暗くなり、大きなメニューが上から順にせり上がって出ます。英語の小見出しは data-en の文字で変えられます。
ボタンの位置から円が広がって画面をおおいます。円の出発点は circle(… at calc(100% - 34px) 30px) の数字で、ボタンの位置に合わせてください。
マウスを乗せた項目へ下線がすべって移動し、離すと今いるページ（aria-current="page"）の位置に戻ります。項目が多くて入りきらないときは横にスクロールできます。
パソコンではマウスを乗せると開き、スマホではタップで開きます。外側を押す・Escキー・ほかへフォーカスが移ると閉じます。右端の項目は cs-mn08__sub--r で右そろえにしてあります。
「サービス」に乗せる（スマホはタップ）と、ヘッダーの幅いっぱいにパネルが開きます。右側の写真の部分は色の面です。<img> に差し替えてください。
画面の下に固定するアプリ風のメニューです。今いるページは aria-current="page" で示し、アイコンの後ろに色が付きます。ページの最後がメニューに隠れないよう、ページ側の下の余白を 80px ほど空けてください。
HTMLの <details> を使っているので、JavaScriptなしで開け閉めできます。CSSだけなので、外側を押しても自動では閉じません（もう一度ボタンを押して閉じます）。
見えないチェックボックスのオン・オフで開け閉めする、昔からあるCSSだけの手法です。ヘッダーのすぐ下にメニューがなめらかに下りてきます。キーボードではボタンにフォーカスしてスペースキーで開きます。