HTMLにボタンを追加
まずは、HTMLにハンバーガーボタンのパーツとなる要素を書いていきます。
<div class="burger-btn">
<span class="bar bar_top"></span>
<span class="bar bar_mid"></span>
<span class="bar bar_bottom"></span>
</div>
CSSでボタンを装飾
それではCSSでハンバーガーボタンの見た目を作っていきます。
下記では、3本線を作成してます。
.burger-btn {
display: block;
width: 39px;
height: 39px;
position: relative;
z-index: 3;
border: none;
background-color: rgb(0, 0, 0);
margin: 0 0 0 auto;
}
.bar {
width: 20px;
height: 1px;
display: block;
position: absolute;
left: 50%;
transform: translateX(-50%);
background-color: #fff;
}
.bar_top {
top: 10px;
}
.bar_mid {
top: 50%;
transform: translate(-50%, -50%);
}
.bar_bottom {
bottom: 10px;
}
PC版の方では「.burger-btn」をdisplay: none;にして、ハンバーガーボタンを非表示にします。
CSSでハンバーガーメニューが開いたときの見た目を作成
それでは次に、ハンバーガーメニューが開いたときの見た目をつくっていきましょう。
ハンバーガーメニューが開いたときは以下2点が見た目の変化をして現れます。
⑴ボタンが3本線から☓印になる
⑵メニューが非表示から全画面表示になる
3本線が☓印になるCSS
3本線に対して、closeというclassを付加したときにばつ印になるようにCSSを書いていきます。
.burger-btn.close .bar_top {
transform: translate(-50%, 10px) rotate(45deg);
transition: transform 0.3s;
}
.burger-btn.close .bar_mid {
opacity: 0;
transition: opacity 0.3s;
}
.burger-btn.close .bar_bottom {
transform: translate(-50%, -8px) rotate(-45deg);
transition: transform 0.3s;
}
これで、「.burger-btn」にcloseというclassが追加されたときに、3本線がばつ印になります。
ハンバーガーメニューを全画面表示にする
次にハンバーガーメニューを全画面表示にするCSSを書きます。
.nav-menu li a {
color: rgb(255, 255, 255);
font-size: 1.5rem;
}
.nav-sns-color {
color: rgb(255, 255, 255);
font-size: 2rem;
}
.nav-item {
padding: 3rem;
}
.nav-sns-list {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.nav-list {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
height: 100%;
}
.nav-header-menu {
display: none;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 2;
}
.nav-sns-menu {
width: 100%;
height: 40%;
background-color: #1b1310;
z-index: 2;
display: flex;
justify-content: center;
}
.nav-sns-menu ul {
justify-content: center;
}
.nav-menu {
width: 100%;
height: 60%;
background-color: #1b1310;
flex-direction: column;
z-index: 2;
}
.nav-menu.nav-list {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.nav-menu.nav-item {
margin-right: 0;
margin-bottom: 40px;
}
上記が追記できたら、一番上の display:none; のコメントアウトを外して非表示にしておきます。
※私のポートフォリオにて記述したコードを記載しているので、コードが多くなってます。
jQueryでクリックイベント設定
それでは最後にjQueryでクリックイベントを設定して、ハンバーガーメニューが開閉するようにしましょう。
まずは下記Googleが提供しているCDN「jQuery」と「script.js」を読み込みます。
<ript src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="./js/script.js"></script>
それでは、script.jsに以下の記述をしましょう。
$(".burger-btn").on("click", function () { //「burger-btn」をクリックすると
$(".burger-btn").toggleClass("close"); //closeというclassを追加/削除。
$(".nav-header-menu").fadeToggle(500); //0.5秒かけてフェードイン/フェードアウト。
});
ここで、ブラウザの状態を確認しましょう。
ハンバーガーメニューが表示されたときにスクロールできてしまいます。
なので、style.cssとscript.jsに以下の記述を追記します。
【style.css】
body.noscroll{
overflow: hidden;
}
$(".burger-btn").on("click", function () {
$(".burger-btn").toggleClass("close");
$(".nav-header-menu").fadeToggle(500);
$("body").toggleClass("noscroll");
});
これで、ハンバーガーメニューが開いたときにスクロールを固定できます。
該当リンクへ遷移し、全体画面が閉じるように設定
$("#nav-menu a[href]").on("click", function (event) { //リンクがクリックされた時に、
$(".burger-btn").trigger("click"); //trigger("click")を実行
});
以上でハンバーガーメニューが実装されたかと思います。
まとめ
現在色んな場所で使われているハンバーガーメニュー。
シンプルなデザインとなりましたが、是非ご参考になればと思います。
↧