Pure CSS Responsive Slide In Push Navigation Menu

Pure CSS Slide Menu is a responsive navigation system that turns a regular menu into an off-the-canvas sliding menu on mobile devices.

responsive navigation menu css, slide menu css codepen, mobile slide menu codepen, css sliding border navigation menu

How to make use of it:

1. Create a responsive navigation header for your web page.

<header class="left_menu">
  <input type="checkbox" id="main_menu" name="main_menu" />
  <span class="logo">Logo</span>
  <label for="main_menu">
  <div class="hamburger hamburger--elastic" type="button" aria-label="Menu" aria-controls="main_menu"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </div>
        <h1 class="logo">Logo</h1>
      <li> <a href="">Home</a> </li>
      <li> <a href="">Contact</a> </li>
      <li> <a href="">About</a> </li>
      <li> <a href="">Blog</a> </li>

2. Basic CSS Styles for Navigation Button for Navigation and Hamburger.

nav li, nav ul { margin: 0 }
nav { box-shadow: 0 0 10px rgba(0,0,0,.5) }
nav ul {
  height: 100%;
  padding: 0;
  list-style: none;
  overflow: hidden
nav li:nth-child(1) a {
  -moz-transition-delay: .13s;
  -o-transition-delay: .13s;
  -webkit-transition-delay: .13s;
  transition-delay: .13s
nav li:nth-child(2) a {
  -moz-transition-delay: .21s;
  -o-transition-delay: .21s;
  -webkit-transition-delay: .21s;
  transition-delay: .21s
nav li:nth-child(3) a {
  -moz-transition-delay: .29s;
  -o-transition-delay: .29s;
  -webkit-transition-delay: .29s;
  transition-delay: .29s
nav li:nth-child(4) a {
  -moz-transition-delay: .37s;
  -o-transition-delay: .37s;
  -webkit-transition-delay: .37s;
  transition-delay: .37s
nav li:nth-child(5) a {
  -moz-transition-delay: .45s;
  -o-transition-delay: .45s;
  -webkit-transition-delay: .45s;
  transition-delay: .45s
nav li:nth-child(6) a {
  -moz-transition-delay: .53s;
  -o-transition-delay: .53s;
  -webkit-transition-delay: .53s;
  transition-delay: .53s
nav li:nth-child(7) a {
  -moz-transition-delay: .61s;
  -o-transition-delay: .61s;
  -webkit-transition-delay: .61s;
  transition-delay: .61s
nav li:nth-child(8) a {
  -moz-transition-delay: .69s;
  -o-transition-delay: .69s;
  -webkit-transition-delay: .69s;
  transition-delay: .69s
nav li:nth-child(9) a {
  -moz-transition-delay: .77s;
  -o-transition-delay: .77s;
  -webkit-transition-delay: .77s;
  transition-delay: .77s
nav li:nth-child(10) a {
  -moz-transition-delay: .85s;
  -o-transition-delay: .85s;
  -webkit-transition-delay: .85s;
  transition-delay: .85s
nav li:nth-child(11) a {
  -moz-transition-delay: .93s;
  -o-transition-delay: .93s;
  -webkit-transition-delay: .93s;
  transition-delay: .93s
nav li:nth-child(12) a {
  -moz-transition-delay: 1.01s;
  -o-transition-delay: 1.01s;
  -webkit-transition-delay: 1.01s;
  transition-delay: 1.01s
nav li a {
  color: #fff;
  position: relative;
  display: block;
  outline: 0;
  text-decoration: none
label[for=main_menu], nav {
  -moz-transition: all .2s cubic-bezier(.23, 1, .32, 1);
  -o-transition: all .2s cubic-bezier(.23, 1, .32, 1);
  -webkit-transition: all .2s cubic-bezier(.23, 1, .32, 1);
  transition: all .2s cubic-bezier(.23, 1, .32, 1)
.hamburger {
  padding: .25em .4em;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: .15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible
.hamburger:hover { opacity: .7 }
.hamburger-box {
  width: 1.5em;
  height: 24px;
  display: inline-block;
  position: relative
.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px
input[name=main_menu]:checked~nav, nav { margin: 0 }
.hamburger-inner, .hamburger-inner::after, .hamburger-inner::before {
  width: 1.5em;
  height: 4px;
  background-color: #fff;
  border-radius: 4px;
  position: absolute;
  transition-property: transform;
  transition-duration: .15s;
  transition-timing-function: ease
header, nav { background-color: #3c7eb5 }
.hamburger-inner::after, .hamburger-inner::before {
  content: "";
  display: block
.hamburger-inner::before { top: -10px }
.hamburger-inner::after { bottom: -10px }
.hamburger--elastic .hamburger-inner {
  top: 2px;
  transition-duration: 275ms;
  transition-timing-function: cubic-bezier(.68, -.55, .265, 1.55)
.hamburger--elastic .hamburger-inner::before {
  top: 10px;
  transition: opacity 125ms 275ms ease
.hamburger--elastic .hamburger-inner::after {
  top: 20px;
  transition: transform 275ms cubic-bezier(.68, -.55, .265, 1.55)
label[for=main_menu] {
  display: block;
  font-weight: 700;
  text-align: center;
  position: fixed;
  z-index: 500;
  top: .65em
input[name=main_menu] { display: none }
input[name=main_menu]:checked~nav li:nth-child(2) { border-top: 1px solid rgba(255,255,255,.3) }
input[name=main_menu]:checked~nav li a {
  color: #fff;
  padding: .9em;
  border-bottom: 1px solid rgba(255,255,255,.3)
input[name=main_menu]:checked~label .hamburger .hamburger-inner {
  -moz-transform: translate3d(0, 10px, 0) rotate(135deg);
  -o-transform: translate3d(0, 10px, 0) rotate(135deg);
  -ms-transform: translate3d(0, 10px, 0) rotate(135deg);
  -webkit-transform: translate3d(0, 10px, 0) rotate(135deg);
  -moz-transition-delay: 75ms;
  -o-transition-delay: 75ms;
  -webkit-transition-delay: 75ms
input[name=main_menu]:checked~label .hamburger .hamburger-inner::before {
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  -webkit-transition-delay: 0s
input[name=main_menu]:checked~label .hamburger .hamburger-inner::after {
  -moz-transform: translate3d(0, -20px, 0) rotate(-270deg);
  -o-transform: translate3d(0, -20px, 0) rotate(-270deg);
  -ms-transform: translate3d(0, -20px, 0) rotate(-270deg);
  -webkit-transform: translate3d(0, -20px, 0) rotate(-270deg);
  -moz-transition-delay: 75ms;
  -o-transition-delay: 75ms;
  -webkit-transition-delay: 75ms
nav {
  position: fixed;
  top: 0;
  width: 18em;
  height: 100%;
  -moz-transition: all .2s cubic-bezier(.17, .67, .44, .58);
  -o-transition: all .2s cubic-bezier(.17, .67, .44, .58);
  -webkit-transition: all .2s cubic-bezier(.17, .67, .44, .58);
  transition: all .2s cubic-bezier(.17, .67, .44, .58)

3. CSS for a menu outside the canvas.

@media (min-width:767px) {
nav, nav ul { width: auto }
header span.logo, label[for=main_menu] { display: none }
nav {
  box-shadow: none;
  position: relative;
  margin: 0;
  padding: .5em
nav ul { height: auto }
nav ul li { display: inline-block }
nav ul li a {
  left: inherit;
  border-bottom: none medium;
  padding: .5em .8em
input[name=main_menu]:checked~label .hamburger .hamburger-inner {
  transform: translate3d(0, 10px, 0) rotate(135deg);
  transition-delay: 75ms
input[name=main_menu]:checked~label .hamburger .hamburger-inner::before {
  transition-delay: 0s;
  opacity: 0
input[name=main_menu]:checked~label .hamburger .hamburger-inner::after {
  transform: translate3d(0, -20px, 0) rotate(-270deg);
  transition-delay: 75ms
.left_menu input[name=main_menu]:checked~section, input[name=main_menu]:checked~section {
  -moz-transform: translate3d(18em, 0, 0);
  -o-transform: translate3d(18em, 0, 0);
  -ms-transform: translate3d(18em, 0, 0);
  -webkit-transform: translate3d(18em, 0, 0);
  transform: translate3d(18em, 0, 0)
.left_menu input[name=main_menu]:checked~label[for=main_menu] {
  left: 15em;
  -moz-transition: left .2s cubic-bezier(.23, 1, .32, 1);
  -o-transition: left .2s cubic-bezier(.23, 1, .32, 1);
  -webkit-transition: left .2s cubic-bezier(.23, 1, .32, 1);
  transition: left .2s cubic-bezier(.23, 1, .32, 1)
@media (max-width:767px) {
.left_menu nav li a {
  left: -100%;
  -moz-transition: left .2s cubic-bezier(.23, 1, .32, 1);
  -o-transition: left .2s cubic-bezier(.23, 1, .32, 1);
  -webkit-transition: left .2s cubic-bezier(.23, 1, .32, 1);
  transition: left .2s cubic-bezier(.23, 1, .32, 1)
.left_menu nav {
  left: 0;
  margin-left: -18.8em
.left_menu input[name=main_menu]:checked~nav li a { left: 0 }
.left_menu input[name=main_menu]~label[for=main_menu] { left: .5em }
nav ul { width: 18em }

pure css responsive slide in navigation Plugin/Github, animated navigation bar in html and css

See Demo And Download

Official Website(vperl): Click Here

This superior jQuery/javascript plugin is developed by vperl. For extra advanced usage, please go to the official website.

Related Posts


Responsive Drag and Drop File Uploader/Download Plugin | 5x5_jq_uploader

5x5_jq_uploader plugin can be used to instantly create a drop file area and file queue with a little bit of preparation. Bootstrap is used for responsive planning…


Stylesheet For Implementing Dark Mode with Bootstrap

Bootstrap Dark Mode provides a style sheet and two texts that allow you to implement Dark Mode on your website. Initially loaded based on user preferences, can…


Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate. 11 Default Menu 2 Responsive Navigation…


Simple Multi-Select Dropdown Pure Vanilla Javascript | multiSelect.js

MultiSelect.js is a simple, clean, and progressive JavaScript library designed for easy integration with any type of project or system. The design was heavily influenced by the…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…