Author: | CiTA |
---|---|
Views Total: | 2,847 views |
Official Page: | Go to website |
Last Update: | February 15, 2017 |
License: | MIT |
Preview:

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