ヘッダーの動き【Vo.02】
・PCは左にメニューを固定。
・画面が900pxより小さくなったら、右上にハンバーガーメニューを配置し、クリックされたらメニューを表示に切り替える。
・ハンバーガーメニューを押下すると、左からスライドしてメニューを表示。
・ハンバーガーメニューの際、Vo.01と違うのはnavメニューにダークグレーの背景をつけ、div class=”mask”に透過背景を付けている。
※nav背景の下に透過背景がくるようにz-indexで調整
・左のメニューを固定するので、右の要素はcontainerでラップしてmargin-left: 250px;を指定し右に配置
ハンバーガーメニューがクリックされたときのcss
・スマホの際、navにcssのtransition: all .6s;を指定し、0.6秒かけて文字を表示
※最初はmargin-left: -250px;とopacity: 0;で非表示
ハンバーガーメニューを押下すると、margin-left: 0;とopacity: 1;で表示
・透過背景にもtransition: all .6s;を指定し、0.6秒かけて背景を表示
ハンバーガーメニューがクリックされたときのjs
・ハンバーガーメニューを押下すると、headerにopenクラスが付与
スムーズスクロール：js
・ページ内リンクを取得し、画面トップからリンク先までの距離を取得後、指定の速度でスクロール
header部分のHTML / css
HTML
<aside id="new-header">
<div class="new-wrapper">
<h1>dummy site</h1>
<nav>
<ul>
<li><a href="#source">header部分のHTML / css</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>
</aside>
css
.container {
margin-left: 250px;
}
.container .mv {
margin-top: 0;
}
#new-header {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 250px;
background-color: #eee;
}
#new-header .new-wrapper {
padding: 60px 4% 0;
}
#new-header .new-wrapper h1 {
font-weight: bold;
font-size: 1.6rem;
margin-bottom: 60px;
}
#new-header .new-wrapper nav ul li {
margin-bottom: 20px;
}
#new-header .new-wrapper nav ul li:last-child {
margin-bottom: 0;
}
@media screen and (max-width: 900px) {
.container {
margin-left: 0;
}
.container .mv {
margin-top: 80px;
}
#new-header {
height: 80px;
width: 100%;
top: 0;
left: 0;
right: 0;
margin-bottom: 80px;
}
#new-header .new-wrapper {
padding: 0 4%;
display: flex;
align-items: center;
justify-content: space-between;
}
#new-header .new-wrapper h1 {
margin-bottom: 0;
}
#new-header .new-wrapper nav {
opacity: 0;
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 250px;
height: 100vh;
background-color: #333;
padding: 80px 4% 0;
z-index: 30;
margin-left: -250px;
transition: all .6s;
}
#new-header .new-wrapper nav ul li {
margin-bottom: 20px;
}
#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 .ham {
position: relative;
width: 80px;
height: 80px;
z-index: 30;
}
#new-header .new-wrapper .ham span {
background-color: #333;
width: 30px;
height: 2px;
position: absolute;
left: 25px;
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 {
opacity: 0;
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100vh;
z-index: 20;
transition: all .6s;
}
#new-header.open nav {
opacity: 1;
margin-left: 0;
}
#new-header.open .ham span {
background-color: #fff;
}
#new-header.open .ham span:nth-child(1) {
transform: translateY(9px) rotate(315deg);
}
#new-header.open .ham span:nth-child(2) {
opacity: 0;
}
#new-header.open .ham span:nth-child(3) {
transform: translateY(-9px) rotate(-315deg);
}
#new-header.open .mask {
opacity: 1;
}
.mv {
height: calc(100vh - 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').on('click', function() {
$('#new-header').removeClass('open');
});
// メニューリンクをクリックした時にメニューを閉じる
$('nav a').on('click', function() {
$('#new-header').removeClass('open');
});
/*=================================================
ページ内スムーズスクロール
===================================================*/
// スマホの際
if (window.matchMedia('(max-width: 900px)').matches) {
// ページ内リンクのイベント
$('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;
});
// PCの際
} else if (window.matchMedia('(min-width:900px)').matches) {
/*=================================================
ページ内スムーズスクロール
===================================================*/
// ページ内リンクのイベント
$('a[href^="#"]').click(function(){
// リンクを取得
let href= $(this).attr("href");
// ジャンプ先のid名をセット
let target = $(href == "#" || href == "" ? 'html' : href);
// トップからジャンプ先の要素までの距離を取得
let position = target.offset().top;
// animateでスムーススクロールを行う
// 600はスクロール速度で単位はミリ秒
$("html, body").animate({scrollTop:position}, 600, "swing");
return false;
});
}
});
ダミーセクション01
ダミーセクション02
ダミーセクション03