Author: | rthor |
---|---|
Views Total: | 2,765 views |
Official Page: | Go to website |
Last Update: | July 3, 2014 |
License: | Unknown |
Preview:

Description:
A trendy CSS3 based off-canvas navigation with an animated toggle icon that allows to slide out a sidebar navigation panel from the left side of the browser window. No Javascript needed.
How to use it:
Create the Html for a menu icon to toggle the off-canvas navigation.
<input id="menu" type="checkbox" name="menu" class="HiddenCheckbox"/> <label for="menu" class="MenuIcon"></label>
Animated the menu icon using CSS3 transitions and transforms.
.HiddenCheckbox { display: none; } .MenuIcon { cursor: pointer; display: block; float: left; height: 30px; position: relative; width: 30px; z-index: 2; } .MenuIcon::before { -webkit-box-shadow: #999999 0 12px 0; box-shadow: #999999 0 12px 0; height: 6px; -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; width: 30px; } .MenuIcon::after { bottom: 0; height: 6px; -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; width: 30px; } .MenuIcon::before, .MenuIcon::after { background: #999999; display: block; content: ''; position: absolute; -webkit-transition: -webkit-box-shadow 0.2s linear, -webkit-transform 0.4s 0.2s; transition: box-shadow 0.2s linear, transform 0.4s 0.2s; } .HiddenCheckbox:checked ~ .MenuHeader { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none; } .HiddenCheckbox:checked ~ .MenuIcon::before { -webkit-box-shadow: transparent 0 0 0; box-shadow: transparent 0 0 0; -webkit-transform: rotate(45deg) translate3d(6px, -3px, 0); transform: rotate(45deg) translate3d(6px, -3px, 0); } .HiddenCheckbox:checked ~ .MenuIcon::after { -webkit-transform: rotate(-45deg) translate3d(6px, 3px, 0); transform: rotate(-45deg) translate3d(6px, 3px, 0); } .HiddenCheckbox:checked ~ .Menu { left: 0; }
Create the Html for an off-canvas navigation and then wrap it together with the menu icon into a parent element with class of ‘MenuContainer’ .
<div class="MenuContainer"> <input id="menu" type="checkbox" name="menu" class="HiddenCheckbox"/> <label for="menu" class="MenuIcon"></label> <h2 class="MenuHeader">Nav Menu</h2> <nav class="Menu"> <ul class="Menu-list"> <li class="Menu-item"><a href="https://cssscript.com" target="_blank" class="Menu-link">Home</a></li> <li class="Menu-item"><a href="https://cssscript.com/us/" target="_blank" class="Menu-link">About</a></li> <li class="Menu-item"><a href="https://cssscript.com/contact-us/" target="_blank" class="Menu-link">Contact</a></li> </ul> </nav> </div>
The required CSS to style the off-canvas navigation.
.MenuContainer { display: inline-block; margin: 20px; } .Menu { background: #333; bottom: 0; left: -90%; position: absolute; top: 0; width: 90%; -webkit-transition: left 0.4s; transition: left 0.4s; } .Menu-list { list-style-type: none; margin: 60px 0 0; padding: 0; } .Menu-item { margin: 0; } .Menu-link { color: #fff; display: block; overflow: hidden; padding: 8px 22px; position: relative; text-decoration: none; z-index: 1; } .Menu-link::before { background: #444; bottom: 0; content: ''; left: 0; position: absolute; right: 100%; top: 0; -webkit-transition: right 0.4s; transition: right 0.4s; z-index: -1; } .Menu-link::after { content: attr(href); color: #fff; float: right; opacity: 0; -webkit-transition: opacity 0.8s, -webkit-transform 0.4s; transition: opacity 0.8s, transform 0.4s; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } .Menu-link:hover::before { right: 0; } .Menu-link:hover::after { opacity: 0.5; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }