Responsive Hamburger Menu CSS Only

Responsive Hamburger Menu CSS Only
Code Snippet:Pure CSS Hamburger Menu
Author: Nguyen Anh Tuan
Published: January 10, 2024
Last Updated: January 22, 2024
Downloads: 649
License: MIT
Edit Code online: View on CodePen
Read More

This code implements a stylish and responsive hamburger menu design using only CSS. The menu icon transforms into a cross icon upon user interaction, offering a seamless navigation experience. The menu comes with four positions, top left, top right, bottom left, and bottom right.

Moreover, this CSS-only solution simplifies the implementation of a responsive hamburger menu, ensuring a user-friendly interface without the need for JavaScript.

How to Create Responsive Hamburger Menu

1. Begin by setting up the HTML structure. Place the <header> tag for the menu bar, <nav> elements for different sections, and the main content within <main> element.

Within the <nav> elements, create the menu toggles. These include checkboxes and spans for the hamburger icon lines.

Inside <ul class="menuItem">, list the navigation items using <li> and <a> tags. Customize the links and content for each menu item.

<header>
  <nav class="menu--left" role="navigation">
    <div class="menuToggle">
      <input type="checkbox"/>
      <span></span>
      <span></span>
      <span></span>
      <ul class="menuItem">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Info</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Show me more</a></li>
      </ul>
    </div>
  </nav>
  <nav class="menu--right" role="navigation">
    <div class="menuToggle">
      <input type="checkbox"/>
      <span></span>
      <span></span>
      <span></span>
      <ul class="menuItem">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Info</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Show me more</a></li>
      </ul>
    </div>
  </nav>
</header>

<nav class="menu--bottom--left" role="navigation">
  <div class="menuToggle">
    <input type="checkbox"/>
    <span></span>
    <span></span>
    <span></span>
    <ul class="menuItem">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Info</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Show me more</a></li>
    </ul>
  </div>
</nav>

<nav class="menu--bottom--right" role="navigation">
  <div class="menuToggle">
    <input type="checkbox"/>
    <span></span>
    <span></span>
    <span></span>
    <ul class="menuItem">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Info</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Show me more</a></li>
    </ul>
  </div>
</nav>

<main class="main">
  <h1>Pure CSS Hamburger Menu</h1>
  <div class="content">
    <p>
      Pure CSS Hamburger Menu is a design pattern for websites and apps that shows a menu icon that transforms into a cross icon when the user clicks on it, using only CSS properties and pseudo-elements to create a simple and responsive menu.
    </p>
  </div>
</main>

<footer>
  <div class="copyright">
    Inspired from "Pure CSS Hamburger fold-out menu" by <a href="https://codepen.io/erikterwan/pen/EVzeRP" target="_blank">Erik Terwan</a>
  </div>
</footer>

2. Now, use the following CSS code or customize it to suit your design preferences. This CSS defines the appearance and behavior of the hamburger menu and its elements.

html {
  box-sizing: border-box;
  overflow-x: hidden;
}

*, *:after, *:before {
  box-sizing: border-box;
}

body {
  display: block !important;
  min-width: 350px;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  color: #fff;
  overflow-x: hidden;
  background: #232323;
  background: linear-gradient(45deg, #042461 0%, rgba(225, 5, 34, 0) 70%), linear-gradient(135deg, #340447 10%, rgba(49, 5, 209, 0) 80%), linear-gradient(225deg, #0f053a 10%, rgba(10, 219, 216, 0) 80%), linear-gradient(315deg, #050813 100%, rgba(9, 245, 5, 0) 70%) !important;
  font-family: "Avenir Next", "Avenir", sans-serif;
}

.main {
  position: relative;
  padding: 60px 30px;
  width: 100%;
}
.main h1 {
  color: #fff;
  text-align: center;
}
.main .content {
  margin: 0 auto;
  width: 100%;
  max-width: 768px;
}
.main .content p {
  line-height: 1.8;
  text-align: center;
}

header {
  display: flex;
  justify-content: space-between;
  flex-flow: row;
  align-items: center;
}

footer {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 30px;
  color: #fff;
}
footer .copyright {
  text-align: center;
}
footer a {
  color: #1BB76E;
  text-decoration: none;
  transition: 0.25s;
}
footer a:hover {
  color: #FF5500;
}

.menuToggle {
  display: block;
  position: relative;
  top: 50px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}
.menuToggle a {
  text-decoration: none;
  color: #232323;
  transition: all 0.3s ease;
}
.menuToggle a:hover {
  color: tomato;
}
.menuToggle input {
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  cursor: pointer;
  opacity: 0;
  /* hide this */
  z-index: 2;
  /* and place it over the hamburger */
  -webkit-touch-callout: none;
}
.menuToggle span {
  position: relative;
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: #cdcdcd;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
}
.menuToggle span:first-child {
  transform-origin: 0% 0%;
}
.menuToggle span:nth-last-child(2) {
  transform-origin: 0% 100%;
}

.menuToggle input:checked ~ span {
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}
.menuToggle input:checked ~ span:nth-last-child(3) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}
.menuToggle input:checked ~ span:nth-last-child(2) {
  transform: rotate(-45deg) translate(0, -1px);
}
.menuToggle input:checked ~ .menuItem {
  transform: none;
}

.menuItem {
  position: absolute;
  width: 300px;
  padding: 50px;
  padding-top: 125px;
  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}
.menuItem li {
  padding: 10px 0;
  font-size: 22px;
}

.menu--left {
  position: relative;
  width: 50%;
}
.menu--left .menuToggle {
  left: 0;
}
.menu--left .menuToggle input {
  left: 50px;
}
.menu--left .menuToggle span {
  left: 50px;
}
.menu--left .menuItem {
  left: 50px;
  margin: -100px 0 0 -50px;
  transform: translate(-100%, 0);
}

