【コピペで使える】ハンバーガーメニューデザイン

こんにちは、フローです。

今回はハンバーガーメニューを書いていきたいと思います。

いまじゃ当たり前のハンバーガーメニュー。

コピペで使えるので、WEB制作に役立てて下さい。

1 まずはHTML
2 まとめ

まずはHTML

以下に基本的なHTMLファイルを示します。

このHTMLは、ハンバーガーメニューとそのメニューアイテムを含んでいます。

詳細なスタイルや動作は、CSSとJavaScriptで追加できます。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Stylish Hamburger Menu</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <header>
        <div class="menu-container" id="menu-container">
            <div class="hamburger-menu" id="hamburger-menu">
                <div></div>
                <div></div>
                <div></div>
            </div>
            <nav id="menu">
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#services">Services</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <main id="content">
        <!-- The main content of the webpage goes here -->
    </main>
    <script src="script.js"></script>
</body>
</html>

ここで、

“style.css”はCSSスタイルシートへのリンクで、

“script.js”はJavaScriptファイルへのリンクです。

このHTMLファイルでは、

ハンバーガーメニューとそれに関連するナビゲーションメニューを作成します。

ハンバーガーメニューは”div”タグで作成し、

それぞれのバーは内部の”div”タグで表現します。

“nav”タグ内にある”ul”リストは、ナビゲーションメニューの各項目を表します。

このHTMLファイルは基本的な構造を提供します。

具体的なスタイルやインタラクションはCSSとJavaScriptで実装します。

CSS

以下に基本的なCSSを示します。

このCSSは、ハンバーガーメニューとそのメニューアイテムにスタイルを適用します。

body {
    font-family: Arial, sans-serif;
}

.menu-container {
    position: relative;
}

.hamburger-menu {
    width: 30px;
    height: 20px;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100;
    cursor: pointer;
}

.hamburger-menu div {
    width: 100%;
    height: 4px;
    background-color: #F94A0A;
    margin: 4px 0;
    transition: all 0.3s ease;
}

nav {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    background-color: #FAFCF8;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    align-items: center;
}

nav ul li {
    margin: 20px 0;
}

nav ul li a {
    text-decoration: none;
    color: #12141D;
    font-size: 2em;
    transition: color 0.3s ease;
}

nav ul li a:hover {
    color: #205597;
}

このCSSには以下のスタイルが含まれています：

ハンバーガーメニューは右上に固定され、そのバーは明るいオレンジ色に設定されています。
メニューが開いたとき、ナビゲーションバーが右から画面全体に広がり、背景色は薄いグリーンに設定されます。
メニューアイテムは中央に配置され、文字色は深い青色に設定され、ホバーすると明るい青色に変わります。

なお、このCSSはハンバーガーメニューの初期状態を設定しています。

メニューが開閉する動作やその他のインタラクションはJavaScriptで実装する必要があります。

また、色の選択は各デザインの色パレットを基にしています¹²³。適宜調整してください。

スタイルも自分好みに変えてみてください。

JavaScript

以下に基本的なJavaScriptを示します。

このJavaScriptは、ハンバーガーメニューの開閉を制御します。

document.addEventListener('DOMContentLoaded', function() {
    var hamburgerMenu = document.getElementById('hamburger-menu');
    var menu = document.getElementById('menu');

    hamburgerMenu.addEventListener('click', function() {
        this.classList.toggle('open');
        menu.style.width = this.classList.contains('open') ? '100%' : '0';
    });
});

DOMがロードされたら、ハンバーガーメニューとメニュー本体の要素を取得します。
ハンバーガーメニューがクリックされると、”open”クラスをトグル（存在すれば削除、存在しなければ追加）します。
メニューの幅は、ハンバーガーメニューが”open”クラスを持っている場合は”100%”（全画面）に、持っていない場合は”0″に設定します。これにより、メニューが開閉します。

このJavaScriptは非常にシンプルなもので、

ハンバーガーメニューの基本的な動作を提供します。

メニューアイテムのアニメーションや形状の変更など、

より高度な機能を追加するには、JavaScriptのコードを拡張する必要があります。