Author: | felipedbr |
---|---|
Views Total: | 5,110 views |
Official Page: | Go to website |
Last Update: | May 28, 2015 |
License: | MIT |
Preview:

Description:
navslider is a pure CSS / LESS off-canvas navigation that uses CSS3 transition and transform tricks to reveal a sidebar navigation menu when the visitor hovers over the toggle button.
How to use it:
Create the off-canvas navigation with a toggle button.
<nav class="menu-container"> <a href="#" class="menu-btn"></a> <div class="menu-slide"> <ul class="menu-list"> <li class="menu-item"><a href="#">Home</a></li> <li class="menu-item"><a href="#">Works</a></li> <li class="menu-item"><a href="#">Services</a></li> <li class="menu-item"><a href="#">About</a></li> <li class="menu-item"><a href="#">Contact</a></li> </ul> </div> </nav>
The core CSS / CSS3 styles for the navigation.
.menu-container:hover .menu-slide { -o-transform: translate(270px, 0); -moz-transform: translate(270px, 0); -ms-transform: translate(270px, 0); -webkit-transform: translate(270px, 0); transform: translate(270px, 0); opacity: 1; } .menu-container .menu-btn { color: #333333; position: fixed; top: 10px; left: :10px; cursor: pointer; z-index: 10000; font-size: 19px; text-decoration: none; } .menu-container .menu-btn:hover { color: #666666; } .menu-container .menu-slide { margin: 0; padding: 0; list-style: none; background-color: #e0e0e0; height: 100%; left: -270px; top: 0; width: 270px; overflow-y: auto; z-index: 10000; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; -webkit-transition: 6s ease-in-out; transition: 0.3s ease-in-out; position: fixed; opacity: 0; } .menu-container .menu-slide .menu-list { padding: 0; margin: 0; list-style: none; } .menu-container .menu-slide .menu-list .menu-item a { padding: 8px; display: block; text-decoration: none; color: #333333; transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; -webkit-transition: 0.2s ease-in-out; -ms-transition: 0.2s ease-in-out; -o-transition: 0.2s ease-in-out; font-weight: 300; font-family: 'Roboto', sans-serif; } .menu-container .menu-slide .menu-list .menu-item a:hover { color: #FFF; background-color: #333; transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; -webkit-transition: 0.2s ease-in-out; -ms-transition: 0.2s ease-in-out; -o-transition: 0.2s ease-in-out; }