.menu--right .menuToggle {
  position: fixed;
  right: 0;
}
.menu--right .menuToggle input {
  right: 50px;
}
.menu--right .menuToggle span {
  right: 50px;
}
.menu--right .menuItem {
  right: 0;
  margin: -100px 0 0 0;
  transform: translate(100%, 0);
}
.menu--right .menuItem li a:hover {
  padding-left: 5px;
}

.menu--bottom--right .menuToggle {
  position: fixed;
  top: auto;
  bottom: 0;
  right: 0;
  z-index: 1;
}
.menu--bottom--right .menuToggle input {
  right: 50px;
  bottom: 50px;
  top: auto;
}
.menu--bottom--right .menuToggle input:checked ~ .menuItem {
  transform: scale(1);
}
.menu--bottom--right .menuToggle input:checked ~ .menuItem li:nth-child(1) {
  -webkit-animation: text-slide-in 0.2s;
  -moz-animation: text-slide-in 0.2s;
  animation: text-slide-in 0.2s;
}
.menu--bottom--right .menuToggle input:checked ~ .menuItem li:nth-child(2) {
  -webkit-animation: text-slide-in 0.3s;
  -moz-animation: text-slide-in 0.3s;
  animation: text-slide-in 0.3s;
}
.menu--bottom--right .menuToggle input:checked ~ .menuItem li:nth-child(3) {
  -webkit-animation: text-slide-in 0.4s;
  -moz-animation: text-slide-in 0.4s;
  animation: text-slide-in 0.4s;
}
.menu--bottom--right .menuToggle input:checked ~ .menuItem li:nth-child(4) {
  -webkit-animation: text-slide-in 0.5s;
  -moz-animation: text-slide-in 0.5s;
  animation: text-slide-in 0.5s;
}
.menu--bottom--right .menuToggle input:checked ~ .menuItem li:nth-child(5) {
  -webkit-animation: text-slide-in 0.6s;
  -moz-animation: text-slide-in 0.6s;
  animation: text-slide-in 0.6s;
}
.menu--bottom--right .menuToggle span {
  right: 50px;
  bottom: 50px;
  top: auto;
}
.menu--bottom--right .menuItem {
  bottom: 0;
  right: 0;
  margin: 0;
  padding-top: 50px;
  padding-bottom: 125px;
  transform-origin: bottom right;
  transform: scale(0);
  -webkit-transition: -webkit-transform 0.3s, visibility 0s 0s;
  -moz-transition: -moz-transform 0.3s, visibility 0s 0s;
  transition: transform 0.3s, visibility 0s 0s;
}
.menu--bottom--right .menuItem li {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.menu--bottom--right .menuItem li a:hover {
  padding-left: 5px;
}

.menu--bottom--left .menuToggle {
  position: fixed;
  top: auto;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.menu--bottom--left .menuToggle input {
  left: 50px;
  bottom: 50px;
  top: auto;
}
.menu--bottom--left .menuToggle input:checked ~ .menuItem {
  transform: scale(1);
}
.menu--bottom--left .menuToggle input:checked ~ .menuItem li:nth-child(1) {
  -webkit-animation: text-slide-in 0.2s;
  -moz-animation: text-slide-in 0.2s;
  animation: text-slide-in 0.2s;
}
.menu--bottom--left .menuToggle input:checked ~ .menuItem li:nth-child(2) {
  -webkit-animation: text-slide-in 0.3s;
  -moz-animation: text-slide-in 0.3s;
  animation: text-slide-in 0.3s;
}
.menu--bottom--left .menuToggle input:checked ~ .menuItem li:nth-child(3) {
  -webkit-animation: text-slide-in 0.4s;
  -moz-animation: text-slide-in 0.4s;
  animation: text-slide-in 0.4s;
}
.menu--bottom--left .menuToggle input:checked ~ .menuItem li:nth-child(4) {
  -webkit-animation: text-slide-in 0.5s;
  -moz-animation: text-slide-in 0.5s;
  animation: text-slide-in 0.5s;
}
.menu--bottom--left .menuToggle input:checked ~ .menuItem li:nth-child(5) {
  -webkit-animation: text-slide-in 0.6s;
  -moz-animation: text-slide-in 0.6s;
  animation: text-slide-in 0.6s;
}
.menu--bottom--left .menuToggle span {
  left: 50px;
  bottom: 50px;
  top: auto;
}
.menu--bottom--left .menuItem {
  bottom: 0;
  left: 0;
  margin: 0;
  padding-top: 50px;
  padding-bottom: 125px;
  transform-origin: bottom left;
  transform: scale(0);
  -webkit-transition: -webkit-transform 0.3s, visibility 0s 0s;
  -moz-transition: -moz-transform 0.3s, visibility 0s 0s;
  transition: transform 0.3s, visibility 0s 0s;
}
.menu--bottom--left .menuItem li {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.menu--bottom--left .menuItem li a:hover {
  padding-left: 5px;
}

@keyframes text-slide-in {
  0% {
    -webkit-transform: translateX(100px);
    -moz-transform: translateX(100px);
    -ms-transform: translateX(100px);
    -o-transform: translateX(100px);
    transform: translateX(100px);
  }
  100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
}

Modify the positioning of menus (left, right, bottom-left, bottom-right) by altering classes like .menu--left, .menu--right, .menu--bottom--left, .menu--bottom--right.

Customize the design and functionality as per your project requirements for an engaging and intuitive navigation system.

That’s all! hopefully, you have successfully created a Responsive Hamburger Menu on your website. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X