[HTML / CSS] 햄버거 언더 메뉴바 만들기 (1)

언더 메뉴바 디자인

햄버거 버튼 누르면 아래로 내려오는 메뉴바 만들기.

돋보기하고 햄버거 클릭돼야 함.

기존 메뉴바 HTML 변경

          <div class="icons">
            <img
              src="banner/search.png"
              alt="돋보기 아이콘"
              class="search-icon"
            />
            <img src="banner/Menu.png" alt="메뉴 아이콘" class="menu-icon" />
          </div>

대충 짜놨던 html 코드를 바꿔주기.

( 클릭 되게 )

  <!-- 우측 메뉴바 -->
        <nav class="menu-bar">
          <ul class="navbar">
            <li><a href="#">MENU</a></li>
            <li><a href="#">STORE</a></li>
            <li><a href="#">WHAT'S NEW</a></li>
            <li><a href="#">STORY</a></li>
          </ul>

          <div class="icons">
            <img
              src="banner/search.png"
              alt="돋보기 아이콘"
              class="search-icon"
              id="search-icon"
            />
            <img
              src="banner/Menu.png"
              alt="메뉴 아이콘"
              class="menu-icon"
              id="menu-icon"
            />
          </div>
        </nav>

아이디 추가해줌.

.search-icon

.menu-icon

기존 메뉴바 CSS

/* 써치하고 메뉴 아이콘 포인터 부여. */
.search-icon,
.menu-icon {
  cursor: pointer;
}

그리고 CSS 추가.

- 눌러지는 듯한 손가락 효과.

/*--- 우측 메뉴바 navbar 꾸미기 */
.navbar li {
  /* 옆으로 나열 */
  display: inline-block;
  /* 가로 배열을 위해 inline 사용 */
  margin-right: 33px;
}

.menu-bar {
  border-radius: 50px;
  background: #ffbe01;
  padding: 8px 20px 8px 20px;
  /* 글씨 가운데로 옮기기 */
  display: flex;
  align-items: center;
}

.navbar a:hover {
  color: orange;
}

.search-icon,
.menu-icon {
  cursor: pointer;
} /* 써치하고 메뉴 아이콘 포인터 부여. */

JS 추가

// 돋보기 아이콘에 대한 클릭 이벤트 리스너를 추가합니다.
document.getElementById("search-icon").addEventListener("click", function () {
  // 여기에 검색 기능을 활성화하는 코드를 넣습니다.
  console.log("돋보기 아이콘이 클릭되었습니다.");
});

// 햄버거 메뉴 아이콘에 대한 클릭 이벤트 리스너를 추가합니다.
document.getElementById("menu-icon").addEventListener("click", function () {
  // 여기에 메뉴 토글 기능을 활성화하는 코드를 넣습니다.
  console.log("햄버거 메뉴 아이콘이 클릭되었습니다.");
});

JS 도 준비.

---

언더 메뉴바 디자인 짜주기

- 메뉴바를 캐러셀 위에 띄워야 함.

또는 이렇게 내려오게끔 한 다음에 숨기기.

---

배워온 내려온다음에 숨기기로 결정.

HTML

       <!-- 언더 메뉴바 -->
 <div class="under-menu">
        <ul class="navbar-under">
          <li><a href="#" class="link">MENU</a></li>
          <li><a href="#" class="link">STORE</a></li>
          <li><a href="#" class="link">WHAT'S NEW</a></li>
          <li><a href="#" class="link">STORY</a></li>
          <li><a href="#" class="link">McDelivery</a></li>
          <li><a href="#" class="link">고객문의</a></li>
        </ul>
      </div>

CSS 적용

/* --- 언더 메뉴바  */
.under-menu {
  background-color: #fccf4b;
}
.navbar-under a {
  font-size: 25px;
  text-decoration: none; /* 밑줄제거 제거 */
  font-weight: bold;
}
.navbar-under {
  text-align: center; /* 중앙정렬 */
}
.navbar-under li {
  margin-bottom: 20px;
}
.navbar-under li:last-child {
  margin-bottom: 0; /* 마지막 항목의 하단 마진 제거 */
}

---

마진말고 패딩으로 조정.

.navbar-under li {
  padding-bottom: 20px;
}
/*MENU 위에 공간 만들기.*/
.navbar-under li:nth-child(1) {
  padding-top: 20px;
}

---

겉 테두리 (stroke) 부여

- hover 사용

HTML 수정 - class 지움

      <!-- 언더 메뉴바 -->
      <div class="under-menu">
        <ul class="navbar-under">
          <li><a href="#">MENU</a></li>
          <li><a href="#">STORE</a></li>
          <li><a href="#">WHAT'S NEW</a></li>
          <li><a href="#">STORY</a></li>
          <li><a href="#">McDelivery</a></li>
          <li><a href="#">고객문의</a></li>
        </ul>
      </div>

CSS - hover 추가 / white 색상 부여 / stroke 효과

/* --- 언더 메뉴바  */
.under-menu {
  background-color: #fccf4b;
}
.navbar-under a {
  font-size: 25px;
  text-decoration: none;
  font-weight: bold;
  color: white;
}
.navbar-under {
  text-align: center;
}
.navbar-under li {
  padding-bottom: 20px;
}

.navbar-under li:nth-child(1) {
  padding-top: 20px;
}
.navbar-under a:hover {
  color: orange;
  /*찐한효과 */
  /* -webkit-text-stroke: 1px rgb(255, 0, 0); */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
    1px 1px 0 #000, 0px -1px 0 #000, -1px 0px 0 #000, 1px 0px 0 #000,
    0px 1px 0 #000;
}