おいしい数学ハンバーガーメニュー made by CSS
ハンバーガーメニューをそこそこ気合いを入れて作ったので、自分へのメモとしてまた万が一自分のコードを参考にするという人はいないと思いますが、いるかもしれないので、ここに説明とともに書いておきます。ちなみにおいしい数学というのは、高校数学のサイトで、こちら hiraocafe.comにありますのでご興味があれば是非ご覧ください。ちなみに、私は完全に独学でサイト設計をやっていて、プロの人間でもなんでもない超素人ですので、今回は挑戦で色々と改善点多数だと思います。
さてハンバーガーメニューですが、HTML、CSSのみで作っていて、JavaScript等は使っていません。
まずはHTMLから、headerのみです。
index.html
<header>
<h1 class="fade-in1"><a href="index.html"><img src="images/oicmathziologo.png" width="35%" alt="おいしい数学HOME"></a></h1>
<div class="menu">
<input id="menu3" type="checkbox" value="off" />
<label class="menu3-1" for="menu3"></label>
<label class="menu3-2" for="menu3"></label>
<label class="menu3-3" for="menu3"></label>
<nav id="global_navi">
<ul>
<li class="mobilemenutop"><img src="images/akr_master-03.jpg" width="14%" alt="おいしい数学ロゴ"></li>
<li class="current"><a class="list1" href="index.html">HOME</a></li>
<li><a class="list2" href="introduction.html">このサイトについて</a></li>
<li><a class="list3" href="note/note.html">ノート</a></li>
<li><a class="list4" href="orijginalprints/originalprints.html">オリジナル教材</a></li>
<li><a class="list5" href="exam/exam.html">過去問解答と研究</a></li>
<li><a class="list6" href="contact.html">お問い合わせ</a></li>
<li class="mobilemenubottom"><small>© 2017-2020 おいしい数学</small></li>
</ul>
</nav>
<label id="menu-background" for="menu3"></label>
</div>
</header>h1要素はロゴを入れていて今回のfade-in1というclassは今回のハンバーガーメニューに無関係です。
input要素のidとlabel要素のforを同じにして、checkboxがオンとオフで切り替わったときの挙動が連動するようにしてます。まずmenuで全体をまとめ、menu3でcheckboxを導入し、menu3-1〜3-3で3本ラインをCSSで表現します。global_naviでメニューを記述していきます。
詳細なCSSは以下。なお、メディアクエリで、画面の解像度が767px以下になるときの設定です。
style.css
.menu {
position: relative;
display: block;
width: 40px;
height: 40px;
margin: 12px 2px 0 0;
font-size: 0;
float: right;
}
#menu3 {
display: none;
}
.menu3-1,
.menu3-2,
.menu3-3 {
box-sizing: border-box;
display: block;
width: 30px;
height: 4px;
margin: 6px 0;
background-color: #333;
border-radius: 4px;
transition: all 0.4s;
}
#menu3:checked ~ .menu3-1 { /*checkboxがチェックされたときの挙動*/
transform: translateY(10px) rotate(-45deg);
}
#menu3:checked ~ .menu3-2 {
opacity: 0;
}
#menu3:checked ~ .menu3-3 {
transform: translateY(-10px) rotate(45deg);
}
#global_navi {
overflow: auto;
position: fixed;
top: 0;
left: 0;
z-index: 9999;/*最前面に*/
width: 75%;/*右側に隙間を作る（閉じるカバーを表示）*/
max-width: 350px;/*最大幅*/
height: 100%;
background: #fff;/*背景色*/
transition: 0.4s cubic-bezier(0.06, 0.94, 0.13, 0.96);/*滑らかに表示*/
-webkit-transform: translateX(-105%);
transform: translateX(-105%);/*左に隠しておく*/
opacity: 0.9;
}
#global_navi ul li {
font-size: 16px;
width: 100%;
padding: 0.5px;
margin: 0px;
box-sizing: border-box;
}
#global_navi ul li a {
margin: 0;
padding: 9px 2px;
}
#global_navi ul li .list1 {
background-color: darkred;
transition: 0.2s cubic-bezier(0.06, 0.94, 0.13, 0.96);
-webkit-transform: translateX(-150%);
transform: translateX(-150%);/*左に隠しておく*/
}
#global_navi ul li .list2 {
transition: 0.2s cubic-bezier(0.06, 0.94, 0.13, 0.96) 0.025s;
-webkit-transform: translateX(-150%);
transform: translateX(-150%);/*左に隠しておく*/
}
#global_navi ul li .list3 {
transition: 0.2s cubic-bezier(0.06, 0.94, 0.13, 0.96) 0.05s;
-webkit-transform: translateX(-150%);
transform: translateX(-150%);/*左に隠しておく*/
}
#global_navi ul li .list4 {
transition: 0.2s cubic-bezier(0.06, 0.94, 0.13, 0.96) 0.075s;
-webkit-transform: translateX(-150%);
transform: translateX(-150%);/*左に隠しておく*/
}
#global_navi ul li .list5 {
transition: 0.2s cubic-bezier(0.06, 0.94, 0.13, 0.96) 0.1s;
-webkit-transform: translateX(-150%);
transform: translateX(-150%);/*左に隠しておく*/
}
#global_navi ul li .list6 {
transition: 0.2s cubic-bezier(0.06, 0.94, 0.13, 0.96) 0.125s;
-webkit-transform: translateX(-150%);
transform: translateX(-150%);/*左に隠しておく*/
}
.mobilemenutop {
background-color: #fff !important;
padding: 13px !important;
}
.mobilemenubottom {
background-color: #fff !important;
position: absolute;
padding: 8px !important;
bottom: 0;
}
#menu3:checked ~ #global_navi {
-webkit-transform: translateX(0%);
transform: translateX(0%);/*中身を表示（右へスライド）*/
box-shadow: 6px 0 25px rgba(0,0,0,.15);
}
#menu3:checked ~ #global_navi ul li .list1 {
-webkit-transform: translateX(0%);
transform: translateX(0%);/*中身を表示（右へスライド）*/
}
#menu3:checked ~ #global_navi ul li .list2 {
-webkit-transform: translateX(0%);
transform: translateX(0%);/*中身を表示（右へスライド）*/
}
#menu3:checked ~ #global_navi ul li .list3 {
-webkit-transform: translateX(0%);
transform: translateX(0%);/*中身を表示（右へスライド）*/
}
#menu3:checked ~ #global_navi ul li .list4 {
-webkit-transform: translateX(0%);
transform: translateX(0%);/*中身を表示（右へスライド）*/
}
#menu3:checked ~ #global_navi ul li .list5 {
-webkit-transform: translateX(0%);
transform: translateX(0%);/*中身を表示（右へスライド）*/
}
#menu3:checked ~ #global_navi ul li .list6 {
-webkit-transform: translateX(0%);
transform: translateX(0%);/*中身を表示（右へスライド）*/
}
#menu-background {
background-color: #666; /*黒背景*/
display: block;
height: 100%;
position: fixed;
right: 0;
top: 0;
opacity: 0;
width: 100%;
-webkit-transition: all 0.001s linear 0.02s;
transition: all 0.001s linear 0s;
z-index: -1;
}
#menu3:checked ~ #menu-background {
opacity: 0.3;
z-index: 1;
}checkboxが押されると、左にしまっていたglobal_naviが右に出てきますが、同時に、menu-backgroundが浮き出てきて、menu-backgroundを押してもメニューが閉じられるようにしました。
もう1つこだわりは、list1〜list6までのCSSアニメーションを、delayで発動を0.025s遅らせることで、やや躍動感あるメニューが作れたことです。
ちなみに、デスクトップやiPadでは、ハンバーガーメニューは表示させなくていいと思いますので、
style.css
@media screen and (min-width : 767px){
#menu3 .menu3-1 .menu3-2 .menu3-3 {
display: none;
}
.mobilemenutop {
display: none;
}
.mobilemenubottom {
display: none;
}
}上のように、メディアクエリで767px以上ではdispalyをnoneにすることで非表示にしています。
ちなみに、ハンバーガーの形状はhttps://see-ss.comさんから拝借しました。