2015年01月17日(土)

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

• 0
• 0
• 0
• 1

CSSを使って、3本線のメニューボタンを開閉にあわせて変化させる方法を紹介します。先日作ったWebギャラリーサイトでも使っている方法です。

3本線のメニューはアイコン型のWebフォントを使っている人も多いと思いますが、CSSで作成すると動きをつけることもできるので楽しいです。

サンプルを用意していますのでご覧ください。

では、HTMLから説明します。

HTML

a要素がサークルで、span要素が3本線になります。

span要素を3つ並べて3本線を作る場合もありますが、個人的には擬似要素を使って1つで表示したいです。

CSS

続いてCSSです。最初に全部載せて、後で個別に解説します。

#panel-btn{ display: inline-block; position: relative; width: 40px; height: 40px; margin: 20px 0 10px; border-radius: 50%; background: #fff; } #panel-btn:hover{ background: #fafafa; } #panel-btn-icon{ ...