見出し画像

【web】ハンバーガーメニュー（cssのみ）

つちだにんじん

こんにちは、つちだ人参です。
神経痛になりやすい身なもので、体力仕事の際には腰痛に悩まされていましたが、デスクワークになった現在、腰痛に加えて首と肩こりからくる痛みにも悩まされるようになりました。
全身が痛み出す日もそう遠くないのかもしれません・・・（絶望）

今回は、webにおけるハンバーガーメニューを作ります。
sp表示にしたときに三本線ボタンからメニューを表示させるアレです。
jsを使っても作成できますし、cssのみでも作成できます。

個人的には、閲覧者の環境でjsをブロックしている場合でも問題なく見ることのできるcssのみでの構築がいい気しますが、どうなのでしょうか？
教えて有識者〜〜〜


cssのみでハンバーガメニューを作成

今回はjsなしで作れるハンバーガーメニューを作ります。
cssのみの場合、チェックボックスを使います。
仕組みとしては、
「チェックボックスにチェックがついたらメニューが出てくる」
というものです。

完成系はこれです。
デザインや挙動はお好みで変えてください。

<!---html-->
<header>
    <div class="hamburger">
        <input type="checkbox" id="menu-btn">
        <label for="menu-btn" class="menu-btn"><span></span><span></span><span></span></label>

        <div class="menu-content">
            <ul>
                <li>
                    <a href="">トップ</a>
                </li>
                <li>
                    <a href="">にんじんの種類</a>
                </li>
                <li>
                    <a href="">にんじんレシピ</a>
                </li>
              <li>
                    <a href="">問い合わせ</a>
                </li>
            </ul>
        </div>

    </div>
</header>
/*css*/
/*全体のアニメーション速度*/
*{
  transition: .3s;
}
/* =====ボタンのスタイル===== */
.hamburger .menu-btn span{
  display: block;
  width: 50px;
  height: 5px;
  background: #6A9C89;
  border-radius: 100vh;  
}
.menu-btn{
  display: flex;
  flex-direction: column;
  gap: .7em;
  width: fit-content;
  margin: 0 0 0 auto;
}
#menu-btn{
  display: none; /*チェックボックス非表示*/
}
/*↓チェックがついた時のボタンの挙動*/
#menu-btn:checked ~ .menu-btn{
  transform: rotate(180deg);
}
#menu-btn:checked ~ .menu-btn span:nth-of-type(1){
  transform: rotate(45deg) translateY(12px) translateX(13px);
  background: #FFBF61;
}
#menu-btn:checked ~ .menu-btn span:nth-of-type(2){
  opacity: 0;
}
#menu-btn:checked ~ .menu-btn span:nth-of-type(3){
  transform: rotate(-45deg) translateY(-10px) translateX(10px);
  background: #FFBF61;
}

/* =====メニューのスタイル===== */
.menu-content{
  background: #6A9C89;
  width: 50%;
  margin: 0 0 0 auto;
}
.menu-content ul{
  padding: 0;
}
.menu-content ul li{
  list-style: none;
}
.menu-content ul li:not(:last-child){
  border-bottom: 1px solid #fff;
}
.menu-content ul li a{
  display: block;
  text-decoration: none;
  padding: 2rem;
  position: relative;
  color: #fff;
}
.menu-content ul li a::after{
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-bottom: 1px solid;
  border-right: 1px solid;
  transform: rotate(-45deg);
  position: absolute;
  top: calc(50% - 5px);
  right: 3em;
}
.menu-content ul li a:hover{
  color: #FFBF61;
}
/*チェックがついた時のメニューの挙動*/
.menu-content{
  position: fixed;
  right: -50%; /*メニューの幅と同じだけ逃す*/
}
#menu-btn:checked ~ .menu-content{
  right: 0;
}


それでは作っていきます！

ボタン部分を作る

まずはボタン部分です。

<!---html-->
<header>
    <div class="hamburger">
        <input type="checkbox" id="menu-btn">
        <label for="menu-btn" class="menu-btn">
         <span></span><span></span><span></span>
        </label>
    </div>
</header>

<input type="checkbox" id="menu-btn">がチェックボックスです。
以下にlabelでグループ化させるため、id名をつけています。
<label></label>の中に３つのspanが入っていて、このspanが三本線の部分になります。
label for="○○"の○○は、チェックボックスのid名と同じ名前を入れてください。そうすることでチェックボックスとラベル要素がグループとして扱われるようになります！

/*css*/
/* =====ボタンのスタイル===== */
.hamburger .menu-btn span{
  display: block;
  width: 50px;
  height: 5px;
  background: #6A9C89;
  border-radius: 100vh;  
}
.menu-btn{
  display: flex;
  flex-direction: column;
  gap: .7em;
  width: fit-content;
  margin: 0 0 0 auto;
}
#menu-btn{
  display: none; /*チェックボックス非表示*/
}


こんな感じになりました！
#menu-btn{ display: none; }ですでにチェックボックスを非表示にしていますが、非表示にする前に三本線のところをクリックした時にチェックボックスにチェックがついているかを確認してください！

