アヲイ報◆愚痴とか落語とか小説とか。

創作に許しを求める私の瓦斯抜きブログ

シンプルなハンバーガーメニューのHTML・CSS・Javaスクリプト

思ったこと

 

いままでぼくがネットの海であさってきた『ハンバーガーメニュー』のコードは、どれも一長一短で、思うに任せぬものが多く、ひとさまの叡智をむさぼっておきながら文句ばかり垂れていた。

それがこのほど、ChatGPTがきわめてシンプルな『ハンバーガーメニュー』のコードを吐き出したので、それを公開しよう。

以下の３つのファイルは、HTMLコードと同階層にCSSとJSのファイルがそのまんま並んでいる状況を想定してつくられている。うまいことあしらってくれ。

 

◆HTMLコード

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Hamburger Menu</title>
  7.     <link rel="stylesheet" href="styles.css">
  8. </head>
  9. <body>
  10.     <header>
  11.         <div class="menu-btn" id="menu-btn">
  12.             <div class="menu-btn__burger"></div>
  13.         </div>
  14.         <nav class="nav" id="nav">
  15.             <ul class="nav__list">
  16.                 <li class="nav__item"><a href="#" class="nav__link">ホーム</a></li>
  17.                 <li class="nav__item"><a href="#" class="nav__link">サービス</a></li>
  18.                 <li class="nav__item"><a href="#" class="nav__link">会社概要</a></li>
  19.                 <li class="nav__item"><a href="#" class="nav__link">お問い合わせ</a></li>
  20.             </ul>
  21.         </nav>
  22.     </header>
  23.     <script src="script.js"></script>
  24. ふがふが
  25. </body>
  26. </html>

 

◆スタイルシート（styles.css）

  1. body {
  2.     font-family: Arial, sans-serif;
  3.     margin: 0;
  4.     padding: 0;
  5.     box-sizing: border-box;
  6. }
  7.  
  8. header {
  9.     position: relative;
  10. }
  11.  
  12. .menu-btn {
  13.     position: fixed;
  14.     top: 15px;
  15.     right: 15px;
  16.     width: 30px;
  17.     height: 25px;
  18.     cursor: pointer;
  19.     display: flex;
  20.     align-items: center;
  21.     justify-content: center;
  22.     z-index: 1000;
  23. }
  24.  
  25. .menu-btn__burger {
  26.     width: 100%;
  27.     height: 3px;
  28.     background-color: #333;
  29.     border-radius: 5px;
  30.     transition: all 0.3s ease;
  31. }
  32.  
  33. .menu-btn.open .menu-btn__burger {
  34.     background-color: #fff;
  35.     transform: rotate(45deg);
  36. }
  37.  
  38. .menu-btn.open .menu-btn__burger::before {
  39.     background-color: #fff;
  40.     transform: rotate(90deg);
  41.     top: 0;
  42. }
  43.  
  44. .menu-btn.open .menu-btn__burger::after {
  45.     background-color: #fff;
  46.     opacity: 0;
  47. }
  48.  
  49. .menu-btn__burger::before,
  50. .menu-btn__burger::after {
  51.     content: '';
  52.     position: absolute;
  53.     width: 100%;
  54.     height: 3px;
  55.     background-color: #333;
  56.     border-radius: 5px;
  57.     transition: all 0.3s ease;
  58. }
  59.  
  60. .menu-btn__burger::before {
  61.     transform: translateY(-10px);
  62. }
  63.  
  64. .menu-btn__burger::after {
  65.     transform: translateY(10px);
  66. }
  67.  
  68. .nav {
  69.     position: absolute;
  70.     top: 0;
  71.     left: 0;
  72.     height: 100vh;
  73.     width: 100%;
  74.     background-color: rgba(0, 0, 0, 0.5);
  75.     display: flex;
  76.     align-items: center;
  77.     justify-content: center;
  78.     transform: translateX(-100%);
  79.     transition: transform 0.3s ease-in-out;
  80.     z-index: 999;
  81. }
  82.  
  83. .nav.open {
  84.     transform: translateX(0);
  85. }
  86.  
  87. .nav__list {
  88.     list-style: none;
  89.     text-align: center;
  90. }
  91.  
  92. .nav__item {
  93.     margin: 20px 0;
  94. }
  95.  
  96. .nav__link {
  97.     color: #fff;
  98.     text-decoration: none;
  99.     font-size: 1.5rem;
  100.     transition: color 0.3s ease;
  101. }
  102.  
  103. .nav__link:hover {
  104.     color: #ff6347;
  105. }

 

◆Javaスクリプト（script.js）

  1. const menuBtn = document.getElementById('menu-btn');
  2. const nav = document.getElementById('nav');
  3.  
  4. menuBtn.addEventListener('click', () => {
  5.     menuBtn.classList.toggle('open');
  6.     nav.classList.toggle('open');
  7. });

 

うまくできなくても当局では一切関知しない。先述のとおり、AIが吐き出したコード一式だ。ぼくにはよく分からんのである。そこんところよろしく。

  • kindleの電子書籍はアプリをインストールすることでPC・スマートフォン・タブレットでもご覧いただけます。アプリは無料です。【ダウンロード（Amazon）】