Mi in progress

研究者の道ではなく、エンジニアになることを決意した人のブログ。

三本線のアイツ

ハンバーガーナビゲーションの実装ができるようになったので、学びの整理。

(1) 概要

会社HPのスマホ用サイトを構築するべく、画面の隅っこに必ずいる三本線のアイツ、ハンバーガーナビゲーションの実装を行うことにしました!

(2) ハンバーガーナビゲーションアイコンをHTMLとCSSで自作する

まず最初に悩んだのが、ハンバーガーアイコンを画像として貼り付けるか、CSSを用いてアイコンを自作するかということ。ググってみると、CSSで自作すれば、ハンバーガーから×に変化させるアニメーションを実装できることがわかったので、自作することにしました。以下参考にさせて頂いたページです。

www.nxworld.net

こちらの1番を用いました。

余談ですが自作にあたって一番驚いたのが、ハンバーガーナビゲーション部分のHTMLファイルが

HTML

<a class="menu-trigger" href="#">

<span></span>

<span></span>

<span></span>

</a>

こんなに簡単な記述だということでした。spanの空タグとは予想外。 

(3) クリックするとハンバーガーが×になるアニメーションを実装する

続いて、アニメーションの実装を行いました。

CSS (一部のみ)

.menu-trigger.active-btn span:nth-of-type(1) {
-webkit-transform: translateY(15px) rotate(-45deg);
/*transform: translateY(20px) rotate(-45px);*/
}

JS

$(function( ){
   $('.menu-trigger').on('click', function( ) {
   $(this).toggleClass('active-btn');
return false;
});
});

起こしたい変化(今回はハンバーガーから×になること)にクラス名をつけて、それをjsファイルで「クリックしたらそのクラスが追加されるよ」と書けばいいだけなんですね...

HTMLファイルは全くいじらないということに驚きました。

(4) ハンバーガーをクリックしたら、メニューも出てくるようにしたい

続いて、ハンバーガーをクリックしたら、メニューも出てくるようにするために、メニューを実装しました。まずはそのビュー部分から。

HTML

<div id="menu-bar-item">
 <ul>
  <li><a href="#section1">ニュース</a></li>
  <li><a href="#section2">事業内容</a></li>
  <li><a href="#section3">実績紹介</a></li>
  <li><a href="#section4">VISION</a></li>
  <li><a href="#section5">CONTACT</a></li>
</ul>
</div>

CSS

#menu-bar-item {
  display: none;
  background-color: rgba(0, 0, 0, 0.8);
  text-align: right;
  margin-top: 0px;
  width: 360px;
  margin: 0 auto;
}

#menu-bar-item li {
  padding: 16px;
}

#menu-bar-item li:not(:last-child) {
  border-bottom: 1px solid white;
}

#menu-bar-item a {
  color: white;
}

#menu-bar-item a:hover {
  color: pink;
}

ポイントはモーダル実装でお馴染みの、初期値はdisplay: none;にすることです。

続いて、起こしたい変化にクラス名をつけてその中身を実装していきます。そのときに参考にさせて頂いたのかこちらの記事です。

qiita.com

これを元に書いたCSS、JSがこちら。

HTML

#menu-bar-item.active-btn {
  display: block;
  opacity: 1;
  animation-duration: 0.5s;
  animation-name: fade-in;
  -moz-animation-duration: 0.5s;
  -moz-animation-name: fade-in;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-name: fade-in;
}

@keyframes fade-in {
0% {
  display: none;
  opacity: 0;
}

20% {
  display: block;
  opacity: 0.5;
}

100% {
  display: block;
  opacity: 1;
}
}

@-moz-keyframes fade-in {
0% {
  display: none;
  opacity: 0;
}

20% {
  display: block;
  opacity: 0.5;
}

100% {
  display: block;
  opacity: 1;
}
}

@-webkit-keyframes fade-in {
0% {
  display: none;
  opacity: 0;
}

20% {
  display: block;
  opacity: 0.5;
}

100% {
  display: block;
  opacity: 1;
}
}

JS

$(function( ){
  $('.menu-trigger').on('click',
  function( ){
  $(this).toggleClass('active-btn');
  $('#menu-bar-item').toggleClass('active-btn');
return false;
});
});

今回の実装一番の学びが、クリック1つで2つのイベントを起こしたいときに、2つ連ねて書けばOKだということでした。

というわけで、無事、ハンバーガー完成です(`・ω・)b