본문으로 건너뛰기

햄버거 메뉴란?

햄버거 메뉴란?

1. 모양: 세 개의 수평선으로 이루어진 햄버거 모양의 아이콘을 활용해, 주 메뉴 항목을 숨기거나 나타냅니다.

2. 목적:

  • 햄버거 메뉴는 화면에 표시되는 콘텐츠를 최소화하고 깔끔하게 보이기 위해 사용합니다.
  • 주로 모바일 화면에 사용되며, 좁은 화면 공간 때문에 주 메뉴를 숨기고 필요할 때만 보이게 하는 데 유용합니다.

3. 장점:

  • 간결하고 깔끔한 디자인
  • 사용자가 이미 익숙하여 쉽게 인식

4. 단점:

  • 처음 방문할 때 메뉴 항목들을 바로 볼 수 없어 혼란을 느낄 수 있음
  • 과도하게 사용될 경우 사용자 경험(UX)에 방해가 될 수 있음

5. 실습 템플릿 HTML 코드:

<!-- 햄버거 메뉴 -->
<ul class="nav-menu">
<li><a class="nav-link" href="#about">소개</a></li>
<li><a class="nav-link" href="#interests">취미</a></li>
<li><a class="nav-link" href="#memory">추억</a></li>
<li>
<a class="nav-link btn btn-primary" href="#contact"
>연락하기 <i class="fas fa-arrow-right"></i
></a>
</li>
</ul>
<!-- 햄버거 아이콘 -->
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>

<!-- 스타일 -->
<style>
.hamburger-menu {
width: 30px;
height: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
}

.hamburger-menu .line {
width: 100%;
height: 3px;
background-color: black;
}
</style>