Responsive Push Navigation In Pure CSS

Preview:

Description:

A CSS only responsive menu that transforms the normal horizontal site navigation into an off-canvas push menu on mobile devices.

How to use it:

Create the html for the mobile menu bar & mobile menu icon.

<input type="checkbox" class="menu-toggle" id="menu-toggle">
<div class="mobile-bar">
  <label for="menu-toggle" class="menu-icon">
      <span></span>
    </label>
</div>

Create a header site navigation as follows:

<header class="header">
  <nav>
    <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 4</a></li>
      <li><a href="#">Item 5</a></li>
    </ul>
  </nav>
</header>

Insert the main content into the ‘container’ element.

<div class="container">
  main content here
</div>

The CSS for the mobile bar & mobile icon.

/**---- Mobile Bar ----**/
.menu-toggle { display: none; }
.mobile-bar {
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  padding: 0 25px;
  width: 100%;
  height: 60px;
  background-color: #333;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
/**---- Menu Icon ----**/
.menu-icon {
  display: block;
  position: relative;
  width: 25px;
  height: 100%;
  cursor: pointer;
  -webkit-transition: -webkit-transform 300ms ease;
  transition: -webkit-transform 300ms ease;
  transition: transform 300ms ease;
  transition: transform 300ms ease, -webkit-transform 300ms ease;
}
.menu-icon > span {
  display: block;
  position: absolute;
  top: 55%;
  margin-top: -0.3em;
  width: 100%;
  height: 0.3em;
  border-radius: 1px;
  background-color: #eee;
  -webkit-transition: -webkit-transform 300ms ease;
  transition: -webkit-transform 300ms ease;
  transition: transform 300ms ease;
  transition: transform 300ms ease, -webkit-transform 300ms ease;
}
.menu-icon > span:before, .menu-icon > span:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 1px;
  background-color: #eee;
  -webkit-transition: -webkit-transform 300ms ease;
  transition: -webkit-transform 300ms ease;
  transition: transform 300ms ease;
  transition: transform 300ms ease, -webkit-transform 300ms ease;
}
.menu-icon > span:before {
  -webkit-transform: translateY(-0.6em);
  transform: translateY(-0.6em);
}
.menu-icon > span:after {
  -webkit-transform: translateY(0.6em);
  transform: translateY(0.6em);
}
/**---- Menu Icon Effects ----**/

.menu-toggle:checked + .mobile-bar .menu-icon {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.menu-toggle:checked + .mobile-bar span:before, .menu-toggle:checked + .mobile-bar span:after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

The basic CSS for the site navigation.

.header {
  position: fixed;
  top: 0;
  left: -35%;
  padding-top: 60px;
  width: 70%;
  height: 100%;
  background-color: #333;
  overflow-y: scroll;
  text-align: center;
  color: #eee;
  -webkit-transition: -webkit-transform 300ms ease;
  transition: -webkit-transform 300ms ease;
  transition: transform 300ms ease;
  transition: transform 300ms ease, -webkit-transform 300ms ease;
}
.header nav, .header ul { height: 100%; }
.header li { border-bottom: 1px solid #eee; }
.header a {
  display: block;
  padding: 20px;
  -webkit-transition: background-color 300ms ease-in;
  transition: background-color 300ms ease-in;
}
.header a:hover { background-color: #222; }

The basic CSS for the main content.

.container {
  position: relative;
  top: 60px;
  padding: 35px 20px;
  background-color: #eee;
  -webkit-transition: -webkit-transform 300ms ease;
  transition: -webkit-transform 300ms ease;
  transition: transform 300ms ease;
  transition: transform 300ms ease, -webkit-transform 300ms ease;
}

The CSS for the off-canvas effect.

.menu-toggle:checked ~ .header {
  -webkit-transform: translateX(50%);
  transform: translateX(50%);
  -webkit-transform: translate3d(50%, 0, 0);
  transform: translate3d(50%, 0, 0);
}
.menu-toggle:checked ~ .container {
  -webkit-transform: translateX(70%);
  transform: translateX(70%);
  -webkit-transform: translate3d(70%, 0, 0);
  transform: translate3d(70%, 0, 0);
}

Style the off-canvas menu when the screen size is less than 720px:

@media (min-width: 720px) {
.menu-toggle:checked ~ .header {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.menu-toggle:checked ~ .container {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.mobile-bar { display: none; }
.header {
  z-index: 5;
  position: relative;
  left: 0;
  padding-top: 0;
  width: 100%;
  height: auto;
  overflow: auto;
}
.header li {
  display: inline-block;
  margin-right: -6px; /* fix the inline-block gap */
  border: none;
}
.header a { padding: 12px 45px; }
.container { top: 0; }
}