どうも7noteです。シンプルできれいなハンバーガーメニューの作り方

ハンバーガーメニューの線をそのままゆっくり[ ✕ ]の形になるように移動させて見せるハンバーガーメニューの作り方。

シンプルな作り方で、クラスがついているかついていないかをjavascriptで切り分けて、CSSで見た目を変えていく方法です。

見本

※jQueryを使用しています。jQueryってなんだ?という方はこちら

[ ✕ ]にかわるハンバーガーメニューの作り方

index.html

<hrader>
  <div class="menu open"><span></span></div>
</hrader>

style.css

.menu {
  width: 20px;        /* メニューの横幅 */
  height: 16px;       /* メニューの高さ */
  position: relative; /* 基準値とする */
}

/* 3本線共通のCSS */
.menu span,
.menu::before,
.menu::after {
  width: 100%;           /* 横幅いっぱいに指定 */
  height: 2px;           /* 3本線の高さを2pxに指定 */
  display: inline-block; /* インラインブロック要素にする */
  background: #CCC;      /* 線の色をグレーにする */
  position: absolute;    /* 相対位置にする */
  left: 0;               /* 左からは0pxの位置 */
  transition: .5s;       /* 動きを0.5秒かけて動かす */
}

/* 真ん中の線 */
.menu span {
  top: 50%;                    /* 上から50%の位置 */
  transform: translateY(-50%); /* 線の高さ半分、上に戻す。 */
}
/* 上の線 */
.menu::before {
  content: "";  /* 疑似要素なので必須 */
  top: 0;       /* 上から0pxの位置 */
}
/* 下の線 */
.menu::after {
  content: "";  /* 疑似要素なので必須 */
  bottom: 0;    /* 下から0pxの位置 */
}

/* 〜〜〜ここから下開いた時のCSS〜〜〜 */
.menu.open span {
  opacity: 0;   /* 真ん中の線は透明にする */
}

.menu.open::before {
  top: 7px;     /* 上から7pxに指定（大きさによって微調整必要） */
  transform: rotate(45deg);  /* 45度回転させる */
}

.menu.open::after {
  bottom: 7px;  /* 下から7pxに指定（大きさによって微調整必要） */
  transform: rotate(-45deg); /* -45度回転させる */
}

script.js

$(function(){
  //「メニュー」がクリックされた場合
  $('.menu').on('click',function(){
    $(this).toggleClass('open');  // openのクラスをつけたり消したりする
    /*~~ここにメニューを表示したりするscriptを書く~~*/
  });
});

解説

シンプルな作りにしました。
CSSは気持ち長いソースですが、1つ1つは難しいことをしていませんので、ゆっくり見ていけばわかるかなと思います。
CSSのポイントはtransition: .5s;を指定することで、ふわっとした動きを実現しています。
これがあるかないかだけでもグッと印象が変わるので、個人的にはアリのほうがいいかなと思います。
スタイリッシュにシュッシュって動くようなサイトならなくてもいいかもしれませんね。

scriptの方は短く、.menuがクリックされたときに反応するように書き、その都度openのクラスをつけたり消したりを切り替えるという処理を書いています。
toggle系は便利ですが、他のscriptと併用して使う場合に不都合が出ることもあるので、他に入れたい処理とうまく調和させながら使ってください。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ

【初心者でもわかる】ゆっくり[ ✕ ]にかわるハンバーガーメニュー

どうも7noteです。シンプルできれいなハンバーガーメニューの作り方

[ ✕ ]にかわるハンバーガーメニューの作り方

解説

おそまつ！