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>

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.

Read Also:  Laravel 6 Delete File from public folder Example

About Pakainfo

I am Jaydeep Gondaliya, a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Pakainfo →

Leave a Reply

Your email address will not be published. Required fields are marked *