スマホサイトにハンバーガーメニューを実装しよう！
スマホサイトを作った際にハンバーガーメニューによるメニュー表示の動作は欠かせません。
jQueryの使い方をスマホメニューの作り方から学んでいきましょう。
次のような動きのメニューを作成できます。
まずはメニューを作成する
次のような構成でスマホ用のメニューを作成してください。
最初のファイルとして以下ソースを利用しても良いです。（空のHTMLです）
制作しているサイトに次のようなコードを差し込みます。
HTML
<header class="header"> <div class="header-top"> <h1 class="sitelogo">サイトロゴ</h1> <button class="button open">open</button> </div> <div class="sp-menu"> <div class="header-top-close"> <h1 class="sitelogo">サイトロゴ</h1> <button class="button close">close</button> </div> <nav class="gnav"> <ul class="gnav-list"> <li class="gnav-list-item"> <a href="#">メニュー</a></li> <li class="gnav-list-item"><a href="#">メニュー</a></li> <li class="gnav-list-item"><a href="#">メニュー</a></li> <li class="gnav-list-item"><a href="#">メニュー</a></li> <li class="gnav-list-item"><a href="#">メニュー</a></li> </ul> </nav> </div> </header> <main> <p> ここに内容が入ります </p> </main> <footer class="footer"> xxxx </footer>
CSS
/* reset */
body,ul{
padding:0;
margin:0;
}
li{
list-style-type:none;
}
button{
border:none;
}
h1{
padding:0;
margin:0;
}
/* 全体のレイアウト スタイル指定 */
.header-top,.header-top-close{
display:flex;
justify-content: space-between;
background:#ccc;
align-items:center;
padding:10px;
}
.button{
width:40px;
height:40px;
background:#666;
border-radius:10px;
color:#fff;
cursor: pointer;
}
.header-top-close{
background:#78cac4;
}
.gnav-list{
background: #808080a3;
color:#fff;
}
.gnav-list-item a{
padding: 20px 10px;
text-decoration: none;
display:block;
color:#fff;
}
.footer{
background:#ccc;
padding:20px;
text-align:center;
}
/* メニューを固定配置にする */
.sp-menu{
position:fixed;
top:0;
left:0;
width:100%; /* fixedで幅が狭くなるので追加 */
}
/* 以下は ※レイアウトを作り終わってから追加すること! */
/* スマホメニューを初期状態で隠す */
.sp-menu{
transform:translateX(100%);
transition:1s; /* これがないとアニメーションにならない */
}
/* クリックされた際の状態(.activeのつけ外しによりアニメーションが動く)*/
.sp-menu.active{
transform:translateX(0);
}
構造としてはスマホ用のメニューをレイアウトし、それが「position:fixed;」で上に載っている状態です。
スマホメニューは「.sp-menu」であり、初期状態は隠しておきます。
「.active」を追加するとアニメーションが発動し、見えるようになります。
JavaScriptを記載する
上記ではボタンを押しても動かないので、ボタンをおしたら「.sp-menu」に「.active」を追加するというスクリプトを書いてみましょう。
まずはjQueryのCDNを読み込みましょう。
一番上にある「基礎ファイル」でやる場合はすでに読み込んでいるため作業は必要ありません。
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
次にスクリプトを追記しましょう。
記述は
$(function(){
});
の中に記載しないと動作しないことがあります。
$(".button.open,.button.close").click(function(){
$(".sp-menu").toggleClass("active");
});
こちらでボタンを押した場合に動作するはずです。
ボタンは2箇所ありますので、ボタン2箇所のclassを記載します。
さらに、ページ内リンクの場合メニューが開きっぱなしになってしまい邪魔なので、次の記述を追記します。
//ページ内リンクの場合メニューが邪魔になるので
//ナビの中身をクリックしたら隠すように指定
$(".gnav-list-item a").click(function(){
$(".sp-menu").toggleClass("active");
});
これで完成です。
完成ファイルは以下です。
おつかれさまでした！
