メニュー

当サイト使用テーマ・サーバー

＼ SWELL【WordPressテーマ】 ／

公式サイトを見る

＼ レンタルサーバー【ConoHa WING】 ／

公式サイトを見る

プログラミング学習

美容・脱毛

ホームページ制作

  1. ホーム
  2. JavaScript
  3. 【JavaScript】コピペでOK！ハンバーガーメニュー

【JavaScript】コピペでOK！ハンバーガーメニュー

広告
JavaScript

この記事では、コピペで貼り付けるだけでハンバーガーメニューを実装できるコードを紹介、解説していきます！

目次

完成形

まずは、完成形を見ていきます！

右側にあるハンバーガーメニューをクリック又はタップすると動作し、×に切り替わります。

詳細コードは、下記の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クラスを付与し、ハンバーガーメニューが三本線から×に切り替わるようにしています！

JavaScript
JavaScript
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！
目次