Author: | inesmontani |
---|---|
Views Total: | 2,045 views |
Official Page: | Go to website |
Last Update: | February 23, 2016 |
License: | MIT |
Preview:

Description:
A vertical hamburger navigation menu that automatically change the color of your menu based on the background color of your webpage using the CSS3 mix-blend-mode:difference
property.
How to use it:
Create the vertical navigation with a hamburger toggle button on the webpage.
<nav id="nav"> <button id="nav-icon" class="nav-icon"><span></span></button> <ul> <li><a href="#home">home</a></li> <li><a href="#about">about</a></li> <li><a href="#blog">blog</a></li> <li><a href="#contact">contact</a></li> </ul> </nav>
The CSS styles for the toggle button.
.nav-icon { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; cursor: pointer; display: inline-block; height: 35px; position: fixed; top: 15px; right: 15px; -webkit-transition: background 0.3s; transition: background 0.3s; width: 35px; } .nav-icon span { position: absolute; top: 15px; left: 5px; background: #fff; display: block; height: 3px; right: 5px; -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; } .nav-icon span:before, .nav-icon span:after { width: 100%; height: 3px; background: #fff; content: ""; display: block; left: 0; position: absolute; } .nav-icon span:before { top: -8px; } .nav-icon span:after { bottom: -8px; } .active .nav-icon span { -webkit-transform: rotate(90deg); transform: rotate(90deg); }
The main CSS styles for the vertical navigation.
nav { mix-blend-mode: difference; z-index: 100; } nav ul { position: fixed; top: 60px; right: 5px; height: 100vh; visibility: hidden; pointer-events: none; list-style: none; width: 35px; } nav ul li { font: bold 1.5rem "Work Sans", "Arial Black", Gadget, sans-serif; text-transform: uppercase; letter-spacing: 2px; padding: 0.75em 0; -webkit-writing-mode: vertical-lr; -ms-writing-mode: tb-lr; writing-mode: vertical-lr; } nav.active ul { visibility: visible; pointer-events: initial; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; }
The JavaScript to toggle the vertical navigation.
var nav = document.getElementById('nav'); var navlinks = nav.getElementsByTagName('a'); function toggleNav() { (nav.classList.contains('active')) ? nav.classList.remove('active') : nav.classList.add('active'); } document.getElementById('nav-icon').addEventListener('click', function(e) { e.preventDefault(); toggleNav(); }); for(var i = 0; i < navlinks.length; i++) { navlinks[i].addEventListener('click', function() { toggleNav(); }); }