Hamburger Menu

Enhance user experience on your website with a hamburger menu. Learn how to integrate this versatile and space-saving navigation icon to provide users with easy access to your site's menu options.

Preview
Code

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap" rel="stylesheet" />


<button class="burger" onclick="toggleMenu()"></button>
<div class="background"></div>
<div class="shade"></div>
<div class="menu">
  <nav>
    <a style="animation-delay: 0.2s">About</a>
    <a style="animation-delay: 0.3s">Portfolio</a>
    <a style="animation-delay: 0.4s">Services</a>
    <a style="animation-delay: 0.5s">Contact</a>
  </nav>
</div>

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  font-family: Poppins;
  color: #f9f9f9;
  background-image: url("https://raw.githubusercontent.com/frontend-joe/css-components/main/menus/menu-1/bg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: -250px 0%;
}

.shade {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(rgb(0 0 0 / 90%), rgb(0 0 0 / 0%));
}

button {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.burger,
.menu {
  position: fixed;
}

.burger {
  z-index: 4;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  background-image: url("https://raw.githubusercontent.com/frontend-joe/css-components/684c7ef341884b0aacd8b236792d36e3bb3ff3f1/menus/menu-1/menu.svg");
  background-repeat: no-repeat;
  background-position: center;
}

body.open .burger {
  background-image: url("https://raw.githubusercontent.com/frontend-joe/css-components/684c7ef341884b0aacd8b236792d36e3bb3ff3f1/menus/menu-1/close.svg");
}

.background {
  position: fixed;
  z-index: 2;
  top: 44px;
  left: 44px;
  aspect-ratio: 1 / 1;
  translate: -50% -50%;
  height: 88px;
  background: rgb(0 0 0 / 0%);
  border-radius: 50%;
  transition: 0.6s;
}

body.open .background {
  height: 300vmax;
  background: rgb(0 0 0 / 80%);
}

.menu {
  z-index: 3;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: 0.05s;
}

.menu nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-left: 100px;
}

body.open .menu {
  opacity: 1;
  visibility: visible;
}

body .menu nav:hover > a {
  opacity: 0.25;
}

body .menu nav > a:hover {
  opacity: 1;
  translate: 8px 0;
}

.menu a {
  position: relative;
  color: #f9f9f9;
  font-size: 32px;
  font-family: "Euclid Circular A";
  padding: 20px 0 20px 20px;
  text-decoration: none;
  opacity: 0;
  cursor: pointer;
  transition: 0.4s;
}

.menu a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -26px;
  translate: 0 -50%;
  margin-top: 2px;
  width: 10px;
  height: 10px;
  border-top: 3px solid #ffffff;
  border-right: 3px solid #ffffff;
  opacity: 0;
  rotate: 45deg;
  transition: 0.3s;
}

.menu a:hover::after {
  opacity: 1;
}

@keyframes appear {
  0% {
    opacity: 0;
    translate: -30px 0;
  }
  100% {
    opacity: 1;
  }
}

body.open .menu a {
  opacity: 1;
  animation: appear 0.25s backwards;
}

const toggleMenu = () => document.body.classList.toggle("open");

A responsive hamburger menu is essential for modern web design, offering a clean and efficient way to navigate on mobile devices. This guide will walk you through creating a hamburger menu using HTML, CSS, and JavaScript. Follow these steps to copy the provided code snippet, link the required files, and customize the menu to fit your specific needs.

Step 1: Copy the Code Snippet

Start by copying the provided HTML, CSS, and JavaScript code snippet below. This snippet includes the foundational structure, styles, and functionality for the hamburger menu. Select the code, copy it, and paste it into your respective HTML, CSS, and JavaScript files.

Step 2: Link CSS and JavaScript Files

Ensure the CSS and JavaScript files are correctly linked in your HTML document. Add the following <link> tag within the <head> section and the <script> tag at the end of the <body> section:
```
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
```

Step 3: Customize and Make it Yours

Personalize the hamburger menu to match your website's branding and functionality. Adjust the CSS styles to modify the menu's appearance, colors, and transitions. Experiment with different layouts and animations to create a unique and user-friendly navigation experience.

By following these steps, you can implement and customize a responsive hamburger menu on your website using HTML, CSS, and JavaScript. Tailor the menu to your specific needs and improve your site's navigation with this modern, mobile-friendly component.

Code Explanation

HTML Code

Button Element

<button class="burger" onclick="toggleMenu()"></button>

<button class="burger" onclick="toggleMenu()"></button>: This button has a class of "burger" and an onclick event handler that calls the toggleMenu() function when the button is clicked. This is typically used for a hamburger menu icon in a responsive navigation menu.

Background Element

<div class="background"></div>

<div class="background"></div>: This div with the class "background" is used to create a background effect, possibly a fixed background that adds a visual layer behind the menu.

Shade Element

<div class="shade"></div>

<div class="shade"></div>: This div with the class "shade" is used to create a shading effect when the menu is active, dimming the rest of the content to focus on the menu.

