Vertical color-adapting CSS menu

Vertical color-adapting CSS menu – Menu Vertical Hamburguesa cambia de color con Css Html y Js

By Ines Montani

<nav id="nav">
 <button class="nav-icon" id="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>
<section id="home">
 contenido 1
</section>
<section id="about">
 contenido 2
</section>
<section id="blog">
 contenido 3
</section>
<section id="contact">
 contenido 4
</section>

*{box-sizing:border-box;padding:0;margin:0;border:0;outline:0;-webkit-font-smoothing:antialiased}
html{font-size:10px}
body{background:#111;color:#fff;font:2.6rem/1.55 "Adobe Garamond Pro","EB Garamond",Garamond,Georgia,"Times New Roman",serif}
section{padding:12.5%;width:100%}
section:nth-of-type(even){background:#fff;color:#111}
p{margin-bottom:2.5em}
a{color:inherit;text-decoration:none}
h2{font:700 2.8rem "Work Sans","Arial Black",Gadget,sans-serif;text-transform:uppercase;letter-spacing:5px;margin-bottom:2em}
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:700 1.5rem "Work Sans","Arial Black",Gadget,sans-serif;text-transform:uppercase;letter-spacing:2px;padding:.75em 0;-webkit-writing-mode:vertical-lr;-ms-writing-mode:tb-lr;writing-mode:vertical-lr}
nav.active ul{visibility:visible;pointer-events:initial;transition-delay:.2s}
.nav-icon{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;cursor:pointer;display:inline-block;height:35px;position:fixed;top:15px;right:15px;transition:background .3s;width:35px}
.nav-icon span{position:absolute;top:15px;left:5px;background:#fff;display:block;height:3px;right:5px;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}
.nav-icon span:after,.nav-icon span:before{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)}

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