プログラミング学習
当サイト使用テーマ・サーバー
＼ SWELL【WordPressテーマ】 ／
＼ レンタルサーバー【ConoHa WING】 ／
美容・脱毛
ホームページ制作
【JavaScript】コピペでOK！ハンバーガーメニュー
この記事では、コピペで貼り付けるだけでハンバーガーメニューを実装できるコードを紹介、解説していきます！
目次
完成形
まずは、完成形を見ていきます！
右側にあるハンバーガーメニューをクリック又はタップすると動作し、×に切り替わります。
詳細コードは、下記の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クラスを付与し、ハンバーガーメニューが三本線から×に切り替わるようにしています！