三本線のアイツ
ハンバーガーナビゲーションの実装ができるようになったので、学びの整理。
(1) 概要
会社HPのスマホ用サイトを構築するべく、画面の隅っこに必ずいる三本線のアイツ、ハンバーガーナビゲーションの実装を行うことにしました！
(2) ハンバーガーナビゲーションアイコンをHTMLとCSSで自作する
まず最初に悩んだのが、ハンバーガーアイコンを画像として貼り付けるか、CSSを用いてアイコンを自作するかということ。ググってみると、CSSで自作すれば、ハンバーガーから×に変化させるアニメーションを実装できることがわかったので、自作することにしました。以下参考にさせて頂いたページです。
こちらの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>
#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;にすることです。
続いて、起こしたい変化にクラス名をつけてその中身を実装していきます。そのときに参考にさせて頂いたのかこちらの記事です。
これを元に書いた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;
});
});
今回の実装一番の学びが、クリック１つで２つのイベントを起こしたいときに、２つ連ねて書けばOKだということでした。
というわけで、無事、ハンバーガー完成です(｀・ω・)b