Menu Element

<div class="menu">
  <nav>
    <a style="animation-delay: 0.2s">About</a>
    <a style="animation-delay: 0.3s">Portfolio</a>
    <a style="animation-delay: 0.4s">Services</a>
    <a style="animation-delay: 0.5s">Contact</a>
  </nav>
</div>

<div class="menu">: This div wraps the navigation menu.
<nav>: This semantic element contains the navigation links.
<a style="animation-delay: 0.2s">About</a>: Each anchor tag (<a>) represents a navigation link. The style attribute with animation-delay sets a delay for an animation, probably a fade-in or slide-in effect, for each link, creating a staggered appearance.

CSS Code

Global Styles

* {
  box-sizing: border-box;
}

Ensures that the width and height of elements include padding and border, making layout calculations easier.

Body and HTML

html,
body {
  height: 100%;
}

body {
  font-family: Poppins;
  color: #f9f9f9;
  background-image: url("https://raw.githubusercontent.com/frontend-joe/css-components/main/menus/menu-1/bg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: -250px 0%;
}

Sets the body and html to take up the full height of the viewport.
Applies the "Poppins" font to the body text.
Sets the text color to a light gray.
Applies a background image to the body, scaled to cover the entire background without repeating, positioned with an offset.

Shade Overlay

.shade {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(rgb(0 0 0 / 90%), rgb(0 0 0 / 0%));
}

Creates a fixed position overlay that covers the entire viewport with a gradient from opaque black to transparent.

Button Styles

button {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

Resets the button's border and padding, makes the background transparent, and changes the cursor to a pointer on hover.

Burger Button and Menu

.burger,
.menu {
  position: fixed;
}

Both elements are positioned fixed, meaning they remain in place relative to the viewport.

Burger Button

.burger {
  z-index: 4;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  background-image: url("https://raw.githubusercontent.com/frontend-joe/css-components/684c7ef341884b0aacd8b236792d36e3bb3ff3f1/menus/menu-1/menu.svg");
  background-repeat: no-repeat;
  background-position: center;
}

Styles the burger button, placing it at the top-left corner with a background image of a menu icon.
Centers the contents of the button using display: grid and place-items: center.

body.open .burger {
  background-image: url("https://raw.githubusercontent.com/frontend-joe/css-components/684c7ef341884b0aacd8b236792d36e3bb3ff3f1/menus/menu-1/close.svg");
}

Changes the burger button's background image to a close icon when the body has the class open.

Background Circle

.background {
  position: fixed;
  z-index: 2;
  top: 44px;
  left: 44px;
  aspect-ratio: 1 / 1;
  translate: -50% -50%;
  height: 88px;
  background: rgb(0 0 0 / 0%);
  border-radius: 50%;
  transition: 0.6s;
}

Creates a circular element with a transparent background, positioned at the top-left corner, and centered.

body.open .background {
  height: 300vmax;
  background: rgb(0 0 0 / 80%);
}

Expands the circle to a very large size and changes its background to semi-transparent black when the body has the class open.

Menu Links

.menu a {
  position: relative;
  color: #f9f9f9;
  font-size: 32px;
  font-family: "Euclid Circular A";
  padding: 20px 0 20px 20px;
  text-decoration: none;
  opacity: 0;
  cursor: pointer;
  transition: 0.4s;
}

Styles the links inside the menu, making them white, larger in size, and with padding. Initially hidden with opacity: 0.

body.open .menu a {
  opacity: 1;
  animation: appear 0.25s backwards;
}

Shows the links with an animation when the body has the class open.

Hover Effects

body .menu nav:hover > a {
  opacity: 0.25;
}

body .menu nav > a:hover {
  opacity: 1;
  translate: 8px 0;
}

Dim all links to 25% opacity when hovering over the nav.
Increase the opacity and slightly translate the hovered link to the right.

Link After Element

.menu a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -26px;
  translate: 0 -50%;
  margin-top: 2px;
  width: 10px;
  height: 10px;
  border-top: 3px solid #ffffff;
  border-right: 3px solid #ffffff;
  opacity: 0;
  rotate: 45deg;
  transition: 0.3s;
}

Adds an arrow icon after each link, initially hidden with opacity: 0.

.menu a:hover::after {
  opacity: 1;
}

Shows the arrow icon when the link is hovered.

Animation

@keyframes appear {
  0% {
    opacity: 0;
    translate: -30px 0;
  }
  100% {
    opacity: 1;
  }
}

Defines a keyframe animation named appear that fades in and slides the element from left to right.

JavaScript Code

Function Definition

const toggleMenu = () => document.body.classList.toggle("open");

const toggleMenu: Declares a constant named toggleMenu. It is assigned an arrow function (=>).
document.body: References the <body> element of the HTML document.
classList.toggle("open"): Uses the classList property of the body element to toggle the class open. If the class open is present on the body element, toggle will remove it. If the class open is not present, the toggle will add it.