説明
・スマートフォン向けheader
・headerの位置固定
・ハンバーガーボタンにはアイコンを使用
<header class="header"> <a href=""><em>たぬちべheader</em></a> <!-- ハンバーガーボタン --> <button type="button" class="hamburger-button"> <i class="bi bi-list"></i> </button> <!-- メニュー --> <nav class="hamburger-menu"> <ul class="hamburger-button-list"> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href="#">menu4</a></li> <li><a href="#">menu5</a></li> </ul> </nav> </header>
@charset "UTF-8"; /* 文字コードを指定 */ /* ==== 全体の設定 ==== */ a { /* アンダーライン消去 */ text-decoration: none; } li { list-style: none; } /* ==== ヘッダーの設定 ==== */ <!-- CSS --> @charset "UTF-8"; /* 文字コードを指定 */ /* ==== 全体の設定 ==== */ body { /* 背景の色 */ background-color: #ffffff; /* 文字の種類 */ font-family: 'Noto Sans JP', sans-serif; /* 行(縦)間隔 */ line-height: 1.6; /* 列(横)間隔 */ letter-spacing: .1rem; /* 文字の色 */ color: #333; } a { /* 文字の色 */ color: #333; /* 文字の装飾 */ text-decoration: none; } a:hover { /* 文字の色 */ color: dodgerblue; } small { /* 文字の大きさ */ font-size: .75rem; } img { /* イメージの最大幅 */ max-width: 100%; /* イメージの高さ */ height: auto; /* イメージの基準位置 */ vertical-align: bottom; } li { list-style: none; } /* ==== ヘッダーの設定 ==== */ .hamburger-button { /* 位置 */ position: fixed; top: 0; right: 0; z-index: 999; /* 大きさ */ width: 3.125rem; height: 3.125rem; font-size: 1.75rem; /* 色 */ background-color: #999; } .hamburger-menu { /* 位置 */ position: fixed; top: 3.125rem; left: 0; /* 大きさ */ width: 100vw; height: 100vh; /* 色 */ background-color: #444; /* 移動前位置 */ transform: translateX(100%); } .hamburger-menu-active { /* 移動後の位置 */ transform: translateX(0); } a { /* 色 */ color: #ffffff; } .header { /* 位置 */ position: fixed; top: 0; left: 0; z-index: 100; /* 色 */ background-color: #999; color: #ffffff; /* flexbox */ display: flex; align-items: center; /* 大きさ */ width: 100vw; height: 3.125rem; /* 余白 */ padding-left: 1rem; } /* ==== メインコンテンツの設定 ==== */ body { display: flex; flex-direction: column; justify-content: space-between; } main { background-color: lavenderblush; } /* == フッターの設定 == */ .footer_container { /* 色の設定 */ background-color: #999; /* 文字の設定 */ text-align: center; /* 余白の設定 */ padding: 0.5rem 0; }
<!-- js --> var hamburger = $('.hamburger-menu'); //ハンバーガーボタンをクリックで表示・非表示 $('.hamburger-button').on('click',function() { hamburger.toggleClass('hamburger-menu-active'); }); //画面がサイズ変更したら閉じる $(window).on('resize', function() { hamburger.removeClass('hamburger-menu-active'); });