目次
jQueryを使ってみよう！
今現在（2024/02）、賛否両論ありますが、ハンバーガーメニューを作っていきます。
javascriptで書けたら1番いいんですけど……只今勉強中で、jQueryを使っていきます。
使うのはいいけど……どうすんの？
早速見ていこう！
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script> これを、htmlの<body>内の1番最後に書いておいて下さい。
脱jQueryの動きが加速していると言われていますが、ちょくちょく更新されていて、今現在（2024/02）はver3.7.1になります。
ハンバーガーメニューの作り方（デモ画面）
まず、デモ画面はこちら！画面サイズが767px以下の時に、ハンバーガーメニューになるようなレスポンシブサイトにします。
ヘッダー部分の、サイトロゴとグローバルナビゲーションを除いた部分を、ハンバーガーメニューで作っていきます。
サイトロゴの配置は、左端のパターンと真ん中のパターンがありますが、個人的に真ん中が好きなので、その様にやっていきます。
ハンバーガーメニューの作り方（html）
<!-- ヘッダー -->
<header>
<div id="headerContent">
<div id="sp_headerContent">
<a id="headerMenuBtn" href="#"><img src="images/menu_open.png" alt="メニューを開く"></a>
</div><!--sp_headerContent-->
<div id="headerMenu">
<h2>メニュー<a id="headerMenuClose" href="#"><img class="close" src="images/btn_close_02.png" alt="閉じる"></a></h2>
<!--ナビバー左側-->
<div class="left">
<ul class="utility">
<li><a href="">ホーム</a></li>
<li><a href="">お問い合わせ一覧</a></li>
<li><a href="">アクセス</a></li>
</ul>
</div><!--left-->
<!--ナビバー右側-->
<div class="right">
<ul class="utility">
<li><a href="">サイトマップ</a></li>
<li><a href="">ENGLISH</a></li>
<li><a href="">採用情報</a></li>
</ul>
</div><!--right-->
</div><!--headerMenu-->
</div><!--headerContent-->
</header>ハンバーガーメニューの作り方（css）
@charset "UTF-8";
* {
padding: 0;
margin: 0;
}
/* 共通 */
#header {
width: 100%;
padding-top: 6px;
}
#headerContent {
margin: 0 auto;
}
#headerMenu {
width: 100%;
}
/* 画面サイズ(1025px以上) */
@media screen and (min-width:1025px) {
#headerContent {
width: 980px;
height: 110px;
}
}
/* 画面サイズ(768~1024px) */
@media screen and (min-width:768px) and (max-width:1024px) {
#headerContent {
width: 100%;
height: 110px;
}
.left {
margin-left: 10px;
}
.right {
margin-right: 10px;
}
}
/* 画面サイズ(768px以上) */
@media screen and (min-width:768px) {
#headerMenu h2 {
display: none;
}
#headerMenuBtn {
display: none;
}
#headerMenu {
display: flex;
justify-content: space-between;
}
/* ナビバー左側 */
.left {
margin-top: 17px;
}
/* ナビバー右側 */
.right {
margin-top: 17px;
}
/* ナビバー */
.utility {
display: flex;
list-style: none;
}
.utility li {
font-size: 13px;
line-height: 1;
}
.utility li:nth-child(1) {
padding-right: 12px;
}
.utility li:nth-child(2) {
padding: 0 12px;
border-left: 1px solid #e1e1e1;
}
.utility li:nth-child(3) {
padding-left: 12px;
border-left: 1px solid #e1e1e1;
}
.utility li a {
color: #434343;
}
.utility li a:hover {
text-decoration: none;
}
}
/* 画面サイズ（767px以下）（ハンバーガーメニュー） */
@media screen and (max-width:767px) {
#headerContent {
width: 100%;
}
#sp_headerContent {
position: relative;
width: 100%;
height: 45px;
}
#headerMenuBtn {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 10px;
width: 30px;
}
#headerMenuBtn img {
width: 100%;
}
#headerMenu {
position: fixed;
top: 0;
right: -100%;
width: 100%;
height: 100%;
transition: 0.3s;
}
.open #headerMenu {
right: 0;
}
#headerMenu h2 {
position: relative;
background-color: #f1f4ff;
font: inherit;
font-size: 18px;
padding: 10px;
}
/* ハンバーガーメニューを閉じるボタン */
#headerMenu h2 .close {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 10px;
width: 22px;
}
.utility {
list-style: none;
}
.utility li a {
display: block;
color: #245dc1;
padding: 10px 0px 10px 10px;
font-size: 15px;
border-bottom: 1px solid #ccc;
}
.utility li a:hover {
text-decoration: none;
}
}cssを長々と書いてますが、ポイントは105行目～115行目のところだけ！
最初、全部右側に隠れていて、クリックするとopenとういうクラスが付き、右から飛び出してくるという感じですね。
最初のアスタリスクのところは、リセットの為に書いています。
アスタリスクは、全部のhtmlタグを1回で指定できます。
また、block、inline、inline-blockなどの説明を全くしていませんでしたが、次のサイトがすごく分かりやすいです。
【CSS】displayの使い方を総まとめ！inlineやblockの違いは？ | サルワカ
ハンバーガーメニューの作り方（jQuery）
/* ハンバーガーメニュー */
$(function() {
$('#headerMenuBtn').on('click', function() {
$('body').addClass('open');
return false;
});
$('#headerMenuClose').on('click', function() {
$('body').removeClass('open');
return false;
});
});return false;がないと、クリックした時にリンク先に移動してしまいます。
それを防ぐために、書いています。
javascriptとは、意味が違うので注意です。
さいごに
生粋のjavascriptは、只今勉強中です。
今日は、ありがとうございました。では、また！