【HTML・CSS・jQuery】フルスクリーンナビゲーションを作る。(スプリットレイアウトバージョン)

前回「フルスクリーンナビゲーションを作る。(シンプルバージョン)」という記事を書きました。

合わせて読みたい

【HTML・CSS・jQuery】フルスクリーンナビゲーションを作る。(シンプルバージョン)
2018.06.29

今回はスプリットレイアウトバージョンのフルスクリーンナビゲーションを作って行きたいと思います。こんな感じになりました。

サンプル

スプリットレイアウトバージョンのフルスクリーンナビゲーションは下記の記事で紹介してます。

合わせて読みたい

【Webデザイン】フルスクリーンナビゲーションの参考サイト15選
2018.06.15

今回はその中で特に下のサイトを参考にさせていただきました。

monopo.co.jp

monopo | Tokyo based design-driven creative agency

We deliver design-driven solutions through digital experiences, branding, advertising and video production.

Contents

1 HTML
2 CSS
3 jQuery
4 まとめ

HTML

<div class="fullnav">
    <div class="fullnav__nav transition10">
        <nav class="gnav">
            <ul class="gnav__menu">
                <li class="gnav__menu__item transition10 delay05"><a href="">Top</a></li>
                <li class="gnav__menu__item transition10 delay06"><a href="">About</a></li>
                <li class="gnav__menu__item transition10 delay07"><a href="">Works</a></li>
                <li class="gnav__menu__item transition10 delay08"><a href="">Company</a></li>
                <li class="gnav__menu__item transition10 delay09"><a href="">Contact</a></li>
            </ul>
        </nav>
    </div><!--fullnav__nav-->
    <div class="fullnav__cnt transition10 delay01">
        <div class="fullnav__cnt__inner">
            <h3 class="fullnav__cnt__title transition10 delay07">Latest article</h3>
            <ul class="fullnav__cnt__menu">
                <li class="fullnav__cnt__menu__item transition10 delay08"><a href="">article item1</a></li>
                <li class="fullnav__cnt__menu__item transition10 delay09"><a href="">article item2</a></li>
                <li class="fullnav__cnt__menu__item transition10 delay10"><a href="">article item3</a></li>
                <li class="fullnav__cnt__menu__item transition10 delay11"><a href="">article item4</a></li>
            </ul>
        </div><!--fullnav__cnt__inner-->
    </div><!--fullnav__cnt-->
</div><!--fullnav-->

フルスクリーンナビゲーションの構成は、フルスクリーンナビゲーション全体をラップする「fullnav」、左側のグローバルナビゲーション部分「fullnav__nav」、右側のコンテンツ部分「fullnav__cnt」となっております。

続いてアニメーションする順番に解説していきます。

2行目

この後のCSSでも書きますが、今回、アニメーションのタイミングはクラス名でコントロールします。「transition10」は1秒かけてアニメーションさせるクラスです。

13行目

次に右側ボックス「fullnav__cnt」に「transition10」と合わせて「delay01」を付与しています。「delay◯◯」クラスはアニメーションを遅らせるクラスです。「delay◯◯」の数字の部分が遅らせる秒数になっています。「delay01」なら0.1秒遅れてアニメーションが始まると言った具合です。

5〜9行目

グローバルナビゲーションの各リストもそれぞれタイミングをずらしてアニメーションさせるので「delay05」〜「delay09」のクラスを付与しました。これで一番最初のリストが0.5秒遅れてアニメーションが始まり、以降、0.1秒ずつ遅れてアニメーションしていきます。

15〜20行目

こちらもグローバルナビゲーションと同じ要領でタイトルとその下の各リストに「delay07」〜「delay11」までのクラスを付与してタイミングをずらします。

CSS

CSSは長いので部分ごとに分けて解説します。

アニメーションのタイミング

/*transition & delay*/
.transition10{transition:all 1s cubic-bezier(0.190, 1.000, 0.220, 1.000);}
.delay01{transition-delay: .1s;}
.delay02{transition-delay: .2s;}
.delay03{transition-delay: .3s;}
.delay04{transition-delay: .4s;}
.delay05{transition-delay: .5s;}
.delay06{transition-delay: .6s;}
.delay07{transition-delay: .7s;}
.delay08{transition-delay: .8s;}
.delay09{transition-delay: .9s;}
.delay10{transition-delay: 1s;}
.delay11{transition-delay: 1.1s;}

HTMLのところで書いたとおり、一度にアニメーションさせるのではなく、左右のボックスやナビゲーションのアイテムを1つずつを細かくタイミングをずらしてアニメーションさせるので、個別のクラスとして作成しておきます。

