三本線からバツ印へ

こんにちは、ゆんつです。

スマホでWebサイトをみていると、画面の右上や左上などにメニュー画面を表示させるための3本線をよく見かけると思います。

この三本線。

見た目がハンバーガーに似ていることから「ハンバーガーメニュー」と言われるそうです。

ゆんつ

似てるかなぁ？

まあハンバーガーに似てるか似てないかは置いておくとして、この3本線はHTMLとCSSで簡単に作ることが出来ます。

今日はハンバーガーメニューの三本線を作り、その三本線をクリックしたら三本線からバツ印に変形する方法、そしてそれを使ったハンバーガーメニューについて書いておきます。

三本線を作る
三本線をバツ印に変形させる
ハンバーガーメニューを作る

三本線を作る

作り方は簡単です

横棒を3つ作り、それをpositionを使って等間隔に並べればいいだけです。

3つの横棒を作るHTMLは横棒となる3つの要素をdiv要素などで囲うと良いと思います。

例えば以下のような感じ。


<div>
  <span></span>
  <span></span>
  <span></span>
</div>

この3つのspan要素をCSSで横棒にします。

CSSは以下のような感じです。


div {
  position: relative;
  width: 100px;
  height: 100px;
  border: 10px solid #444;
  box-sizing: border-box;
}

/* 三本線のスタイルを決める */
span {
  display: block;
  width: 60px;
  height: 10px;
  background: #444;
  position: absolute;
  left: 10px;
  transition: all 0.5s ease;
}

/* 線の縦位置の調整 */
.bar1 { 
  top: 12.5px;
  background-color: blue;
}
.bar2 {
  top: 35px;
  background-color: yellow;
}
.bar3 {
  bottom: 12.5px;
  background-color: red;
}

実際につくってみます。

See the Pen
hamburger1 by konpure (@yuntu)
on CodePen.

わかりやすいように三本線の各色は変えています。

線の位置調整に少し手間がかかるだけで割と簡単に作れるのが解ると思います。

三本線をバツ印に変形させる

実際のWebサイトでは

三本線をクリック ⇒ メニューが開いて三本線がバツ印になる ⇒ バツ印をクリック ⇒ メニューが閉じてバツ印から再び三本線になる

ということが多いです。

ですのでハンバーガーメニューがクリックされたらバツ印に変形し、バツ印がクリックされたらハンバーガーメニューに戻るようにします。

考え方としては、

・jQueryでハンバーガーメニューがクリックされた時のイベントを付ける

・ハンバーガーメニューがクリックされたら真ん中の線は透明化して見えないようにする

・ハンバーガーメニューがクリックされたら上下の線は中央に移動し、クロスしてバツ印を作るようにする。

という感じで作りたいと思います。

HTMLは先ほどと全く同じなので省略します。

jQueryを使ってハンバーガーメニューがクリックされるたびに「open」というクラスがついたり外れたりするようにします。


//  ハンバーガーメニューがクリックされるたびにopenというクラスを付け外しする
$(function() {
  $('div').click(function() {
    $('.bar1, .bar2, .bar3').toggleClass('open');
  })
});

openというクラスが付与された場合にバツ印になるようにCSSでデザインします。


div {
  position: relative;
  width: 100px;
  height: 100px;
  border: 10px solid #444;
  box-sizing: border-box;
}

/* 三本線のスタイルを決める */
span {
  display: block;
  width: 60px;
  height: 10px;
  background: #444;
  position: absolute;
  left: 10px;
  transition: all 0.5s ease;
}

/* 線の縦位置の調整 */
.bar1 { 
  top: 12.5px;
  background-color: blue;
}
.bar2 {
  top: 35px;
  background-color: yellow;
}
.bar3 {
  bottom: 12.5px;
  background-color: red;
}

/*
  ハンバーガーメニューがクリックされたら
  上の線を真ん中に移動させて45℃回転
*/
.bar1.open {
  top: 35px;
  transform: rotate(45deg);
}
/* 
  ハンバーガーメニューがクリックされたら
  真ん中の線は透明化して見えないようにする
*/
.bar2.open { opacity: 0; }

/*
  ハンバーガーメニューがクリックされたら
  下の線は真ん中に移動させて-45℃回転
*/
.bar3.open {
  top: 35px;
  transform: rotate(-45deg);
}

これにより、ハンバーガーメニューがクリックされるとopenというクラスが付与されてバツ印になり、バツ印がクリックされるとopenというクラスが外れて再度ハンバーガーメニューに戻るようになります。

<br /> See the Pen <a href="https://codepen.io/yuntu/pen/dLqKQQ">hamburger2</a> by konpure<br /> (<a href="https://codepen.io/yuntu">@yuntu</a>) on <a href="https://codepen.io">CodePen</a>.<br />

