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

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;
  position: relative;
  width: 40px;
  height: 40px;
  margin: 20px 0 10px;
  border-radius: 50%;
  background: #fff;
}
#panel-btn:hover{
  background: #fafafa;
}
#panel-btn-icon{
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  margin: -1px 0 0 -7px;
  background: #2196F3;
  transition: .2s;
}
#panel-btn-icon:before, #panel-btn-icon:after{
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 2px;
  background: #2196F3;
  transition: .3s;
}
#panel-btn-icon:before{
  margin-top: -6px;
}
#panel-btn-icon:after{
  margin-top: 4px;
}
#panel-btn .close{
  background: transparent;
}
#panel-btn .close:before, #panel-btn .close:after{
  margin-top: 0;
}
#panel-btn .close:before{
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
#panel-btn .close:after{
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

では、サークル、アイコン、開いたときに分けて説明します。まずはリンクの部分。

サークル部分

#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;
}

リンク部分は直径40pxのサークルにしています。次に解説するアイコンの配置の基準となるため、「position: relative;」を指定します。また、マウスを乗せたときに若干グレーになるようにしています。

アイコン部分

続いてアイコンの部分です。span要素本体で真ん中の線、before擬似要素で上の線、after擬似要素を下の線を表示しています。まずは真ん中の線から。

#panel-btn-icon{
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  margin: -1px 0 0 -7px;
  background: #2196F3;
  transition: .2s;
}

大きさは全て幅14px、高さ2pxです。細かい配置関係は文章だけだと分かりにくいので、上下の線と一緒に画像にしました。

span要素の配置は親要素である直径40pxのサークルが基準になり、top: 50%;とleft50%の基準が太い点線になります。

top: 50%;とleft50%だけだと太い点線が交わるところがspan要素の左上になります。ですので、大きさの半分（上に1px、左に7px）をネガティブマージンで移動させて真ん中に配置されるようにします。

上下真ん中揃えは「top: 0; left: 0; right: 0; bottom: 0; margin: auto;」でもいいわけですが、今回は次に紹介する上下の線と同じマージンで調整する方法で指定しました。

次は擬似要素で表す上下の線です。

#panel-btn-icon:before, #panel-btn-icon:after{
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 2px;
  background: #2196F3;
  transition: .3s;
}
#panel-btn-icon:before{
  margin-top: -6px;
}
#panel-btn-icon:after{
  margin-top: 4px;
}

大きさは当然span要素本体と同じです。配置の基準はspan要素となります。ですので、「left: 0」で3本の線が横にそろうことになります。

高さは先ほどの画像にあるようにマージンで調整します。上の線は-6px、下の線は4pxのマージンをとるようにします。

開いた場合

#panel-btn .close{
  background: transparent;
}
#panel-btn .close:before, #panel-btn .close:after{
  margin-top: 0;
}
#panel-btn .close:before{
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
#panel-btn .close:after{
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

クリックしたときにjQueryでクラス「close」を追加するようにして、3本線をバツにします。jQueryの仕組みは後で解説しますので、ここではその際のスタイルを解説します。

まず、span本体は背景をtransparentとすることで見えなくします。そして、擬似要素で表している上下の線のマージンを0にすることで、span本体である真ん中の線と同じ位置にします。そして、上下それぞれを回転させることでバツになります。

角度を変えることで回転量や回転の方向を変えることができますので、お好みで変えてみてください。

回転させないと上下の線が真ん中の線に重なってマイナスになります。それはそれでいいかもしれないです。

jQuery

クリックでパネルの開閉とクラスの取り外しをおこないます。jQueryを使えば簡単ですね。

$(function() {
  $("#panel-btn").click(function() {
    $("#panel").slideToggle(200);
    $("#panel-btn-icon").toggleClass("close");
    return false;
  });
});

「#panel-btn」をクリックする度に

• 「#panel」がスライドして開く。
• 「#panel-btn-icon」にクラス「close」が追加される。

と、

• 「#panel」がスライドして閉じる。
• 「#panel-btn-icon」にあるクラス「close」が取り除かれる。

が繰り返されます。

「#panel」はCSS「display: none;」を指定して、最初は表示しないようにしておく必要があります。

さいごに

ということで、3本線のメニューボタンを開閉にあわせて変化させてみました。

ご自分のサイトに合わせて大きさを変えられるよう、詳しく説明しましたのでお役に立てればうれしいです。

パネルの開閉方法については、他にも色々方法があると思いましますので、今後の記事にできればと思います。

最後に、先日作った「色がわかるWebギャラリーサイト samprary」もよろしくお願いします。

このサイトでは、今回紹介したボタンの線の太さを1pxにしています。