2023

11/14

誰でも簡単にハンバーガーメニューを実装できる「hamburger-menu-main」を紹介!

jQueryで機能拡張!!

2023年11月14日

2024年07月16日

jQuery

Plugin

誰でも簡単にハンバーガーメニューを実装できる「hamburger-menu-main」を紹介!

「hamburger-menu-main」デモ

「hamburger-menu-main」のデモです。かなりシンプルなハンバーガーメニューで使いやすいです。デフォルトで「スライド方向」「表示アニメーション速度」「アイコンの太さ」「画面の暗転の有無」が設定可能です。

「hamburger-menu-main」の使い方

webサイトのスマートフォン版表示でほとんどの場合使われているハンバーガーメニューですが、実装方法にも種類があります。自分でコードを一から書く方法やプラグインを使用する方法など。

当サイトでは最速でweb制作を習得することを目的として記事をお届けしているため、プラグインを使用する方法をおすすめしています。今回はハンバーガーメニューを実装できるおすすめのプラグイン「hamburger-menu-main」を紹介します。

ステップ1_フォルダをダウンロード

まずはプラグインを使用するために必要なファイルが格納されているフォルダをダウンロードします。

以下のリンク先に飛ぶ

https://github.com/wanakijiji/hamburger-menu

「code」を押して「Download ZIP」でダウンロード

これでpcにzip形式でフォルダがダウンロードされます。

ステップ2_css,jsファイル読み込み

cssとjsのファイルは読み込む必要があるため、これらをフォルダ内に入れます。

方法は簡単です。まず先ほどダウンロードしたフォルダを解凍します。そうしたら既に制作しているサイトのフォルダに存在している「css」フォルダに「hamburger-menu.css」を、「js」フォルダに「hamburger-menu.js」を入れます。

ステップ3_html,cssを記述

そうしたら以下から必要なhtmlを記述します。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ハンバーガーメニュー</title>
</head>
<link rel="stylesheet" href="css/hamburger-menu.css">
<style>
	body {
		margin: 0;
	}
	header {
		position: fixed;
		background-color: #eeeeee;
		height: 100px;
		width: 100%;
	}
	.hamburger-button {
		top: 30px;
		right: 40px;
	}
  .hamburger-nav {
    height: 100vh;
  }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/hamburger-menu.js"></script>
<body>
  <header>
    
    <!-- ハンバーガーメニュー -->
    <button class="hamburger-button"></button>
    
    <!-- ナビゲーション -->
    <nav class="hamburger-nav">
      <ul>
        <li><a href="#">メニュー1</a></li>
        <li><a href="#">メニュー2</a></li>
        <li><a href="#">メニュー3</a></li>
        <li><a href="#">メニュー4</a></li>
      </ul>
    </nav>
    
  </header>
  
</body>
</html>

ファイル読み込みのコード


<link rel="stylesheet" href="css/hamburger-menu.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/hamburger-menu.js"></script>

この3つですね。これらは必ず記述しましょう。

css,js適応のコード


	body {
		margin: 0;
	}
	header {
		position: fixed;
		background-color: #eeeeee;
		height: 100px;
		width: 100%;
	}
	.hamburger-button {
		top: 30px;
		right: 40px;
	}
  .hamburger-nav {
    height: 100vh;
  }


  <header>
    <!-- ハンバーガーメニュー -->
    <button class="hamburger-button"></button>
    
    <!-- ナビゲーション -->
    <nav class="hamburger-nav">
      <ul>
        <li><a href="#">メニュー1</a></li>
        <li><a href="#">メニュー2</a></li>
        <li><a href="#">メニュー3</a></li>
        <li><a href="#">メニュー4</a></li>
      </ul>
    </nav>
  </header>

上部分のコードをstyle.cssに、下部分のコードをhtmlに記述してください。(既にheaderがある場合は同じようにclassを与える)

まとめ

お疲れ様でした!これでひとまずハンバーガーメニューが表示されました!

デザインを変えたい場合はcssを編集、アニメーションの設定を変えたい場合はjsファイルから編集して色々とカスタマイズしてみてください!