![見出し画像](https://assets.st-note.com/production/uploads/images/103938534/rectangle_large_type_2_d2430454a4b74fbfeb1a731283d36f4d.png?width=1200)
Photo by
inagakijunya
ハンバーガーメニュー備忘録
今までLPばかりコーディングしていて、ハンバーガーメニューの作り方をすっかり忘れていた( ; ; )
コーダー志望なのにハンバーガーメニューすら作れないなんて!!!て思ったりしたけど、よく考えてみたら書き続けてないと忘れちゃうし、、、備忘録作って頭でちゃんと理解+後々見返せるようにしようとnote書きますよ!
覚えておくところ
・jQueryではjs-btnとheader__listにopenというクラスを付け外しする機能だけにする
・クラスopenにアニメーションをつけて開閉させる
・ページ内リンクをクリックした際にハンバーガーメニューが消えない問題は付与したopenクラスをremoveする作業をjQueryで行う
HTML完成形
<header class="header" id="top">
<div class="header__inner">
<h1 class="logo header__logo"><a href="index.html"><img src="img/logo.png" alt="ロゴ" /></a></h1>
<nav>
<ul class="header__list">
<li class="header__list-item"><a href="#works">works</a></li>
<li class="header__list-item"><a href="#skill">skill</a></li>
<li class="header__list-item"><a href="#vision">vision</a></li>
<li class="header__list-item"><a href="#about">about</a></li>
<li class="header__list-item">
<a href="https://note.com/chiaki_yayo">note</a>
</li>
<li class="header__list-item">
<a href=""><i class="fa-brands fa-github"></i></a>
</li>
<li class="header__list-item">
<a href="https://twitter.com/Chiakim18016950"
><i class="fa-brands fa-twitter"></i
></a>
</li>
</ul>
</nav>
<button type="button" class="btn js-btn">
<span class="btn-line"></span>
</button>
</div>
</header>
HTMLのポイントは、よくbuttonにspanを使って3本線作ることがあるがスッキリさせたかったので擬似要素で作る、というところ。
ちなみにツイッターとGitHubは font awesone を使っています。
CSS完成形(_btn.scss)
//color
$main-color: #eeece4;
$sub-color: #5e7b69;
$accent-color: #e6550c;
$hover-color: #e8a243;
/**************** ハンバーガーボタンのスタイリング ****************/
.btn {
/* ボタンの配置位置 */
position: fixed;
top: 25px;
right: 25px;
/* 最前面に */
z-index: 10;
/* ボタンの大きさ */
width: 40px;
height: 40px;
@include m.pc {
display: none;
}
@include m.tab {
display: none;
}
@include m.media{
display: none;
}
}
/***** 真ん中のバーガー線 *****/
.btn-line {
display: block;
/* バーガー線の位置基準として設定 */
position: relative;
/* 線の長さと高さ */
width: 100%;
height: 4px;
/* バーガー線の色 */
background-color: #d6d5d5;
transition: 0.2s;
}
/***** 上下のバーガー線 *****/
.btn-line::before,
.btn-line::after {
content: "";
/* 基準線と同じ大きさと色 */
position: absolute;
width: 100%;
height: 100%;
background-color: #d6d5d5;
transition: 0.5s;
}
.btn-line::before {
/* 上の線の位置 */
transform: translateY(-16px);
}
.btn-line::after {
/* 下の線の位置 */
transform: translateY(16px);
}
/***** メニューオープン時 *****/
.btn-line.open {
/* 真ん中の線を透明に */
background-color: transparent;
}
.btn-line.open::before,
.btn-line.open::after {
content: "";
background-color: #fff;
transition: 0.2s;
}
.btn-line.open::before {
/* 上の線を傾ける */
transform: rotate(45deg);
}
.btn-line.open::after {
/* 上の線を傾ける */
transform: rotate(-45deg);
}
/**************** ここまで、ハンバーガーボタンのスタイリング ****************/
パーシャルを使ってボタンだけ管理している。
CSS完成形(_header.scss)
//color
$main-color: #eeece4;
$sub-color: #5e7b69;
$accent-color: #e6550c;
$hover-color: #e8a243;
.header {
background-color: $sub-color;
/*padding: 33px 0;*/
position: sticky;
height: 100px;
width: 100%;
top: 0;
left: 0;
z-index: 3;
color: #eeece4;
}
.header__logo {
float: left;
margin-left: 20px;
@include m.tab {
margin-left: 50px;
}
@include m.sp{
width: 18%;
}
}
.header__inner {
margin: 0 auto;
overflow: hidden;
width: 100%;
max-width: 1200px;
}
.header__list {
font-family: "raleway";
align-items: center;
float: right;
margin: 30px 0;
@include m.tab {
width: 45%;
}
@include m.sp {
position: fixed;
right: -100%;
width: 100%;
height: 100vh;
background-color:$sub-color;
color: #efefef;
transition: 0.3s;
padding: 40% 0;
margin: 0;
float: inherit;
}
}
//header__listにopenのクラスを付与する
.header__list.open {
@include m.sp {
right: 0;
position: absolute;
}
}
.header__list-item {
margin-right: 30px;
float: left;
&:nth-last-child {
margin-right: 0;
}
@include m.tab {
margin-right: 5%;
}
@include m.sp {
display: block;
align-items: center;
justify-content: center;
width: 100%;
text-align: center;
margin: 20px 0;
}
}
h1 {
width: 6%;
padding: 10px 0;
@include m.tab {
width: 7%;
}
@include m.sp {
width: 10%;
}
}
header__list{right:-100vw;}
で横からフェードインで出てくるタイプのハンバーガーメニュー。
jQuery完成形
//ハンバーガーメニューをクリックするとopenのクラスが付与される
$(function () {
$('.js-btn').on('click', function () { // js-btnクラスをクリックすると、
$('.header__list , .btn-line').toggleClass('open'); // メニューとバーガーの線にopenクラスをつけ外しする
})
});
//ハンバーガーメニュー内のリンクをクリックしたらページを閉じ、×ボタンは消す
$(function () {
$(".header__list-item a").on("click", function () {
$(".header__list").removeClass("open");
$(".btn-line").removeClass("open");
});
});
この記事が気に入ったらサポートをしてみませんか?