ハンバーガーメニューデザインの提案 Ver.2

最初に

前回に引き続きバージョン2を作成

ハンバーガーメニュー作成の前にメニューデザインについていろんなWebサイトを調べてみた．
メニューを全画面に配置しているのが最近の流行りだと感じた．
そこで，今回は全画面に表示されるメニューを作成．

以下，全画面表示されるハンバーガーメニューが実装されているWebサイトリンク．

• https://www.feudi.it/
• http://anagram.paris/
• http://zz-is.it/electrica/

DEMO

codepen
github

今回はハンバーガーをクリックすると上部から垂れてくるメニューを作成．

中身の説明

下が丸い長細い棒が上から5本落ちてくるイメージ

html

<div class="hbg-menu-contents">
  <div class="ball1"></div>
  <div class="ball2"></div>
  <div class="ball3"></div>
  <div class="ball4"></div>
  <div class="ball5"></div>
</div>

クリック前は画面外に隠している

css

position: fixed;
top: -100px;
width: 20%;
height: 100px;
border-bottom-left-radius: 500px;
border-bottom-right-radius: 500px;

縦長の棒の横の長さを20%として，それぞれ20％ずつずらして配置

css

.ball1 {
   left: 0;
}
.ball2 {
   left: 20%;
}
.ball3 {
   left: 40%;
}
.ball4 {
   left: 60%;
}
.ball5 {
   left: 80%;
}

クリック後に縦の長さを伸ばしている

css

height: 200%;

JavaScriptで落下のタイミングをずらしている

js

setTimeout(() => {
    $(".ball1").toggleClass("open");
  }, 100);
  setTimeout(() => {
    $(".ball2").toggleClass("open");
  }, 150);
  setTimeout(() => {
    $(".ball3").toggleClass("open");
  }, 200);
  setTimeout(() => {
    $(".ball4").toggleClass("open");
  }, 250);
  setTimeout(() => {
    $(".ball5").toggleClass("open");
  }, 300);

  setTimeout(() => {
    $(".menu").toggleClass("active");
  }, 400);
})

最後に

知らないうちにハンバーガーメニューはとても進化していた...

以上