【コピペOK】ハンバーガーメニューの作り方＆おすすめボタン素材サイト

今回は、スマホサイトでよく使われるハンバーガーメニューの作り方について解説したいと思います。

えりー

jQueryで簡単に作成することができます！

ハンバーガーメニューのおすすめボタン素材サイトも紹介しています。

ハンバーガーメニューの作り方について早く知りたい方は、下記メニューからジャンプしていただけます。

ハンバーガーメニューとは、三本線アイコン（≡）のメニュー

ハンバーガーメニューとは、三本線アイコン（≡）で表されるメニューのことです。

えりー

ハンバーガーのような見た目をしているので、この名前が付けられたそうです。

このハンバーガーメニューはスマホサイトで使われることが多いですが、最近はパソコンサイトでも使われることが増えてきました。（下図のようなかたちです）

https://mori-ne.com/

ハンバーガーメニューの作り方

ハンバーガーメニューは以下のように作ります。

HTML

1<nav id="gnav">
2  <p><img src="img/menu.png" alt="メニュー"></p>
3   <ul>
4     <li><a href="/">menu</a></li>
5     <li><a href="/">menu</a></li>
6     <li><a href="/">menu</a></li>
7     <li><a href="/">menu</a></li>
8   </ul>
9 </nav>

ハンバーガーメニュー部分のHTMLは、上記のように書きます。

上記の例では、imgフォルダ内に「menu.png」というファイル名で、ハンバーガーメニューのボタン画像を用意しておく必要があります。

jQuery

1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
2<script>
3$(function(){
4$("#gnav p").on("click", function() {
5$(this).next().slideToggle();
6});
7});
8</script>

HTMLの＜head＞内に上記を書きます。

えりー

『メニューボタンをクリックしたら、次の要素（メニュー）が開く』という意味です。

CSS

1#gnav ul {
2	display: none;
3}

CSSには上記のように書きます。

えりー

『初期状態ではメニューを隠しておく』という意味です。

余計なCSSは省いていますので、＜ul＞と＜li＞の部分はborderを付けるなどして整えてください。

ハンバーガーメニューのボタン素材サイト

ハンバーガーメニューのボタン素材は、以下の素材サイトで探すのがおすすめです。

シルエットAC

『シルエットAC』はアイコンに使える素材が豊富なサイトです。

https://www.silhouette-ac.com/

icooon-mono

『icooon-mono』は、会員登録なしでダウンロードできるアイコン素材サイトです。

https://icooon-mono.com/

あわせて読みたい

【厳選6選】ホームページにおすすめのフリー（無料）素材サイト

まとめ：ハンバーガーメニューを設置してみよう！

ハンバーガーメニューとは、三本線アイコン（≡）で表されるメニューのことです。

ハンバーガーメニューを設置する際、上記が参考になれば嬉しいです！

ハンバーガーメニューのボタン素材サイトは以下がおすすめです。

空創デザインオフィスでは、スマホサイト制作も承っております。下記よりお気軽にお問い合わせください。お見積りは無料です。

えりー

Web・グラフィックデザイナー / ブロガー

2018年よりフリーランスWeb・グラフィックデザイナー 兼 ブロガーとして活動しています。
都内IT系企業にて研鑽を積んだ後、起業しました。
IT・デザイン業界歴は10年以上。
今までに関わらせていただいたクライアント様は300社以上となります。
ブログでは、自身の経験を元に、Web・グラフィックデザイン制作のことや、就職・転職のこと等の情報を発信しています。
少しでも読者の皆様のお役に立てれば幸いです！