2行目

今回はすべてのアニメーションを1秒かけて行うので「transition10」クラスで指定します。「cubic-bezier」の数値は正直さっぱりわかりませんが、わからなくてもOK！とても便利なサイトがあります。
Ceaser – CSS Easing Animation Tool – Matthew Lein

上記サイトの「Easing」プルダウンでイージングを選択して「Effect」ボタンで実際の動きを確認できます。イメージに合うイージングを見つけたら、下にあるCSSコードの「cubic-bezier」の中の数値をコピペするだけです。

アニメーションで肝心なのは下記です。

何秒かけてアニメーションさせるか(デュレーション)
何秒遅れてアニメーションさせるか(ディレイ)
どんなスピードでアニメーションさせるか（イージング）

特に「イージング」はガラリと印象が変わるのでせっかくアニメーションさせるならぜひ設定したいところです。

3〜13行目

「.delay01」〜「.delay11」を作り、「transition-delay」プロパティで0.1秒ずつタイミングを遅らせています。

フルスクリーンナビゲーションの全体ラップ（fullnav）

/*fullnav*/
.fullnav{
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;    
}

全体をラップする「fullnav」は「position: fixed」にして高さ、幅をブラウザ100％にします。

左側のボックス(fullnav__nav)

/*fullnav__nav*/
.fullnav__nav{
    align-items: center;
    background: #fff;
    display: flex;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 0;
}
/*gnav*/
.gnav{
    margin: 0 auto;
    width: 40%;
}
.gnav__menu__item{
    margin:20px 0;
    opacity: 0;
    transform: translateY(100px);
}
.gnav a{
    color: #333;
    text-decoration: none;
}

左側のナビゲーション部分です。

25・27行目

グローバルナビゲーション「gnav」をラップする「fullnav__nav」は「display: flex;」、「align-items: center;」にしてグローバルナビゲーションが縦位置のセンターに来るようにします。

30・33行目

アニメーションさせますので初期状態は「opacity: 0;」、「width: 0;」にしておきます。

42・43行目

同じく「gnav」の各リストもアニメーションさせますので「opacity: 0;」、「transform: translateY(100px);」で透明かつ下に移動しておきます。

右側のボックス（fullnav__cnt）

/*fullnav__cnt*/
.fullnav__cnt{
	align-items: center;
	background: #333;
	color: #fff;
	display: flex;
	height: 100%;
	left: 30%;
	opacity: 0;
	position: absolute;
	top: 0;
	width: 0;
}
.fullnav__cnt__inner{
	margin: 0 auto;
	width: 80%;
}
.fullnav__cnt__title{
	margin-bottom: 20px;
	opacity: 0;
	transform: translateY(100px);
}
.fullnav__cnt__menu{
	list-style: none;
}
.fullnav__cnt__menu__item{
	margin:20px 0;
	opacity: 0;
	transform: translateY(100px);
}
.fullnav__cnt__menu__item a{
	color: #fff;
}

こちらも左側とほとんど同じです。初期状態では透明かつ幅や位置をアニメーションさせたいだけ指定しておきます。

フルスクリーンナビゲーションが開いた状態

/*on fullnav__nav*/
.fullnav.on .fullnav__nav{
	opacity: 1;
	width: 30%;
}
/*on gnav*/
.fullnav.on .gnav li{
	opacity: 1;
	transform: translateY(0);	
}
/*on fullnav__cnt*/
.fullnav.on .fullnav__cnt{
	opacity: 1;
	width: 70%;
}
.fullnav.on .fullnav__cnt__title{
	opacity: 1;
	transform: translateY(0);
}
.fullnav.on .fullnav__cnt__menu__item{
	opacity: 1;
	transform: translateY(0);
}

ハンバーガーメニューをクリックしたら「fullnav」にjQueryで「on」クラスを付与しますので、その状態のスタイルを指定していきます。やっていることは単純でそれぞれの要素を

透明からを戻す
位置、もしくは幅を戻す

これだけです。

jQuery

$('.menu').on('click',function(){
	$(this).toggleClass('on');
	if($('.fullnav').hasClass('on')){//fullnavが開いている時
		$('.fullnav').removeClass('on').fadeOut();
	}
	else{//fullnavが閉じている時
		$('.fullnav').fadeIn();
		setTimeout(function() {
			$(".fullnav").addClass("on");
		}, 200);
	}
});

前述のとおり、ハンバーガーメニュー「menu」をクリックしたタイミングが発火点なので、その中で処理を書いていきます。