CSS Only Togglable Fullscreen Side Navigation

Category: CSS & CSS3 , Menu & Navigation | February 15, 2017
Author: CiTA
Views Total: 2,461 views
Official Page: Go to website
Last Update: February 15, 2017
License: MIT

Preview:

CSS Only Togglable Fullscreen Side Navigation

Description:

A sidebar navigation that allows to show and hide a fullscreen menu using pure CSS/CSS3.

How to use it:

Create the fullscreen navigation menu:

<aside class="sidebar">
  <ul class="menu">
    <li class="menu__item"><a class="menu__link" href="#">Home</a></li>
    <li class="menu__item"><a class="menu__link" href="#">Category</a></li>
    <li class="menu__item"><a class="menu__link" href="#">Blog</a></li>
    <li class="menu__item"><a class="menu__link" href="#">About</a></li>
    <li class="menu__item"><a class="menu__link" href="#">Contact</a></li>
  </ul>
</aside>

Create a hamburger menu toggle button using checkbox and label elements:

<input type="checkbox" id="menuToggler" class="input-toggler"/>
<label for="menuToggler" class="menu-toggler">
  <span class="menu-toggler__line"></span>
  <span class="menu-toggler__line"></span>
  <span class="menu-toggler__line"></span>
</label>

The main CSS to style the navigation menu.

.sidebar {
  -webkit-transition: all .25s ease-out;
  transition: all .25s ease-out;
}

.sidebar {
  width: var(--sidebar-width);
  -webkit-transform: translateX(calc(var(--sidebar-width) * -1));
  transform: translateX(calc(var(--sidebar-width) * -1));
  background: -webkit-linear-gradient(top left, Tomato, Wheat);
  background: linear-gradient(to bottom right, Tomato, Wheat);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  top: 0;
  height: 100vh;
  opacity: .5;
}

.content {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.menu { list-style-type: none; }

.menu__link {
  color: white;
  font-weight: 100;
  text-decoration: none;
  font-size: 10vmin;
  line-height: 15vmin;
  -webkit-transition: all .25s ease-out;
  transition: all .25s ease-out;
}

.menu__link:hover, .menu__link:focus, .menu__link:active { color: Gold; }

Style & animate the hamburger menu toggler.

.menu-toggler {
  display: block;
  width: var(--toggler-size);
  height: var(--toggler-size);
  position: relative;
  position: fixed;
  top: 10px;
  left: 10px;
  cursor: pointer;
  z-index: 1;
}

.menu-toggler__line {
  height: calc(var(--toggler-size) / 5);
  background: Tomato;
  position: absolute;
  left: 0;
  right: 0;
  -webkit-transition: all .25s ease-out;
  transition: all .25s ease-out;
}

.menu-toggler__line:nth-child(2) {  top: calc(var(--toggler-size) / 5 * 2);
}

.menu-toggler__line:nth-child(3) {  top: calc(var(--toggler-size) / 5 * 4);
}

.input-toggler {
  position: absolute;
  left: -100%;
}

.input-toggler:checked ~ .menu-toggler .menu-toggler__line { background: Wheat; }

.input-toggler:checked ~ .menu-toggler .menu-toggler__line:nth-child(1) {  -webkit-transform: translateY(calc(var(--toggler-size) / 5 * 2)) rotate(45deg);
 transform: translateY(calc(var(--toggler-size) / 5 * 2)) rotate(45deg);
}

.input-toggler:checked ~ .menu-toggler .menu-toggler__line:nth-child(2) { opacity: 0; }

.input-toggler:checked ~ .menu-toggler .menu-toggler__line:nth-child(3) {  -webkit-transform: translateY(calc(var(--toggler-size) / 5 * -2)) rotate(-45deg);
 transform: translateY(calc(var(--toggler-size) / 5 * -2)) rotate(-45deg);
}

.input-toggler:checked ~ .sidebar {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  opacity: .98;
}

You Might Be Interested In:


Leave a Reply