먼저

지난번 에 계속해서 버전 2 작성

햄버거 메뉴를 만들기 전에 메뉴 디자인에 대한 다양한 웹 사이트를 살펴 보았습니다.
메뉴를 전체 화면에 배치하고 있는 것이 최근의 유행이라고 느꼈다.
그래서 이번에는 전체 화면에 표시되는 메뉴를 작성.

이하, 전체 화면 표시되는 햄버거 메뉴가 구현되어있는 웹 사이트 링크.

htps //w w. 흠. t/

htp // 아나 g 등 m. 파리 s/

h tp : / / ~ ~ s. 아니 t / 에 ct 리카 /

그러나

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%;

자바스크립트로 떨어지는 타이밍을 어긋나

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);
})

마지막으로

모르는 사이에 햄버거 메뉴는 매우 진화했습니다 ...

이상