AI向け説明 AI Description

`N-009` はモバイルナビゲーションの定番であるハンバーガーメニューです。ボタンの3本線が×印にアニメーション変化し、同時にフルのメニュー画面が上部からスライドインします。メニュー項目には遅延（transition-delay）をつけて順番にフェードインさせています。

`N-009` implements a standard mobile hamburger menu. The three-line icon animates into an 'X', while the full-screen menu slides in from the top. Menu items use staggered `transition-delay` for a sequential fade-in effect.

調整可能パラメータ Adjustable Parameters

• --menu-bg — メニュー画面の背景色Menu background color
• --menu-text — メニュー項目の文字色Menu text color

実装 Implementation

HTML + CSS + JS

<button class="hamburger" onclick="this.classList.toggle('active'); document.getElementById('menu').classList.toggle('open');">
  <span></span><span></span><span></span>
</button>
<nav id="menu" class="mobile-menu">...</nav>

<style>
:root { --menu-bg: #fff; --menu-text: #1d2242; }
.hamburger span { transition: 0.3s; position: absolute; }
.hamburger.active span:nth-child(1) { transform: rotate(45deg); top: 15px; }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg); top: 15px; }
.mobile-menu { background: var(--menu-bg); transform: translateY(-100%); transition: 0.4s; }
.mobile-menu.open { transform: translateY(0); }
.menu-link { color: var(--menu-text); }
</style>

React (JSX + CSS)

// react/N-009.jsx
import { useState } from 'react';
import './N-009.css';

export default function HamburgerMenu() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button className={`hamburger ${isOpen ? 'active' : ''}`} onClick={() => setIsOpen(!isOpen)}>
        <span /><span /><span />
      </button>
      <nav className={`mobile-menu ${isOpen ? 'open' : ''}`}>
        <a href="#" className="menu-link">Home</a>
        <a href="#" className="menu-link">About</a>
      </nav>
    </>
  );
}