グローバルナビゲーション
-スクロールするとハンバーガーメニューに変化-
See the Pen 5-1-7 スクロールするとハンバーガーメニューに変化 by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.
「Result」内をスクロールして動きを確かめてね!
※CodePenは「.openbtn」というクラス名だと動作しなかったため、.openbtn+数字にしています。解説のクラス名と異なっていますのでご注意ください。
動きを実現する仕組み
jQueryを使い、ヘッダーの高さ以上までスクロールをしたら、ヘッダーにクラス名を付与してCSSで非表示にする。
同時に隠れていたハンバーガーメニューにクラス名を付与してCSS のアニメーションで出現させる。
ハンバーガーメニューがクリックされたら、ヘッダーにクラス名を再度付与し、CSS で全面に出現させる。
[使用するライブラリ]
* jQuery
HTMLの書き方
- head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/5-1-7.css"> </head>
- body内にヘッダーのナビゲーションとハンバーガーメニュー、コンテンツのHTMLを記載します。
<header id="header"> <h1>Logo</h1> <nav id="g-navi"> <ul> <li><a href="#area-1">Area1</a></li> <li><a href="#area-2">Area2</a></li> <li><a href="#area-3">Area3</a></li> </ul> </nav> </header> <div class="openbtn"><span></span><span></span><span></span></div> <main> <section id="area-1"> <h2>Area 1</h2> <p>内容が入ります。</p> <!--/area1--></section> <section id="area-2"> <h2>Area 2</h2> <p>内容が入ります。</p> <!--/area2--></section> <section id="area-3"> <h2>Area 3</h2> <p>内容が入ります。</p> <!--/area3--></section> <!--/main--></main> <footer id="footer"> <small>© copyright.</small> </footer>
- body 終了タグ直前に jQuery、動きを制御する自作のJS の2 つを読み込みます。
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <!--自作のJS--> <script src="js/5-1-7.js"></script> </body>
自作のCSS内の書き方
/*========= 途中からハンバーガーメニューに変化するのためのCSS ===============*/
/*========= ボタンのためのCSS ===============*/
/*ボタン全体の形状*/
.openbtn{
/*はじめは非表示に*/
display: none;
/*ボタンの位置*/
position:fixed;
top:10px;
right: 10px;
z-index: 999;
/*ボタンの形状*/
background:#666;
cursor: pointer;
width: 50px;
height:50px;
border-radius: 5px;
}
/*ボタンのアイコン設定*/
.openbtn span{
display: inline-block;
transition: all .4s;
position: absolute;
left: 14px;
height: 3px;
border-radius: 2px;
background-color: #fff;
width: 45%;
}
.openbtn span:nth-of-type(1) {
top:15px;
}
.openbtn span:nth-of-type(2) {
top:23px;
}
.openbtn span:nth-of-type(3) {
top:31px;
}
/*activeクラスが付与された後のボタンのアイコン設定*/
.openbtn.active span:nth-of-type(1) {
top: 18px;
left: 18px;
transform: translateY(6px) rotate(-45deg);
width: 30%;
}
.openbtn.active span:nth-of-type(2) {
opacity: 0;
}
.openbtn.active span:nth-of-type(3){
top: 30px;
left: 18px;
transform: translateY(-6px) rotate(45deg);
width: 30%;
}
/*fadeDownクラスが付与された後のボタンの出現アニメーション設定*/
.fadeDown {
animation-name: fadeDownAnime;
animation-duration: 0.5s;
animation-fill-mode: forwards;
opacity: 0;
display: block;
}
@keyframes fadeDownAnime{
from {
opacity: 0;
transform: translateY(-100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/*========= ヘッダーナビゲーションのためのCSS ===============*/
/*==ヘッダーの形状*/
#header{
height: 70px;
width:100%;
display: flex;
justify-content: space-between;
align-items: center;
background:#333;
color:#fff;
text-align: center;
padding: 20px;
}
/*.doneクラスがついたヘッダー*/
#header.dnone {
opacity: 0;/*透過0にして非表示に*/
}
/*メニューボタンをクリックした際に付与されるpanelactiveクラスがついたら*/
#header.dnone.panelactive {
opacity: 1;/*不透明にして出現*/
}
/*==ヘッダーのテキストナビゲーションの形状*/
#g-navi ul{
list-style: none;
display: flex;
justify-content: center;
}
#g-navi ul li a{
display: block;
text-decoration: none;
color: #666;
padding:10px;
}
#g-navi ul li.current a,
#g-navi ul li a:hover{
color:#fff;
}
/*.doneクラスがついたヘッダーのテキストナビゲーションの形状*/
#header.dnone #g-navi{
/*固定位置にして最背面に*/
position:fixed;
top: 0;
left: 0;
z-index: -1;
/*高さと幅*/
width:100%;
height: 100vh;
/*天地中央&テキスト中央揃え*/
display: flex;
justify-content: center;
align-items: center;
text-align: center;
/*はじめは透過0に*/
opacity: 0;
transition: all 0.4s;
}
/*メニューボタンをクリックした際に付与されるpanelactiveクラスがついたナビゲーションの形状*/
#header.dnone.panelactive #g-navi{
opacity: 1;/*不透明に*/
z-index:3;/*最前面に*/
background:#eee;
}
#header.dnone.panelactive #g-navi ul{
display:block;/*flexの横並びをblockにして縦並びに*/
}
/*リストの形状*/
#header.dnone.panelactive #g-navi li a{
color: #333;
text-decoration: none;
padding:10px;
display: block;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: bold;
transition:all 0.3s;
}
section{
position: relative;
z-index: 1;
}
/* 以下は検証用のレイアウトのための CSS*/
section{
padding:300px 0;
}
自作のJS内の書き方
//スクロールをするとハンバーガーメニューに変化するための設定を関数でまとめる
function FixedAnime() {
//ヘッダーの高さを取得
var headerH = $('#header').outerHeight(true);
var scroll = $(window).scrollTop();
if (scroll >= headerH){//ヘッダーの高さ以上までスクロールしたら
$('.openbtn').addClass('fadeDown');//.openbtnにfadeDownというクラス名を付与して
$('#header').addClass('dnone');//#headerにdnoneというクラス名を付与
}else{//それ以外は
$('.openbtn').removeClass('fadeDown');//fadeDownというクラス名を除き
$('#header').removeClass('dnone');//dnoneというクラス名を除く
}
}
// 画面をスクロールをしたら動かしたい場合の記述
$(window).scroll(function () {
FixedAnime();//スクロールをするとハンバーガーメニューに変化するための関数を呼ぶ
});
// ページが読み込まれたらすぐに動かしたい場合の記述
$(window).on('load', function () {
FixedAnime();//スクロールをするとハンバーガーメニューに変化するための関数を呼ぶ
});
//ボタンをクリックした際のアニメーションの設定
$(".openbtn").click(function () {//ボタンがクリックされたら
$(this).toggleClass('active');//ボタン自身に activeクラスを付与し
$("#header").toggleClass('panelactive');//ヘッダーにpanelactiveクラスを付与
});
$("#g-navi li a").click(function () {//ナビゲーションのリンクがクリックされたら
$(".openbtn").removeClass('active');//ボタンの activeクラスを除去し
$("#header").removeClass('panelactive');//ヘッダーのpanelactiveクラスも除去
});
//リンク先のidまでスムーススクロール
//※ページ内リンクを行わない場合は不必要なので削除してください
$('#g-navi li a').click(function () {
var elmHash = $(this).attr('href');
var pos = $(elmHash).offset().top-0;
$('body,html').animate({scrollTop: pos}, 1000);
return false;
});
バリエーション
を見る
ドロップダウンメニュー(上)
ドロップダウンメニュー(左)
ドロップダウンメニュー(写真付 上ナビ)
ドロップダウンメニュー(写真付 左ナビ)
スクロールすると上部に固定
スクロール途中から上部固定
スクロール途中からヘッダーの高さが小さくなる
スクロール途中でヘッダーが消え、上にスクロールすると復活
スクロールすると位置が固定して追従
クリックしたらナビが上から下に出現
クリックしたらナビが下から上に出現
クリックしたらナビが左から右に出現
クリックしたらナビが右から左に出現
クリックしたら背景が全面に広がる
クリックしたら円形背景が拡大(上から)
クリックしたら円形背景が拡大(下から)
クリックしたら円形背景が拡大(右から)
クリックしたら円形背景が拡大(左から)
クリックしたら円形背景が拡大(右上から)
クリックしたら円形背景が拡大(右下から)
クリックしたら円形背景が拡大(左上から)
クリックしたら円形背景が拡大(左下から)
クリックしたら円形背景が拡大(中央から)
クリックしたらナビ背景コンテンツがぼかされる
追従メニューの現在地ハイライト
「機能」に関わる
動き一覧
基礎から学びたい方へ
Webサイトの動きを実現する仕組みと
準備について基礎から学びたい方は
下記をまず読み、基本を理解してから
コピペしましょう
Webサイトの動きを
実現する仕組みと準備
書籍情報
紙面だからこそできるまとめ方でコードを説明し、
全体を俯瞰して調べることが出来る構成になっています。
もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。
購入をしてくださった方には特典がありますので是非チェックしてみてください!