この記事では、コピペで貼り付けるだけでハンバーガーメニューを実装できるコードを紹介、解説していきます!
目次
完成形
まずは、完成形を見ていきます!
右側にあるハンバーガーメニューをクリック又はタップすると動作し、×に切り替わります。
詳細コードは、下記のCODEPENのHTML,CSS,JSをクリックするとそれぞれコードが見れます!
また、詳細コードはこの後にも説明します!
※今回は、jQueryを使用してハンバーガーメニューの動きをつけています
See the Pen js-12 by aqua (@aqua-programdiary) on CodePen.
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>hamburger</title> </head> <body> <!-- ハンバーガーメニュー --> <div class="hamburger-position"> <div class="hamburger"> <span class="hamburger-top-bar"></span> <span class="hamburger-middle-bar"></span> <span class="hamburger-bottom-bar"></span> </div> </div> <!-- ハンバーガーメニューここまで --> <!-- jQuery-CDN-2023/09/07-最新バージョン --> <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script> <!-- 各自オリジナルjsファイル --> <script src="main.js"></script> </body> </html>
HTMLでは、基本的な型に、ハンバーガーメニューとjQueryのCDNを読み込んでいます!
今回使ったjQueryのCDNは、2023/09/07現在の最新バージョンです。
CSS
@charset "utf-8"; /*--------------------------- ハンバーガーメニュー ---------------------------*/ /* コメントがあるところで細かく設定できます! コメントなしのCSSはさわらないでください! */ .hamburger-position { position: fixed; top: 10px; right: 10px; } .hamburger { width: 100px; /* 横幅設定 */ height: 100px; /* 高さ設定 */ cursor: pointer; position: relative; } /* バーの共通設定 */ .hamburger span { width: 100%; height: 10%; /* ハンバーガーメニューのバーの太さ設定 */ position: absolute; background: #333; /* 三本線の時の色 */ transition: all 0.3s; /* 三本線の状態からXになるまでの時間設定 */ } /* バーの初期位置 */ .hamburger-top-bar { top: 0px; } .hamburger-middle-bar { top: 50%; transform: translateY(-50%); } .hamburger-bottom-bar { bottom: 0px; } /* active付与時 トップバー */ .hamburger.active .hamburger-top-bar { top: 50%; transform: translateY(-50%); background :#333; /* Xの時の色 */ transform: rotate(405deg); /* 回転設定 45 or 765に変更可 */ } /* active付与時 ミドルバー */ .hamburger.active .hamburger-middle-bar { opacity: 0; } /* active付与時 ボトムバー */ .hamburger.active .hamburger-bottom-bar { top: 50%; transform: translateY(-50%); background: #333; /* Xの時の色 */ transform: rotate(-405deg); /* 回転設定 -45 or -765に変更可 */ } /*--------------------------- ハンバーガーメニューここまで ---------------------------*/
CSSの各コメントが付いている箇所でハンバーガーメニューのスタイルの調整ができます!
コピペした後にお好きなサイズや色に調整してください!
JavaScript
$(function(){ // ハンバーガーメニューをクリックするとactiveクラスが付与される $(".hamburger").click(function(){ $(this).toggleClass("active"); }); });
JavaScriptでは、ハンバーガーメニューをクリックした時にactiveクラスを付与し、ハンバーガーメニューが三本線から×に切り替わるようにしています!