How To Create a Mobile Navigation hamburger Menu using CSS?

Today, We want to share with you hamburger menu css.In this post we will show you mobile navigation menu css, hear for responsive navigation menu css we will give you demo and example for implement.In this post, we will learn about jQuery Mobile Based Slide Swipeable Side Menu with an example.

Pure CSS Hamburger fold-out menu

first of all you can Download as well as include the CSS in the <head> of your website:

For example

<link href="dist/hamburgers.css" rel="stylesheet">

Add the base hamburger HTML Code:

<button class="hamburger" type="button">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>

Put or Add the class name

<button class="hamburger hamburger--collapse" type="button">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>

list of hamburger-type classes

  • hamburger--slider
  • hamburger--slider-r
  • hamburger--elastic
  • hamburger--elastic-r
  • hamburger--emphatic
  • hamburger--emphatic-r
  • hamburger--minus
  • hamburger--spin
  • hamburger--spin-r
  • hamburger--spring
  • hamburger--boring
  • hamburger--collapse
  • hamburger--collapse-r
  • hamburger--spring-r
  • hamburger--stand
  • hamburger--stand-r
  • hamburger--squeeze
  • hamburger--vortex
  • hamburger--vortex-r
  • hamburger--3dx
  • hamburger--3dx-r
  • hamburger--3dy
  • hamburger--3dy-r
  • hamburger--3dxy
  • hamburger--3dxy-r
  • hamburger--arrow
  • hamburger--arrow-r
  • hamburger--arrowalt
  • hamburger--arrowalt-r
  • hamburger--arrowturn
  • hamburger--arrowturn-r

using npm, yarn and Bower.

install npm, yarn and Bower

npm install hamburgers

yarn get hamburgers

bower install css-hamburgers

Import the hamburgers.scss file

@import "path/to/hamburgers";

Install for Ruby on Rails

Example 3:

//Add Hamburgers to your Gemfile.
gem 'hamburgers'

Run bundle install.

//Include Hamburgers by using Sass’s native !import**:
@import "hamburgers";

index.html

<!DOCTYPE html>
<html>

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hamburger - www.pakainfo.com</title>
  </head>

  <body>
    <nav role="navigation" id="hamburger_menu">
      <div id="menu_toggle">
        <input type="checkbox" />
        <span></span>
        <span></span>
        <span></span>
        <ul id="menu">
          <li><a href="index.html">Home</a></li>
          <li><a href="portfolio.html">Portfolio</a></li>
          <li><a href="resume.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </div>
    </nav>

  </body>

</html>

Free Live Chat for Any Issue

JavaScript code

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("hamburger_menu").style.top = "0";
  } else {
    document.getElementById("hamburger_menu").style.top = "-130px";
  }
  prevScrollpos = currentScrollPos;
}

CSS Code

html,
body {
  width: 100%;
  height: 3000px;
  background-color: #000000;
  font-family: 'Lato', sans-serif;
  letter-spacing: 0.8px;
  word-spacing: 1.2px;
}

nav {
  position: relative;
  height: 90px;
  width: 100%;
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: #F2F4F9;
  padding: 0;
  margin: 0 auto;
}

#hamburger_menu {
  display: block;
  position: fixed;
  height: 120px;
  top: 0;
  z-index: 1;
  transition: 0.6s;
  background: transparent;
}

#menu_toggle {
  display: block;
  position: relative;
  top: 35px;
  left: 35px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

#menu_toggle input {
  display: block;
  width: 80px;
  height: 64px;
  position: absolute;
  top: -7px;
  left: -5px;
  cursor: pointer;
  opacity: 0;
  z-index: 2;
  -webkit-touch-callout: none;
}

#menu_toggle span {
  display: block;
  width: 66px;
  height: 8px;
  margin-bottom: 12px;
  position: relative;
  background: #fff;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease;
}

#menu_toggle span:first-child {
  transform-origin: 0% 0%;
}

#menu_toggle span:nth-last-child(2) {
  transform-origin: 0% 100%;
}

#menu_toggle input:checked~span {
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #222020;
}

#menu_toggle input:checked~span:nth-last-child(3) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#menu_toggle input:checked~span:nth-last-child(2) {
  transform: rotate(-45deg) translate(0, -1px);
}

#menu {
  position: absolute;
  min-width: 500px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  background: #F2F4F9;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
  height: 2000px;
}

#menu li {
  text-align: center;
  padding: 10px 0;
  font-family: 'Lato', sans-serif;
  display: block;
}

#menu li a {
  display: block;
  margin: 6px;
  font-size: 52px;
  line-height: 1.3;
}

#menu_toggle input:checked~ul {
  transform: none;
}

Download

I hope you get an idea about hamburgers.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.