Skip to main content
Practice

What is a Hamburger Menu?

1. Appearance: Utilizes an icon resembling a hamburger made up of three horizontal lines to hide or reveal the main menu items.

2. Purpose:

  • The hamburger menu is used to minimize the content displayed on the screen, keeping it clean and tidy.
  • It is primarily used on mobile screens, where limited screen space necessitates hiding the main menu and showing it only when needed.

3. Advantages:

  • Simple and clean design
  • Users are already familiar with it, making it easily recognizable

4. Disadvantages:

  • It may be confusing for first-time visitors as they cannot immediately see the menu items
  • Overuse can hinder user experience (UX)

5. Practice HTML Template Code:

<!-- Hamburger Menu -->
<ul class="nav-menu">
  <li><a class="nav-link" href="#about">About</a></li>
  <li><a class="nav-link" href="#interests">Interests</a></li>
  <li><a class="nav-link" href="#memory">Memories</a></li>
  <li>
    <a class="nav-link btn btn-primary" href="#contact"
      >Contact <i class="fas fa-arrow-right"></i
    ></a>
  </li>
</ul>
<!-- Hamburger Icon -->
<div class="hamburger">
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
</div>

<!-- Style -->
<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>

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.