ハンバーガーボタンをクリックしたら画面の横からスライドして表示されるメニューの実装方法
みなさんこんにちは！エンジニアの高澤です！
今回はハンバーガーボタンをクリックしたら画面の横からスライドして表示されるメニューの実装方法について解説していきたいと思います。
今回の内容はサイト制作でよくあるハンバーガーメニューの実装になりますが、すぐにコピー＆ペーストして作ることができる記事があれば便利だなと思い執筆いたしました。
よろしければぜひ当記事をご活用いただき、お仕事や個人ブログの構築などにお役立ていただけましたら幸いです。
今回実装する内容
まずは今回実装する内容をご確認いただければと思います。
結論以下の内容になります。
See the Pen
Untitled by 高沢翔汰 (@wllijswc-the-sans)
on CodePen.
PCとスマホどちらにも対応した内容にはなりますが、どちらかというとPCの方で実装するイメージで掲載いたしました。
この後サンプルコードを掲載いたしますが、スマホでの実装の場合は横幅の単位を%やvwにして修正するなどしていただければと思います。
実装する方法
それでは早速実装する方法について解説したいと思います。
実装するには以下の3つの工程が必要になります。
- HTMLを記述
- CSSでレイアウト
- jQuery(JavaScript)で動きを実装
それぞれ順番にコードを掲載いたしますので、それぞれご自身のサイトの適切なファイルの箇所にコピー＆ペーストしてください。
HTMLの記述コード
まずはHTMLを記述します。
以下のコードを例えばWordPressであればheader.phpなどにコピー＆ペーストしてください。
<div class="header__box__left__btn">OPEN</div>
<div class="side__menu__boxWrapWrap">
<div class="side__menu__boxWrapBg"></div>
<div class="side__menu__boxWrap">
<div class="side__menu__box">
<div class="side__menu__box__close">
CLOSE
</div>
<ul class="side__menu__box__list">
<li class="side__menu__box__list__items">
<a class="side__menu__box__list__items__link" href="#">
提供中のプラグイン
</a>
</li>
<li class="side__menu__box__list__items">
<a class="side__menu__box__list__items__link" href="#">
プラグインのマニュアル
</a>
</li>
<li class="side__menu__box__list__items">
<a class="side__menu__box__list__items__link" href="#">
よくある質問
</a>
</li>
<li class="side__menu__box__list__items">
<a class="side__menu__box__list__items__link" href="#">
お知らせ
</a>
</li>
</ul>
</div>
</div>
</div>CSSの記述コード
次はCSSを記述します。
以下のコードをCSSファイルなどにコピー＆ペーストしてください。
.side__menu__boxWrapWrap{
}
.side__menu__boxWrapBg{
display:none;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
position: fixed;
top: 0;
right: 0;
bottom:0;
left:0;
margin:auto;
z-index: 9;
}
.side__menu__boxWrapWrap.active .side__menu__boxWrapBg{
display:block;
}
.side__menu__boxWrap{
position: fixed;
top: 0;
left: -420px;
z-index: 99;
background: orange;
width: 420px;
height: 100%;
transition:0.3s;
}
.side__menu__boxWrapWrap.active .side__menu__boxWrap{
left:0px;
transition:0.3s;
}
.side__menu__box{
}
.side__menu__box__close{
display:flex;
justify-content:center;
align-items:center;
background:blue;
color:#fff;
height:50px;
cursor:pointer;
}
.side__menu__box__list{
}
.side__menu__box__list__items{
}
.side__menu__box__list__items__link{
}jQuery(JavaScript)の記述コード
次はjQueryを記述します。
以下のコードをjsファイル、もしくはfooter.phpなどにコピー＆ペーストしてください。
以下のコードはjQuery本体ファイルの読み込みコードになります。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>上記のjQuery本体コードの記述が完了したら、直下あたりに以下のコードをコピー＆ペーストしてください。
<script>
jQuery(function(){
jQuery('.header__box__left__btn').click(function(){
jQuery('.side__menu__boxWrapWrap').addClass('active');
});
jQuery('.side__menu__box__close').click(function(){
jQuery('.side__menu__boxWrapWrap').removeClass('active');
});
jQuery('.side__menu__boxWrapBg').click(function(){
jQuery('.side__menu__boxWrapWrap').removeClass('active');
});
});
</script>ここまでのコードすべてのペーストが完了し保存しましたら、以下のようなイメージで実装できたことが確認できるかと思います。
See the Pen
Untitled by 高沢翔汰 (@wllijswc-the-sans)
on CodePen.
あとはご自由にコードをカスタマイズして見てください。
お疲れ様でした！
まとめ
ハンバーガーボタンをクリックしたら画面の横からスライドして表示されるメニューの実装方法についての解説は以上になります。
今回の内容はサイト制作でよくあるハンバーガーメニューの実装になりますので、頻繁に必要になると思われるサンプルコードを掲載いたしました。
すぐにコピー＆ペーストして作ることができるので、よろしければぜひ当記事をご活用いただき、お仕事や個人ブログの構築などにお役立ていただけましたら幸いです。
UMENOKI編集部 高澤 翔汰
お気軽に皆さんのご要望をお聞かせください！
どんなに些細なことでも構いません！よろしければ記事や当サイトへの「こんな記事があったら仕事とかで役に立つな〜」や「こうだったらもっと役に立つのに！」といったようなご要望等をお気軽にお聞かせください！今後のサービス改善にお役立てさせていただきます！
例1）Reactの技術記事を書いてほしい！
例2）WordPressの使い方とかを初心者向けに解説してほしい！...など
