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

of your website:

For example

Add the base hamburger HTML Code:

Put or Add the class name

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

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;
}

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.