4N-Work~TNTのボヤキ~

Time Limit 2044/12/22 3:46:57

【HTML & CSS & jQuery】ハンバーガメニューの実装方法

下記のようなハンバーガーメニューをどこからかのサイトで拾ってきて、サンプルデータを作成したので、公開します。

https://drive.google.com/file/d/12QRokmpUEz1EbrrJpRu_tbP3Gwa0E3vj/view?usp=sharing

 

①通常のメニュー

f:id:supera4d:20210623155027p:plain

②クリック時のアクション

f:id:supera4d:20210623155045p:plain

 

ファイル構成はこんな感じです。

f:id:supera4d:20210623155309p:plain

 

HTMLの記述(index.html)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>

<nav class="globalMenuSp">
<ul>
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Menu4</a></li>
<li><a href="#">Menu5</a></li>
</ul>
</nav>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

 

CSSに記述(stylesheet.css

/* ハンバーガーボタン */
.hamburger {
display : block;
position: fixed;
z-index : 3;
right : 13px;
top : 12px;
width : 42px;
height: 42px;
cursor: pointer;
text-align: center;
}
.hamburger span {
display : block;
position: absolute;
width : 30px;
height : 2px ;
left : 6px;
background : #555;
-webkit-transition: 0.3s ease-in-out;
-moz-transition : 0.3s ease-in-out;
transition : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
top: 10px;
}
.hamburger span:nth-child(2) {
top: 20px;
}
.hamburger span:nth-child(3) {
top: 30px;
}

/* ナビ開いてる時のボタン */
.hamburger.active span:nth-child(1) {
top : 16px;
left: 6px;
background :#fff;
-webkit-transform: rotate(-45deg);
-moz-transform : rotate(-45deg);
transform : rotate(-45deg);
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
top: 16px;
background :#fff;
-webkit-transform: rotate(45deg);
-moz-transform : rotate(45deg);
transform : rotate(45deg);
}

nav.globalMenuSp {
position: fixed;
z-index : 2;
top : 0;
left : 0;
color: #fff;
background: rgba(0,0,0,0.7);
text-align: center;
width: 100%;
opacity: 0;
transition: opacity .6s ease, visibility .6s ease;
}

nav.globalMenuSp ul {
margin: 0 auto;
padding: 0;
width: 100%;
}

nav.globalMenuSp ul li {
list-style-type: none;
padding: 0;
width: 100%;
transition: .4s all;
}
nav.globalMenuSp ul li:last-child {
padding-bottom: 0;
}
nav.globalMenuSp ul li:hover{
background :#ddd;
}

nav.globalMenuSp ul li a {
display: block;
color: #fff;
padding: 1em 0;
text-decoration :none;
}

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
opacity: 100;

}

 

JavaScript記述(ファイル名:script.js)

$(function() {
$('.hamburger').click(function() {
$(this).toggleClass('active');

if ($(this).hasClass('active')) {
$('.globalMenuSp').addClass('active');
} else {
$('.globalMenuSp').removeClass('active');
}
});
});

 以上がハンバーガーメニューになります。

 

お大事に。