スマートフォンサイトなどで用いられる三本線のメニュー（ハンバーガーメニュー）のアイコンを
開閉時に合わせて変化させる方法をご紹介します。
 

方法1：Webアイコンフォント Font Awesome を使った方法

Font Awesome の基本的な知識と使い方についてはこちらの記事でご紹介しています。

 

DEMO

 

・html

・css

・前提
メニューを開いた時はaタグに「active」というclassが付くよう、jQueryで制御します。

 

・1～13行目
メニューの大枠（色が付いた）部分です。
5～11行目は子要素を上下中央に配置する為に指定します。
 

・15行目～
a　のメニュー枠に、after要素で三本ラインのFont Awesome iconを配置します。
 

・21行目～
開いた時（.active が付いた時）はafter要素のアイコンをバツ印アイコンに変更します。

方法2：cssのみで実現する方法

DEMO

 

・html

・css

・1～13行目
メニューの大枠（色が付いた）部分です。
12行目のpositionの指定以外は方法1と同一となります。
 

・15～27行目
span と疑似要素で三本ラインを設定します。
.menu_btn02 span　真ん中のライン
.menu_btn02 span::before　上のライン
.menu_btn02 span::after　下のライン
となります。

 

・28行目～33行目
真ん中のラインと上下のラインに余白がつくよう、positionで調整しています。
 

・35行目以降
メニューを開いた際（.active が付いたとき）の指定となります。
 

・35～37行目
transparent で真ん中の線を透明にし、見えなくします。
 

・38行目～
上下の線を transform: rotate で斜めに回転させます。
position で余白をとったままだと回転させた際に位置がずれてしまうのでそれぞれ0にします。