ボタンをクリックすると、表示されるメニューのサンプルです。
ハンバーガーメニューのデザイン1
ハンバーガーメニューのデモサイト
ハンバーガーメニューハンバーガーメニューの見本画像
⇒
ハンバーガーメニューのサンプル動画
サンプル動画は作成していません。
ハンバーガーメニューのHTMLソース
HTMLソースの赤字部分を追加変更して、メニューの内容を変えます。
<div class="h_menu">
<input type="checkbox" id="menu-btn-check">
<label for="menu-btn-check" class="menu-btn"><span></span></label>
<div class="menu-content"><ul>
<p class="h_title">Menu</p>
<li><a href="https://mz-site.info/" title="ウェブサイト制作の小店">ウェブサイト制作の小店</a></li>
<li><a href="https://mz-site.xsrv.jp/" title="M's Site Member's Page">M's Site Member's Page</a></li>
</ul></div></div>ハンバーガーメニューのCSSコード
CSSコードの赤字の幅・高さ・TOP位置を変更して、メニューが出現する位置を変えます。
同様に青字のカラーコードを変更して、ホバー時の色を変えます。
.h_menu {display:block; position:absolute; top:0; right:0;}
.menu-btn {width:30px; height:30px; background-color:#464646; display:flex; justify-content:center;/*三本線の左右中央寄せ*/ align-items:center;/*三本線の上下中央寄せ*/ z-index:30;}
.menu-btn span, .menu-btn span:before, .menu-btn span:after {content:''; display:block; background-color:#ffffff;/*三本線の色*/ width:20px;/*三本線の幅*/ height:2px;/*三本線の高さ*/ border-radius:3px;/*三本線の丸み*/ position:absolute;}
.menu-btn span:before {bottom:7px;/*中央と上の線の距離*/}
.menu-btn span:after {top:7px;/*中央と下の線の距離*/}
#menu-btn-check {display: none;}
#menu-btn-check:checked ~ .menu-btn span {background-color:rgba(255, 255, 255, 0);/*中央線の透明度*/}
#menu-btn-check:checked ~ .menu-btn span::before {bottom:0; transform:rotate(45deg);}
#menu-btn-check:checked ~ .menu-btn span::after {top:0; transform:rotate(-45deg);}
#menu-btn-check:checked ~ .menu-content {right:0;/*メニューの表示*/}
.menu-content {width:100%; height:100vh; position:fixed; top:60px; right:100%;/*メニューの非表示*/ z-index:30; background-color:rgba(0,0,0,0.8); transition:all 0.5s;/*メニュー表示の秒数*/}
.menu-content ul {padding:0 0 10px;}
.menu-content ul li {text-align:center; list-style:none;}
.menu-content ul li a {display:block; width:100%; font-size:14px; box-sizing:border-box; color:#ffffff; padding:6px; position:relative;}
.menu-content ul li a:hover {color:#ffff00;}
.h_title {background-color:#ffffff; line-height:30px; text-align:center; margin:20px;}
コメント