본문으로 건너뛰기

Hamburger Menu Style

Hamburger Menu Style

In this lesson, we will look at how style is applied to the hamburger menu.

HTML:

<nav class="navbar"> This tag is used as a container for the entire navigation bar. It is the main tag for grouping menu items on a website.

<nav class="navbar"></nav>

This area displays the logo or title of the website. It is set up as a clickable link.

<span id="logo">
<a href="https://example.com">Website Title</a>
</span>

<ul class="nav-menu">

This is a list that contains the main menu items. Each item is represented by an <li> tag.

<ul class="nav-menu">
<li><a class="nav-link" href="#about">About</a></li>
<!-- Other menu items -->
</ul>

<div class="hamburger">

The hamburger menu icon is used for toggling (Toggle, On/Off) the menu on mobile screens.

<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>

CSS:

@media (max-width: 670px) means that the styles below are applied when the screen width is 670px or less.

This is the style of the menu items on mobile screens.

CSS
.navbar .nav-menu {
position: fixed;
right: -100vw;
/* ... other style properties ... */
}

This is the style applied when the menu is activated (i.e., when the hamburger icon is clicked).

CSS
.nav-menu.active {
right: 20px;
}

.hamburger This is the default style of the hamburger menu icon.

CSS
.hamburger {
display: block;
cursor: pointer;
/* ... */
}

.hamburger.active .bar

This changes the style of each line when the hamburger icon is active (when the menu is open).

CSS
.hamburger.active .bar:nth-child(2) {
opacity: 0;
}
.hamburger.active .bar:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}

Setting it up this way, when the user clicks the hamburger icon, the menu appears as a slide-out, and the icon transforms into an 'X' shape. Clicking again will hide the menu and return the icon to its original state.

To execute this behavior, additional JavaScript code is required. In the next lesson, we will explore how JavaScript is applied.