もし3本線をクリックしてもチェックがつかない場合は、チェックボックスとラベル要素がグループとして認識されていませんので、htmlを見直してください。

ボタン部分の動きをつける

よくある「クリックしたら×に変わる」アレです。
この変化がないとクリックした状態であるかがわかりにくいため、何かしら変化をつけると見やすさが上がります！

/*css*/

/*↓チェックがついた時のボタンの挙動*/

#menu-btn:checked ~ .menu-btn{ /*ボタン全体が回転*/
  transform: rotate(180deg);
}
#menu-btn:checked ~ .menu-btn span:nth-of-type(1){ /*上の線の変化*/
  transform: rotate(45deg) translateY(12px) translateX(13px);
  background: #FFBF61;
}
#menu-btn:checked ~ .menu-btn span:nth-of-type(2){ /*真ん中の線は透明に*/
  opacity: 0;
}
#menu-btn:checked ~ .menu-btn span:nth-of-type(3){ /*下の線の変化*/
  transform: rotate(-45deg) translateY(-10px) translateX(10px);
  background: #FFBF61;
}

:chekedの擬似クラスは、「チェックが入った状態」を指します。
#menu-btn:checked ~ .menu-btnだと「#menu-btnにチェックが入ったら.menu-btnにスタイルを当てる」みたいな感じです。

これで、クリックすると180度回転しながら色が変わり、形も×に変化するボタンが完成です！

メニュー部分を作る

次はメニュー部分を作っていきます！

<header>
    <div class="hamburger">
        <input type="checkbox" id="menu-btn">
        <label for="menu-btn" class="menu-btn">
         <span></span><span></span><span></span>
        </label>

        <div class="menu-content">
            <ul>
                <li>
                    <a href="">トップ</a>
                </li>
                <li>
                    <a href="">にんじんの種類</a>
                </li>
                <li>
                    <a href="">にんじんレシピ</a>
                </li>
              <li>
                    <a href="">問い合わせ</a>
                </li>
            </ul>
        </div>

    </div>
</header>

.hamburgerの中に.menu-contentを入れています。
チェックボックスとメニュー部分の階層は同じにしてください。

今回.menu-contentはdivで作っていますが、グローバルナビならnavでもいいです。

/*css*/

/* =====メニューのスタイル===== */
.menu-content{
  background: #6A9C89;
  width: 50%;
  margin: 0 0 0 auto;
}
.menu-content ul{
  padding: 0;
}
.menu-content ul li{
  list-style: none;
}
.menu-content ul li:not(:last-child){
  border-bottom: 1px solid #fff;
}
.menu-content ul li a{
  display: block;
  text-decoration: none;
  padding: 2rem;
  position: relative;
  color: #fff;
}
.menu-content ul li a::after{ /*矢印の部分生成*/
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-bottom: 1px solid;
  border-right: 1px solid;
  transform: rotate(-45deg);
  position: absolute;
  top: calc(50% - 5px);
  right: 3em;
}
.menu-content ul li a:hover{
  color: #FFBF61;
}

cssはこんな感じです。

見た目はこんな感じ


この辺りはもうほんとお好みだと思うので好きにしてください（投げやり）

メニュー部分の動きをつける

最後はクリックしたらメニューが出てくるという動きをつけます。

/*css*/

/*チェックがついた時のメニューの挙動*/

.menu-content{
  position: fixed;
  right: -50%; /*メニューの幅と同じだけ逃す*/
}
#menu-btn:checked ~ .menu-content{
  right: 0;
}

これだけですね（鼻ほじ）
今回は.menu-contentをはじめは右の画面外に逃しておき、チェックが入ったら画面内にスライディング登場するものになっています。
メニューを横幅100%にしている場合は、right: -100%;にしてください。

ちなみに今回は右スライディング登場ですが、上からでも下からでも左からでも、好きな方向からスライディングさせてください。

別にスライディングはやかましい！って方はopacityで透明度の変化で登場させてもいいですし、単にdisplay:none; からdisplay: block;でパッと登場させるのでもいいです。
やり方は無限大・・・・・・・。

spとpcでの表示の切り替え

最後に余談ですが、pcの時のメニューとspの時のメニューを切り替えたい時は、

<div class="pc">
 <!---ここにpcで表示させたいメニュー-->
</div>
<div class="sp">
 <!---ここにspで表示させたいメニュー-->
</div>
/*css*/
.sp{
 display: none;
}
@media screen and (max-width: 480px){
 .pc{
  display: none;
 }
}

これで画面幅480px以上の場合はspメニューを非表示、画面幅が480pxより狭い場合はpcメニューを非表示に切り替えられます。



今回はcssのみでのハンバーガメニューでした。
次回はjsでのハンバーガメニューを作成したいと思います。

私のHPです。
webやグラフィックデザイン、イラスト制作などのお仕事がありましたら、ぜひこちらからお気軽にお問合せください！

いいなと思ったら応援しよう！