HTML-CSS: Hamburger Button

Last update on March 08 2024 13:35:28 (UTC/GMT +8 hours)

HTML-CSS : Exercise-22 with Solution

Using HTML, CSS displays a hamburger menu which transitions to a cross button on hover.

Use a .hamburger-menu container div which contains the top, bottom, and middle bars.
Set the container to display: flex with flex-flow: column wrap.
Add distance between the bars using justify-content: space-between.
Use transform: rotate() to rotate the top and bottom bars by 45 degrees and opacity: 0 to fade the middle bar on hover.
Use transform-origin: left so that the bars rotate around the left point.

HTML Code:

<!--License: https://bit.ly/3GjrtVF--><!-- Comment: Indicates the license information for the code -->
<!DOCTYPE html><!-- Comment: Declares the document type and version of HTML -->
<html><!-- Comment: Indicates the start of the HTML document -->
<head><!-- Comment: Contains meta-information about the HTML document -->
<meta charset="utf-8"><!-- Comment: Declares the character encoding for the document -->
<meta name="viewport" content="width=device-width"><!-- Comment: Sets the viewport width to the width of the device -->
<title>Using HTML, CSS displays a hamburger menu which transitions to a cross button on hover</title><!-- Comment: Sets the title of the document -->
</head><!-- Comment: End of the head section -->
<body><!-- Comment: Contains the content of the HTML document -->
<div class="hamburger-menu"><!-- Comment: Defines a container for the hamburger menu -->
<div class="bar top"></div><!-- Comment: Defines the top bar of the hamburger menu -->
<div class="bar middle"></div><!-- Comment: Defines the middle bar of the hamburger menu -->
<div class="bar bottom"></div><!-- Comment: Defines the bottom bar of the hamburger menu -->
</div><!-- Comment: End of the hamburger menu container -->
</body><!-- Comment: End of the body section -->
</html><!-- Comment: End of the HTML document -->

Explanation:

This HTML code creates a simple webpage with a container div for a hamburger menu.
The  comment indicates the license information for the code.
<!DOCTYPE html> declares the document type and version of HTML, which is HTML5.
<html> marks the start of the HTML document.
<head> contains meta-information about the HTML document, such as character encoding and viewport settings.
The <title> element sets the title of the webpage.
<body> contains the content of the HTML document.
Within the hamburger menu container, there are three divs representing the bars of the hamburger menu.

CSS Code:

<style> /* Comment: Begins the CSS styling for the HTML document */
.hamburger-menu { /* Comment: Styles the hamburger menu container */
  display: flex; /* Comment: Displays the container as a flex container */
  flex-flow: column wrap; /* Comment: Arranges the children elements in a column layout and allows wrapping */
  justify-content: space-between; /* Comment: Distributes space evenly between the children elements */
  height: 2.5rem; /* Comment: Sets the height of the container */
  width: 2.5rem; /* Comment: Sets the width of the container */
  cursor: pointer; /* Comment: Changes the cursor to a pointer on hover */
}

.hamburger-menu .bar { /* Comment: Styles the bars inside the hamburger menu */
  height: 5px; /* Comment: Sets the height of the bars */
  background: Orange; /* Comment: Sets the background color of the bars */
  border-radius: 5px; /* Comment: Sets the border radius to create rounded corners */
  margin: 3px 0px; /* Comment: Sets margin to separate the bars */
  transform-origin: left; /* Comment: Sets the origin point for the transformation */
  transition: all 0.5s; /* Comment: Adds a transition effect to all properties with a duration of 0.5s */
}

.hamburger-menu:hover .top { /* Comment: Styles the top bar when the hamburger menu is hovered */
  transform: rotate(45deg); /* Comment: Rotates the top bar by 45 degrees */
}

.hamburger-menu:hover .middle { /* Comment: Styles the middle bar when the hamburger menu is hovered */
  opacity: 0; /* Comment: Sets the opacity of the middle bar to 0, making it invisible */
}

.hamburger-menu:hover .bottom { /* Comment: Styles the bottom bar when the hamburger menu is hovered */
  transform: rotate(-45deg); /* Comment: Rotates the bottom bar by -45 degrees */
}
</style> /* Comment: End of the CSS styling */

Explanation:

This CSS code applies styles to a hamburger menu.
.hamburger-menu styles the container for the hamburger menu, making it a flex container with space between the children elements, and setting its height, width, and cursor.
.hamburger-menu .bar styles the individual bars inside the hamburger menu, setting their height, background color, border radius, margin, and transition effect.
:hover pseudo-class is used to style the bars when the hamburger menu is hovered.
transform property is used to rotate the top and bottom bars to create a cross button effect when hovered.
opacity property is used to hide the middle bar when hovered.

HTML-CSS Editor:

See the Pen html-css-practical-exercises by w3resource (@w3resource) on CodePen.