クルっと変わるドロワーメニューボタンを作ろう

WEBサイトでいろんなサイトが実装している「ドロワーメニュー」。「ハンバーガーメニュー」なんても呼ばれるものですが、スマホ対応のサイトではほぼ見かけますよね。

今回は、クリックすると三本線から×印に変わるボタン部分の作り方を紹介します。

完成系

See the Pen
Drawer-button by TAKU HONGO (@taku_webdesign)
on CodePen.

※スマホの場合は、Resultをタップしてください。

作り方

HTMLでボタンの枠「openbtn」「span」を作る

ボタンの大枠はdivタグで「openbtn」クラスを付け、線１本ずつの枠を、spanタグで作っています。

<div class="openbtn"> 
 /* ボタンの大枠*/
<span></span>
/* 線１本目*/
<span></span>
/* 線２本目*/
<span></span>
/* 線３本目*/
</div>

CSSでボタンのスタイルとアニメーションを設定

ボタンの大枠「openbtn」の設定をします。内側の三本線の基点とするため、position relativeとするのがポイントです。背景色やボタンの大きさはお好みで。

.openbtn {
  position: relative;
  /* 線の基点とするので、relative指定*/
  background: #272727;
  /* 背景色は黒寄りのグレー（お好みで）*/
  width: 50px;
  height: 50px;
  /* widthとheightでボタンのサイズ指定*/
  border-radius: 5px;
  /* 角をちょっと丸める*/
}

線「span」のベースとなる設定をします。openbtnを基点とした絶対位置を指定するため、 position absoluteは忘れずに。

.openbtn span {
  display: inline-block;
  /* サイズ指定をしていきたいので、インラインブロック要素に*/
  transition: all.4s;
  /* アニメーションの設定　4秒かけて*/
  position: absolute;
  /* openbtnを基点にして動くため、absolute*/
  left: 14px;
  /* leftでopenbtnを基点とした絶対位置*/
  height: 3px;
  /* 線の太さをheightで*/
  border-radius: 2px;
  /* 線の角をちょっと丸める*/
  background: #fff;
  /* 線の色を白に（お好みで）*/
  width: 45%;
}

線「span」を疑似クラスnth-of-type()で１つずつ位置指定をして、三本線にしていきます。

/* span1番目 */
.openbtn span:nth-of-type(1) {
  top: 15px;
}

/* span2番目 */
.openbtn span:nth-of-type(2) {
  top: 23px;
}

/* span3番目 */
.openbtn span:nth-of-type(3) {
  top: 31px;
}

ここまでで、三本線の形ができあがりました。

CSSで三本線の１・３本目が45度回転し、２本目が消える設定のクラス「active」を作る

ボタンクリック時にクラス「openbtn」にクラス「active」を付与して、動きをつけるという仕組みです。ここではクラス「active」を線「span」３本分作りましょう。

/*span1番目の線が45度回転 */
.openbtn.active span:nth-of-type(1) {
  top: 18px;
  left: 18px;
/*位置を少し変えています */
  transform: translateY(6px) rotate(-45deg);
/*-45度回転　上下少し調整 */
  width: 30%;
/*線を少し短くする */
}

/* span2番目は見えなくする */
.openbtn.active span:nth-of-type(2) {
  opacity: 0;
/*透過させる */
}

/* span3番目の線が45度回転 */
.openbtn.active span:nth-of-type(3) {
  top: 30px;
  left: 18px;
/*位置を少し変えています */
  transform: translateY(-6px) rotate(45deg);
/*-45度回転　上下少し調整 */
  width: 30%;
/*線を少し短くする */
}

jQueryでクリック時に「openbtn」に「active」が付与し、アニメーションするよう設定

// openbtnクラスがクリックされると
$(".openbtn").click(function(){
  // activekクラスが付与される
  $(this).toggleClass('active');
});

これで、クリックすると三本線から×印に変わるボタン部分のできあがりです。

次回は、クリック時に開くメニュー部分の作り方を紹介予定です。