<div class="overlay-navigation"> <nav role="navigation"> <ul> <li><a href="#" data-content="The beginning">Home</a></li> <li><a href="#" data-content="Curious?">About</a></li> <li><a href="#" data-content="I got game">Skills</a></li> <li><a href="#" data-content="Only the finest">Works</a></li> <li><a href="#" data-content="Don't hesitate">Contact</a></li> </ul> </nav> </div> <section class="home"> <a href="https://codepen.io/fluxus/pen/gPWxXJ" target="_blank">Click for CSS version</a> <div class="open-overlay"> <span class="bar-top"></span> <span class="bar-middle"></span> <span class="bar-bottom"></span> </div>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter