2022.07.27
【カメラ初心者向け】物撮りが上手くなるコツ ~食べ物編~
その他
制作
2021.04.06
ハンバーガーボタンを押したら表示されるナビゲーションメニューの動きやデザインはさまざまです。
Webサイトのデザインに合ったハンバーガーメニューを実装しており、右または左からスライドしてくる動きを付けているWebサイトが多いと思います。
こちらの実装方法については、以下記事でご紹介していますので、ご参考ください。
今回は全画面でふわっとフェイドインしてくるナビゲーションメニューの実装方法をご紹介します。
ブランドサイトなどシンプルで綺麗なWebサイトで実装されているイメージです。
ナビゲーションメニューの動き1つとっても、動きのバリエーションを持っておくとコーディングの幅が広がるでしょう。
目次
まずは、完成したコードと表示画面をご覧ください。
コピペで使用することができます。
See the Pen ハンバーガーメニュー(全画面) by spiqa design (@spiqa_design) on CodePen.
それでは、各コードごとに解説いたします。
<a class="toggle-btn">
<span class="toggle-btn__line toggle-btn__line--top"></span>
<span class="toggle-btn__line toggle-btn__line--center"></span>
<span class="toggle-btn__line toggle-btn__line--bottom"></span>
</a>
<nav class="global-nav">
<div class="global-nav__inner">
<ul class="global-nav__list">
<li class="global-nav__item"><a href="#">TOP</a></li>
<li class="global-nav__item"><a href="#">ABOUT</a></li>
<li class="global-nav__item"><a href="#">WORKS</a></li>
<li class="global-nav__item"><a href="#">CONTACT</a></li>
</ul>
</div>
</nav>
<div class="main"></div>
大きく分けて3つの領域に分かれます。
/* ハンバーガーボタン
============================== */
.toggle-btn {
width: 30px;
height: 30px;
position: absolute;
right: 20px;
top: 20px;
z-index: 2;
}
.toggle-btn__line {
background: #fff;
display: block;
height: 2px;
position: absolute;
transition: transform 0.5s;
width: 100%;
}
.toggle-btn__line--top {
top: 3px;
}
.toggle-btn__line--center {
top: 15px;
}
.toggle-btn__line--bottom {
top: 27px;
}
.toggle-btn__line--top.active {
top: 15px;
transform: rotate(45deg);
}
.toggle-btn__line--center.active {
transform: scaleX(0);
}
.toggle-btn__line--bottom.active {
top: 15px;
transform: rotate(135deg);
}
/* ナビゲーションメニュー
============================== */
.global-nav {
display: none;
position: fixed;
background: rgba(0, 0, 0, 0.7);
width: 100%;
height: 100%;
z-index: 1;
}
.global-nav__inner {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.global-nav__item {
margin-bottom: 30px;
}
.global-nav__item a {
color: #fff;
font-size: 30px;
font-weight: bold;
text-decoration: none;
transition: 0.5s;
}
.global-nav__item a:hover {
opacity: 0.7;
}
/* メイン画面
============================== */
.main {
background: url(http://note.spiqa.design/wordpress/wp-content/uploads/2021/04/sky-scaled.jpg)
center center no-repeat;
background-size: cover;
height: 100vh;
}
CSSも3つの領域に分けて記述しています。
ハンバーガーボタンには、activeクラスが付与された時用のスタイルも記述しておきます。
activeクラスについてはjQueryの記述の際に解説します。
ハンバーガーボタンをクリックしたら表示される全画面のナビゲーションメニューは、display: none;
を指定して非表示にしておきます。
jQuery(document).ready(function($){
$('.toggle-btn').on('click',function(){
$('.toggle-btn__line').toggleClass('active');
$('.global-nav').fadeToggle();
});
});
jQueryはとてもシンプルですね。
$('.toggle-btn').on('click',function(){~});
は、toggle-btn
を付与された要素をクリックしたら{~}内の処理を行うという意味です。
{~}内にはtoggle-btn__line
にactiveクラスが指定されていない場合は指定、指定されている場合は削除という記述です。
つまりtoggle-btn
をクリックするたびにactiveクラスを追加・削除して、ハンバーガーボタンが×になったり戻ったりする動きを実現しています。
global-nav
は、toggle-btn
をクリックするたびにフェイドイン、フェイドアウトするという内容が記述されています。
HTMLとCSSは記述が少し長いですが、jQueryは短くシンプルですね。
とても簡単に実装でき、さまざまなWebサイト制作に活用できるのでぜひご参考ください。
関連記事はこちら