・ハンバーガーメニューを最初は非表示にし、520pxスクロールしたところで表示させます。
・ハンバーガーメニューを押下すると、上からメニューが表示されます。
ハンバーガーメニューがクリックされたときのcss
・navにcssのtransition: all .6s;を指定し、0.6秒かけて文字を表示
※最初はtransform: translateY(-100%);とopacity: 0;で非表示
ハンバーガーメニューを押下すると、transform: translateY(0);とopacity: 1;で表示
・maskクラスの透過背景もtransition: all .6s;を指定し、0.6秒かけて背景を表示
スクロールイベント:js
・画面トップから520pxスクロールされたとき、logoクラス、hamクラスにdisplay: block;を付与します。
520pxに満たない場合、display: none;が付与されます。
ハンバーガーメニューがクリックされたときのjs
・ハンバーガーメニューが押下され、hamクラスにclass=”active”がある場合とない場合で、
logoクラス、nav、maskクラスにもclass=”activeを付与したり、削除したりします。
スムーズスクロール:js
・ページ内リンクを取得し、画面トップからリンク先までの距離を取得後、指定の速度でスクロール
header部分のHTML / css
HTML
<header id="new-header">
<div class="new-wrapper">
<h1 class="logo">dummy site</h1>
<nav>
<ul>
<li><a href="#source">header部分のHTML / css</a></li>
<li><a href="#js">js</a></li>
<li><a href="#sec-01">ダミーセクション01</a></li>
<li><a href="#sec-02">ダミーセクション02</a></li>
<li><a href="#sec-03">ダミーセクション03</a></li>
</ul>
</nav>
<div class="ham">
<span></span>
<span></span>
<span></span>
</div>
<div class="mask"></div>
</div>
</header>
css
#new-header .new-wrapper {
margin-bottom: 0;
}
#new-header .new-wrapper .logo {
position: fixed;
top: 20px;
left: 20px;
color: #333;
font-weight: bold;
font-size: 1.6rem;
transition: all .6s;
z-index: 30;
}
#new-header .new-wrapper .logo.active {
color: #fff;
}
#new-header .new-wrapper nav {
transform: translateY(-100%);
opacity: 0;
transition: all .6s;
position: fixed;
top: 0;
left: 0;
right: 0;
text-align: center;
width: 100%;
height: auto;
background-color: #000;
z-index: 20;
}
#new-header .new-wrapper nav ul {
padding: 100px 0;
}
#new-header .new-wrapper nav ul li {
margin-bottom: 30px;
}
#new-header .new-wrapper nav ul li:last-child {
margin-bottom: 0;
}
#new-header .new-wrapper nav ul li a {
color: #fff;
}
#new-header .new-wrapper nav.active {
opacity: 1;
transform: translateY(0);
}
#new-header .new-wrapper .ham {
position: fixed;
width: 80px;
height: 80px;
right: 0;
top: 0;
z-index: 30;
}
#new-header .new-wrapper .ham span {
transition: all .6s;
position: relative;
background-color: #333;
width: 30px;
height: 2px;
left: 25px;
}
#new-header .new-wrapper .ham span:nth-child(1) {
position: absolute;
top: 30px;
}
#new-header .new-wrapper .ham span:nth-child(2) {
position: absolute;
top: 39px;
}
#new-header .new-wrapper .ham span:nth-child(3) {
position: absolute;
bottom: 30px;
}
#new-header .new-wrapper .ham.active span {
background-color: #fff;
}
#new-header .new-wrapper .ham.active span:nth-child(1) {
transform: translateY(9px) rotate(315deg);
}
#new-header .new-wrapper .ham.active span:nth-child(2) {
opacity: 0;
}
#new-header .new-wrapper .ham.active span:nth-child(3) {
transform: translateY(-9px) rotate(-315deg);
}
#new-header .new-wrapper .mask {
opacity: 0;
transition: all .6s;
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
z-index: 10;
}
#new-header .new-wrapper .mask.active {
opacity: 1;
}
js
※スクロール位置が520pxを超えた場合headerタグ内のlogoクラスとhamクラスを表示します。(520pxに満たない間は非表示) 表示されたハンバーガーメニューを押下するとhamクラスにclass=”active”が付与されます。
下記の切り替えです。 ハンバーガーメニューが押下され、hamクラスにclass=”active”がある場合、logoクラス、nav、maskクラスにもclass=”activeを付与します。 ハンバーガーメニューが押下され、hamクラスにclass=”active”がない場合、logoクラス、nav、maskクラスのclass=”activeを削除します。
※ページ内スムーズスクロールはヘッダーの高さがある場合、topからマイナスします。
$(function(){
/*==============================================
ハンバーガ―メニュー
================================================*/
// ハンバーガーメニューをクリックした時
$('.ham').on('click', function() {
// ハンバーガーメニューの共通処理を呼び出す
hamburger();
});
// メニュー内をクリックした時
$('nav').on('click', function() {
// ハンバーガーメニューの共通処理を呼び出す
hamburger();
});
// メニューリンクをクリックした時
$('nav a').on('click', function() {
// ハンバーガーメニューの共通処理を呼び出す
hamburger();
});
// maskをクリックした時
$('.mask').on('click', function() {
// ハンバーガーメニューの共通処理を呼び出す
hamburger();
});
function hamburger() {
// toggleClassを使用することで、hamクラスにactiveクラスが存在する場合は削除、
// 存在しない場合を追加する処理を自動で行ってくれる
$('.ham').toggleClass('active');
if ($('.ham').hasClass('active')) {
// logoクラスにactiveクラスが存在する場合は、logoクラスにもactiveクラスを追加する
$('.logo').addClass('active');
} else {
// logoクラスにactiveクラスが存在しない場合は、logoクラスからactiveクラスを削除する
$('.logo').removeClass('active');
}
if ($('.ham').hasClass('active')) {
// hamクラスにactiveクラスが存在する場合は、navにもactiveクラスを追加する
$('nav').addClass('active');
} else {
// hamクラスにactiveクラスが存在しない場合は、navからactiveクラスを削除する
$('nav').removeClass('active');
}
if ($('.ham').hasClass('active')) {
// hamクラスにactiveクラスが存在する場合は、maskクラスにもactiveクラスを追加する
$('.mask').addClass('active');
} else {
// hamクラスにactiveクラスが存在しない場合は、maskクラスからactiveクラスを削除する
$('.mask').removeClass('active');
}
}
/*==============================================
スクロール時のイベント
================================================*/
$(window).scroll(function() {
// スクロール位置を取得
let scroll = $(window).scrollTop();
/*==============================================
ロゴ、ハンバーガーメニューの表示
================================================*/
// スクロール位置が520pxを超えた場合
if (scroll > 520) {
// ロゴとハンバーガ―メニュをfadeInで表示する
$('.logo').fadeIn(500);
$('.ham').fadeIn(500);
// スクロール位置が520px未満の場合
} else {
// ロゴとハンバーガ―メニュをfadeOutで非表示にする
$('.logo').fadeOut(500);
$('.ham').fadeOut(500);
}
});
/*==============================================
ページ内スムーズスクロール
================================================*/
// ページ内リンクのイベント
$('a[href^="#"]').click(function(){
// リンクを取得
let href= $(this).attr("href");
// ジャンプ先のid名をセット
let target = $(href == "#" || href == "" ? 'html' : href);
// トップからジャンプ先の要素までの距離を取得
// ヘッダーの高さがある場合はtopからマイナスする
let position = target.offset().top - 80;
// animateでスムーススクロールを行う
// 600はスクロール速度で単位はミリ秒
$("html, body").animate({scrollTop:position}, 600, "swing");
return false;
});
});