ヘッダーの動き【Vo.01】
・ハンバーガーメニューを押下すると、メニューが表示されます。
・左からスライドしてメニューが表示
・背景 黒(透過)
ハンバーガーメニューがクリックされたときのcss
・navにtransition-delay: .4s;を指定し、0.4秒遅れて文字を表示
※表示・非表示切り替えの際、display: block;・display: none;指定だと挙動がおかしく見えたのでopacityの変化のみ指定
・透過背景にtransition: all .6s ease-in;を指定し、0.6秒かけて背景を表示
※最初はmargin-left: -300px;とopacity: 0;で非表示
※ハンバーガーメニューを押下すると、margin-left: 0;とopacity: 1;で表示
ハンバーガーメニューがクリックされたときのjs
・ハンバーガーメニューを押下すると、headerにopenクラスが付与
スムーズスクロール:js
・ページ内リンクを取得し、画面トップからリンク先までの距離を取得後、指定の速度でスクロール
header部分のHTML / css
HTML
<header id="new-header">
<div class="new-wrapper">
<h1>dummy site</h1>
<nav>
<ul>
<li><a href="#sec-01">ダミーセクション01</a></li>
<li><a href="#sec-02">ダミーセクション02</a></li>
<li><a href="#sec-03">ダミーセクション03</a></li>
<li><a href="#sec-04">ダミーセクション04</a></li>
</ul>
</nav>
<div class="ham">
<span></span>
<span></span>
<span></span>
</div>
<div class="mask"></div>
</div>
</header>
css
#new-header {
width: 100%;
height: 80px;
background-color: #fff;
z-index: 5;
position: fixed;
top: 0;
left: 0;
right: 0;
}
#new-header .new-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
}
#new-header .new-wrapper h1 {
font-weight: bold;
font-size: 2rem;
margin-left: 20px;
}
#new-header .new-wrapper nav {
opacity: 0;
position: fixed;
top: 100px;
left: 60px;
color: #fff;
transition-delay: .4s;
z-index: 20;
}
#new-header .new-wrapper nav ul li {
margin-bottom: 30px;
}
#new-header .new-wrapper nav ul li a {
color: #fff;
}
#new-header .new-wrapper .ham {
position: relative;
width: 80px;
height: 80px;
z-index: 20;
}
#new-header .new-wrapper .ham span {
position: absolute;
left: 25px;
background-color: #333;
height: 2px;
width: 30px;
transition: all .6s;
}
#new-header .new-wrapper .ham span:nth-child(1) {
top: 30px;
}
#new-header .new-wrapper .ham span:nth-child(2) {
top: 39px;
}
#new-header .new-wrapper .ham span:nth-child(3) {
bottom: 30px;
}
#new-header .new-wrapper .mask {
position: fixed;
top: 0;
left: 0;
width: 300px;
height: 100vh;
background-color: rgba(0, 0, 0, 0.9);
transition: all .6s ease-in;
margin-left: -300px;
opacity: 0;
z-index: 10;
}
#new-header.open .new-wrapper nav {
opacity: 1;
}
#new-header.open .new-wrapper .mask {
margin-left: 0;
opacity: 1;
}
#new-header.open .new-wrapper .ham span:nth-child(1) {
transform: translateY(9px) rotate(315deg);
}
#new-header.open .new-wrapper .ham span:nth-child(2) {
opacity: 0;
}
#new-header.open .new-wrapper .ham span:nth-child(3) {
transform: translateY(-9px) rotate(-315deg);
}
@media screen and (max-width: 768px) {
.header-move .mv {
height: calc(150vh - 80px);
margin-top: 80px;
}
}
js
※ハンバーガーメニューを押下するとheaderタグにclass=”open”が付与されます。 ※ページ内スムーズスクロールはヘッダーの高さがある場合、topからマイナスします。
$(function(){
/*=================================================
ハンバーガーメニューのクリックイベント
===================================================*/
$('.ham').on('click', function() {
if (!$('#new-header').hasClass('open')) {
$('#new-header').addClass('open');
} else {
$('#new-header').removeClass('open');
}
});
// .maskのエリアをクリックした時にメニューを閉じる
$('.mask').on('click', function() {
$('#new-header').removeClass('open');
});
// リンクをクリックした時にメニューを閉じる
$('nav a').on('click', function() {
$('#new-header').removeClass('open');
});
/*=================================================
ページ内スムーズスクロール
===================================================*/
// ページ内リンクのイベント
$('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;
});
});
ダミーセクション01
ダミーセクション02
ダミーセクション03