ハンバーガーメニューをクリックしてみてください。

ハンバーガーメニューをクリックすると三本線が×印になり、もう一度クリックすると再び三本線に戻るはずです。

「三本線からバツ印」に変化させることができました！

ゆんつ

簡単

あとはこれを画面右や左からスライドしてくるメニューと組み合わせることで、三本線をクリックするとバツ印に変化すると同時にメニューが画面内にスライドしてきて、もう一度クリックするとバツ印が三本線に戻りメニューは画面外に消えていくスマホなどで見慣れたハンバーガーメニューが完成することになります。

ハンバーガーメニューを作る

先ほどのコードを利用して簡単なハンバーガーメニューを作ってみました。

See the Pen
drawer_menu by konpure (@yuntu)
on CodePen.

ハンバーガーメニューのアイコンをクリックすると、画面右側からメニューがスライドしてくるはずです（メニュー内のリンクは何も設定していないのでクリックしても何も起こりません）。

コードは以下の通りです。

HTML

<header class="header">
  <div class="menu-icon">
    <span class="bar1"></span>
    <span class="bar2"></span>
    <span class="bar3"></span>
  </div>
</header><!-- /.header -->
<div class="drawer">
  <ul class="drawer-menu">
    <li class="drawer-item">
      <a href="">MENU1</a>
    </li><!-- /.drawer-item -->
    <li class="drawer-item">
      <a href="">MENU2</a>
    </li><!-- /.drawer-item -->
    <li class="drawer-item">
      <a href="">MENU3</a>
    </li><!-- /.drawer-item -->
    <li class="drawer-item">
      <a href="">MENU4</a>
    </li><!-- /.drawer-item -->
  </ul><!-- /.drawer-menu -->
</div><!-- /.drawer -->

CSS

/* ハンバーメニューの枠組み */
.menu-icon {
  position: relative;
  width: 100px;
  height: 100px;
  border: 10px solid #444;
  box-sizing: border-box;
  margin-left: auto;
  z-index: 1000;
  background: #fff;
}

/* 三本線のスタイルを決める */
span {
  display: block;
  width: 60px;
  height: 10px;
  background: #444;
  position: absolute;
  left: 10px;
  transition: all 0.5s ease;
}

/* 線の縦位置の調整 */
.bar1 { 
  top: 12.5px;
  background-color: blue;
}
.bar2 {
  top: 35px;
  background-color: yellow;
}
.bar3 {
  bottom: 12.5px;
  background-color: red;
}

/*
  ハンバーガーメニューがクリックされたら
  上の線を真ん中に移動させて45℃回転
*/
.bar1.open {
  top: 35px;
  transform: rotate(45deg);
}
/* 
  ハンバーガーメニューがクリックされたら
  真ん中の線は透明化して見えないようにする
*/
.bar2.open { opacity: 0; }

/*
  ハンバーガーメニューがクリックされたら
  下の線は真ん中に移動させて-45℃回転
*/
.bar3.open {
  top: 35px;
  transform: rotate(-45deg);
}
    
    
/*
  ドロワーメニュー（右から左に現れる）のデザイン
*/
.drawer {
  width: 100vw;
  height: 100%;
  position: fixed;
  top: 0;
  right: -100%;
  -webkit-transition: .7s;
  transition: .5;
  background: rgba(51, 51, 51, 0.7);
  padding: 150px 0;
  display:-webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
}

.drawer.open {
  right: 0;
}

.drawer-menu {
  padding: 0;
  margin: 0;
}

.drawer-item {
  list-style: none;
  margin-bottom: 30px;
}

.drawer-item:last-child {
  margin-bottom: 0;
}

.drawer-item a {
  text-decoration: none;
  font-size: 30px;
  color: #fff;
  font-weight: 700;
}

jQuery

  $('.menu-icon').click(function() {
    $('.bar1, .bar2, .bar3').toggleClass('open');
    $('.drawer').toggleClass('open');
  })
});

ハンバーガーメニューのアイコンがクリックされるたびにjQueryで設定したイベントが発動し、三本線やメニューにopenクラスがついたり外れたりします。

openクラスが付与された場合はCSSの設定どおり、三本線はバツ印になりメニューが画面内にスライドしてきます。

そしてopenというクラスが外れた場合はバツ印が三本線になり、メニューが画面外に消えていきます。

こんな感じで、三本線とメニューを組み合わせるとハンバーガーメニューを作ることができます。

何かの参考になれば幸いです。

それでは、またー。

三本線を作る

三本線をバツ印に変形させる

ハンバーガーメニューを作る

コメント