HaradaWeb > jQuery > slideToggleでハンバーガーメニュー

slideToggleでハンバーガーメニュー

更新日:2020年1月24日 | 投稿日:2020年1月24日

jQueryのslideToggleを使ってタブレットやスマホの画面サイズで表示されるハンバーガーメニューを作ります。

ページ内リンク

デモ

HTMLコード

<div id="menu-button" role="img" aria-label="ハンバーガーメニューボタン"> </div>
<nav class="sample-menu">
	<ul>
		<li><a href="https://haradaweb.com/web/">HaradaWeb</a></li>
		<li><a href="https://haradaweb.com/web/wordpress">WordPress</a></li>
		<li><a href="https://haradaweb.com/web/jquery">jQuery</a></li>
		<li><a href="https://haradaweb.com/web/domain-server">ドメイン・サーバー</a></li>
		<li><a href="https://haradaweb.com/web/seo">SEO</a></li>
		<li><a href="https://haradaweb.com/web/css">CSS</a></li>
		<li><a href="https://haradaweb.com/web/make-content">制作内容</a></li>
		<li><a href="https://haradaweb.com/web/otoiawase">お問合せ</a></li>
	</ul>
</nav>

slideToggleのコードと解説 

jQuery(document).ready(function(){
	jQuery('#menu-button').click(function(){
		jQuery('.sample-menu').slideToggle();
	});
});

コードを解説します。

jQuery(document).ready(function(){

ページを読み込んだら、という意味です。
ハンバーガーメニューはメニューですから、リンク先をクリックした時に別ページが表示されますので、ページを読み込んでから実行されるという事です。
これがないとリンク先のページが表示された時、ハンバーガーメニューが開いたままになっている現象が発生したりします。

jQuery('#menu-button').click(function(){

id=”menu-button”の要素をクリックした時にここから下の動作をします。

jQuery('.sample-menu').slideToggle();

class=”sample-menu”の要素が上からスライドしながら下がってきて表示されます。
もう一度リックすると下から上にスライドしながら上がって非表示になります。

CSSコードと解説

div#menu-button {
    width: 50px;
    height: 50px;
    background-image: url(https://haradaweb.com/web/wp-content/uploads/2020/01/menu-button-200px-200px.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin: 30px;
    cursor: pointer;
}
nav.sample-menu {
    position: relative;
}
nav.sample-menu ul {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(204, 204, 204, 0.9);
    padding: 20px;
}

div#menu-buttonでボタンの大きさを指定して、背景画像でボタン画像を表示しています。
背景画像でボタン画像を表示させているのは、その方が画像の大きさ等デザイン指示に対応しやすいからです。

nav.sample-menu と nav.sample-menu ulでCSSのpositionプロパティを設定しているのが特徴です。
理由はメニューの内容をその下に記述した内容の上に表示させるためです。
下に記述した要素の上にスライド表示させ、メニューの背景色を少し透明にする事で下に記述した要素を薄く見せています。

メニューの内容が入っている nav.sample-menu ul はページが開いた初期状態でdisplay: none;に設定しておいて、jQueryのslideToggleで表示非表示を行います。

TOP