3本線のメニューボタンをパネルの開閉にあわせてバツに変化させてみる

CSSを使って、3本線のメニューボタンを開閉にあわせて変化させる方法を紹介します。先日作ったWebギャラリーサイトでも使っている方法です。 3本線のメニューはアイコン型のWebフォントを使っている人も多いと思いますが、CSSで作成すると動きをつけることもできるので楽しいです。 サンプルを用意していますのでご覧ください。 では、HTMLから説明します。 HTML a要素がサークルで、span要素が3本線になります。 <a href="#" id="panel-btn"><span id="panel-btn-icon"></span></a> span要素を3つ並べて3本線を作る場合もありますが、個人的には擬似要素を使って1つで表示したいです。 CSS 続いてCSSです。最初に全部載せて、後で個別に解説します。 #panel-btn{ display: inline-block; posit

[kumi-fj]

web

[skunk0915]

css js jquery　スマホ sp ui

[h-a-t-e-h-a-t-e-h-a-t-e-n-a]

三本線のナビ 表示させたいナビのところに「#panel」をつけるのを忘れないように！

[k_gobo]

算数が出来なくていつも勘で位置合わせしてるので、計算解説してくれるの嬉しい。

[mako0717]

すごく丁寧な解説。

[hatebuman]

（・B!・）

[yamadar]

アニメーションボタンを作成する時の計算の仕方と考え方。

[ku_marin]

解説がすごい丁寧

[KumamotoLab]

3本線のメニューボタンをパネルの開閉にあわせてバツに変化させてみる @webpark2さんから

[hinashiki]

アニメーションの勉強に

[kmatz90]

細かいけどすごい。