Vertical Color Adaptive Hamburger Navigation With JavaScript And CSS3

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