先日「フルスクリーンナビゲーションの参考サイト15選」という記事を書きました。
今回は実践編をやっていこうと思います。シンプルに縦に並ぶフルスクーリーンナビゲーションを作ります。
HTML
<body>
<a class="menu">
<span class="menu__line menu__line--top"></span>
<span class="menu__line menu__line--center"></span>
<span class="menu__line menu__line--bottom"></span>
</a>
<nav class="gnav">
<div class="gnav__wrap">
<ul class="gnav__menu">
<li class="gnav__menu__item"><a href="">About</a></li>
<li class="gnav__menu__item"><a href="">Works</a></li>
<li class="gnav__menu__item"><a href="">Recruit</a></li>
<li class="gnav__menu__item"><a href="">News</a></li>
<li class="gnav__menu__item"><a href="">Contact</a></li>
</ul>
</div><!--gnav-wrap-->
</nav>
<div class="hero"></div>
</body>
極力シンプルにしました。
- 「menu」：ハンバーガーメニュー
- 「gnav」：フルスクリーンナビゲーション
- 「hero」：メインビジュアル
になります。
CSS
ハンバーガーメニュー
/*menu*/
.menu{
height: 20px;
position: absolute;
right: 20px;
top: 20px;
width: 30px;
z-index: 99;
}
.menu__line{
background: #fff;
display: block;
height: 2px;
position: absolute;
transition:transform .3s;
width: 100%;
}
.menu__line--center{
top: 9px;
}
.menu__line--bottom{
bottom: 0;
}
.menu__line--top.active{
top: 8px;
transform: rotate(45deg);
}
.menu__line--center.active{
transform:scaleX(0);
}
.menu__line--bottom.active{
bottom: 10px;
transform: rotate(135deg);
}
24行目〜
このあと記載しますが、クリックしたらjQueryで「active」クラスを付与してアニメーションさせています。
フルスクリーンナビゲーション
/*gnav*/
.gnav{
background: rgba(0,0,0,0.8);
display: none;
height: 100%;
position: fixed;
width: 100%;
z-index: 98;
}
.gnav__wrap{
align-items:center;
display: flex;
height: 100%;
justify-content: center;
position: absolute;
width: 100%;
}
.gnav__menu__item{
margin: 40px 0;
}
.gnav__menu__item a{
color: #fff;
font-size: 2em;
font-weight: bold;
padding: 40px;
text-decoration: none;
transition: .5s;
}
.gnav__menu__item a:hover{
color: #666;
}
38行目
jQueryで開閉しますので初期は非表示にしておきます。
44〜51行目
「gnav__wrap」に「display: flex;」を指定して「align-items:center」と「justify-content: center;」でフルスクリーンナビゲーションの中のメニューを画面の縦横方向をセンター揃えにしています。flexコンテナーは縦のセンター揃えも簡単に指定できてとても便利です。
メインビジュアル
.hero{
background:url(images/hero.jpg) no-repeat;
background-position: 50% 50%;
background-size: cover;
height: 100vh;
}
メインビジュアルは「height: 100vh」で画面の高さ合わせて、「background-size: cover;」で全体に背景画像を表示しています。
jQuery
$('.menu').on('click',function(){
$('.menu__line').toggleClass('active');
$('.gnav').fadeToggle();
});
「menu」をクリックしたらハンバーガーメニューの横ライン「menu__line」に「toggleClass」でクラスを付けたり外したりしてアニメーションさせます。
また、「gnav」も「fadeToggle」で表示・非表示を交互に切り替えています。
jQueryはこれだけです。簡単ですね。
応用版
最後にナビゲーションメニューをアニメーションさせました。HTMLは変更なしです。
応用版CSS
/*gnav*/
.gnav{
background: rgba(0,0,0,0.8);
display: none;
height: 100%;
position: fixed;
width: 100%;
z-index: 98;
}
.gnav__wrap{
align-items:center;
display: flex;
height: 100%;
position: absolute;
width: 100%;
}
.gnav__menu{
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 170px;
}
.gnav__menu__item{
margin: 40px 0 40px 100px;
opacity: 0;
}
.gnav__menu__item a{
color: #fff;
font-size: 2em;
font-weight: bold;
text-decoration: none;
transition: .5s;
}
.gnav__menu__item a:hover{
color: #666;
}
CSSは「gnav」の部分だけ少し変更します。
24・25行目
アニメーションさせるので、右にマージンをとって位置をずらし、「opacity:0」で透明にしておきます。
応用版jQuery
var navFlg = false;
$('.menu').on('click',function(){
$('.menu__line').toggleClass('active');
$('.gnav').fadeToggle();
if(!navFlg){
$('.gnav__menu__item').each(function(i){
$(this).delay(i*300).animate({
'margin-left' : 0,
'opacity' : 1,
},500);
});
navFlg = true;
}
else{
$('.gnav__menu__item').css({
'margin-left' : 100,
'opacity' : 0,
});
navFlg = false;
}
});
1行目
フルスクリーンナビゲーションが開いているか閉じているか判別するため「navflag」を定義します。
5行目
「navflag」でフルスクリーンナビゲーションの状態を判別し、閉じている場合はマージンを０にして移動し、「opacity:1」で透明を解除します。
6・7行目
順番にアニメーションさせるので「each」メソッドの中で「delay(i*300)」としてタイミングをずらしています。
14行目
開いている場合はその逆で初期の状態に戻します。開いている場合はアニメーションは必要ないので「animate」ではなく「css」メソッドで指定しました。
12・19行目
「navflag」の状態を更新します。
記載しているコードは動きの確認程度につけたアニメーションなのでかなりぎこちない動きですが、サンプルのほうはイージングプラグインを入れて「easeOutBack」にしています。この一手間でかなり動きの印象が変わるので色々やってみてくださいね。
まとめ
今回はシンプルなフルスクリーンナビゲーションを作りましたが、画面を広く使えるのでアイデア次第でできることがたくさんあります。また別の機会でスプリットレイアウトにしたり、色々やってみたいと思います。
フルスクリーンナビゲーションのスプリットレイアウトバージョンも実践編やってみたので是非チェックしてみてください。
RELATED ARTICLES
