2023
11/14
誰でも簡単にハンバーガーメニューを実装できる「hamburger-menu-main」を紹介！
「hamburger-menu-main」を紹介
「hamburger-menu-main」デモ
See the Pen css2_5 by 近野智優 (@bplqliga-the-bashful) on CodePen.
「hamburger-menu-main」のデモです。かなりシンプルなハンバーガーメニューで使いやすいです。デフォルトで「スライド方向」「表示アニメーション速度」「アイコンの太さ」「画面の暗転の有無」が設定可能です。
「hamburger-menu-main」の使い方
webサイトのスマートフォン版表示でほとんどの場合使われているハンバーガーメニューですが、実装方法にも種類があります。自分でコードを一から書く方法やプラグインを使用する方法など。
当サイトでは最速でweb制作を習得することを目的として記事をお届けしているため、プラグインを使用する方法をおすすめしています。今回はハンバーガーメニューを実装できるおすすめのプラグイン「hamburger-menu-main」を紹介します。
ステップ1_フォルダをダウンロード
まずはプラグインを使用するために必要なファイルが格納されているフォルダをダウンロードします。
1,以下のリンク先に飛ぶ
2,「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="#">メニュー１</a></li>
<li><a href="#">メニュー２</a></li>
<li><a href="#">メニュー３</a></li>
<li><a href="#">メニュー４</a></li>
</ul>
</nav>
</header>
</body>
</html>
1,ファイル読み込みのコード
<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つですね。これらは必ず記述しましょう。
2,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="#">メニュー１</a></li>
<li><a href="#">メニュー２</a></li>
<li><a href="#">メニュー３</a></li>
<li><a href="#">メニュー４</a></li>
</ul>
</nav>
</header>
上部分のコードをstyle.cssに、下部分のコードをhtmlに記述してください。（既にheaderがある場合は同じようにclassを与える）
お疲れ様でした！これでひとまずハンバーガーメニューが表示されました！
デザインを変えたい場合はcssを編集、アニメーションの設定を変えたい場合はjsファイルから編集して色々とカスタマイズしてみてください！
