ハンバーガーメニューをつくりました
こんにちは。
デイトラ中級に入り、JavaScript と JQueryの基礎を学習しました。
ここからプログラミングっぽくなりました。
今回はjQureyをつかってハンバーガーメニューを実装していったので、試行錯誤つくったものを解説していきます。
作成サンプルはこちら ↓
ハンバーガーメニューのサンプル
実装した内容は以下になります。
- ハンバーガーメニューボタンをHTML CSSで作成。
- クリックするとメニューが開くと同時にハンバーガーメニューが×マークに変形。同時に画面全体を暗くする。
- ×マークをクリックすることでメニューがとじる。同時に画面の明るさを戻す
- メニュー展開時の画面が暗いところを押してもメニューを閉じて×マークがハンバーガーに戻す。
- メニューをおしたら指定箇所にリンクしてメニューを閉じる、画面の明るさを戻す。
以下、実装コードです。
[ HTML ]
ハンバーガーメニューボタン
<div class="hamburger-menu">
<span class="hamburger-menu__line"></span>
</div>
ハンバーガーボタンクリックで開くメニュー
<ul class="header-drawer">
<li><a href="">aaaa</a></li>
<li><a href="">aaaa</a></li>
<li><a href="">aaaa</a></li>
<li><a href="">aaaa</a></li>
</ul>
ハンバーガーメニュー展開時に全体を暗くする用のコード
<div id="gray-display"></div>
[ CSS ]
//ハンバーガーメニューアイコン----------------------
.hamburger-menu{
align-items: center;
width: 32px;
height: 32px;
cursor: pointer;
z-index: 10;
position: absolute;
right: 30px;
top: 30px;
}
.hamburger-menu__line{
display: block;
width: 100%;
height: 4px;
background-color:red;
position: relative;
transition: all 0.5s;
}
.hamburger-menu__line::before,
.hamburger-menu__line::after{
content: '';
display: block;
width: 100%;
height: 4px;
background-color: red;
position: absolute;
transition: all 0.5s;
}
.hamburger-menu__line::before{
transform: translateY(-12px);
}
.hamburger-menu__line::after{
transform: translateY(12px);
}
.hamburger-menu.open .hamburger-menu__line{
background-color: transparent;
}
.hamburger-menu.open .hamburger-menu__line::before{
transform: rotate(45deg);
}
.hamburger-menu.open .hamburger-menu__line::after{
transform: rotate(-45deg);
}
//ハンバーガーメニュークリックで開くドロワーメニュー-------
.header-drawer {
position: fixed;
top: -20px;
right: 0;
background-color: black;
width: 200px;
height: 400px;
padding-top: 100px;
z-index: 9;
display: none;
}
.header-drawer li {
font-size: 28px;
margin-bottom: 20px;
padding-left: 30px;
list-style: none;
text-align: center;
}
//メニュー展開時画面暗くする------------
#gray-display {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: gray;
opacity: 0.8;
z-index: 8;
//------------------------------------------
[ jQuery ]
$(function() {
//ハンバーガーメニュークリックでイベント作動
//ハンバーガーメニューにopenクラスがついていれば外す
// →×からハンバーガーにもどる
//ドロワーメニュー閉じる 画面暗い解除
$('.hamburger-menu').click( function() {
if($(this).hasClass('open')){
$(this).removeClass('open');
$('.header-drawer').slideToggle();
$('#gray-display').hide();
//ハンバーガーメニューにopenクラスがついていなければ追加
// →ハンバーガーから×に変形
//ドロワーメニュー開く 画面暗くする展開
}else{
$('.header-drawer').slideToggle();
$('#gray-display').show();
$(this).addClass('open');
}
});
//グレイ部分のクリックで全て閉じる
$('#gray-display').click(function() {
$(this).next().fadeOut(200,function() {
$('#gray-display').hide();
$('.header-drawer').slideUp();
$('.hamburger-menu').removeClass('open');
});
});
//ドロワーメニュークリックで全て閉じる
//×をハンバーガーに戻す
$('.header-drawer li').click(function() {
$('#gray-display').hide();
$('.header-drawer').hide();
$('.hamburger-menu').removeClass('open');
});
});
以上がハンバーガーメニュー実装になります。
まだ基礎しか勉強していないなかでの実装ですので、もっと効率的なものがあれば是非教えてください。
それでは
