button.nav-tgl(type='button' aria-label='toggle menu')
	// this span just for the three dividers in the hamburger button
	span(aria-hidden='true')
	
nav.nav
	// I don't care about the menu elements here so I will hide them
	ul
		li element one
		li element two
		li element three
		li element four
View Compiled
// Please ❤ if you like it


// After reading code

// Is it violate the web standards by not (display: none) the nav:before or the background when it's not actived?

// Is clip-path ready to be used ?

// tell me in the comments below

.nav {
	ul {
		display: none;
	}
}

.nav-tgl {
  display: inline-block;
  cursor: pointer;
  position: fixed;
  z-index: 100;
  right: 30px;
  top: 30px;
  width: 70px;
  height: 70px;
  border: none;
  border-radius: 50%;
  padding: 0;
  background: #fff;
	box-shadow: 0px 4px 24px rgba(#000, 0.24);
  line-height: 0.6;
  text-align: center;
	
	// making the dividers
	> span {
		// the second divider
		display: inline-block;
		position: relative;
		height: 2px;
		width: 34px;
		border-radius: 1px;
		background: #293335;
		vertical-align: middle;
		
		// the first & the third dividers
		&:before, &:after {
		  display: inline-block;
			position: absolute;
			content: "";
			height: 2px;
			border-radius: 1px;
			background: #293335;
			// for the hover state
			transition: all 200ms;
		}
		&:before {
		  top: -11px;
			left: 3px;
			width: 28px;
		}
		&:after {
		  top: 11px;
			left: 6px;
			width: 22px;
		}
	}
	
	// ofcorse we should find a replacement for the focus state but it's not our topic
	&:focus {outline: none}
	
	&:hover > span:after, &:hover > span:before {
		width: 34px;
		left: 0;
	}
	
	// when toggled
	&.toggled > span {
		height: 0;
		&:after, &:before {
		  top: 0px;
			left: 0;
			width: 34px;
		}
		&:after {
		  transform: rotate(-45deg);
		}
		&:before {
			transform: rotate(45deg);
		}
	}
}

// for the nav background (styling the nav itself is not our topic)
.nav:before {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  content: '';
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  transition: all 500ms ease-in-out;
	
	// that's all the pen about
  clip-path: circle(30px at calc(100% - 65px) 65px);
	// for AT
  visibility: hidden;
}

// when it gits activated
.active.nav:before {
	visibility: visible;
	
	// that's all the pen about
	clip-path: circle(100%);
}

let toggled = false;
const nav = document.getElementsByClassName('nav')[0];
const btn = document.getElementsByClassName('nav-tgl')[0];
btn.onclick = function(evt) {
  if (!toggled) {
    toggled = true;
    evt.target.classList.add('toggled');
    nav.classList.add('active');
  } else {
    toggled = false;
    evt.target.classList.remove('toggled');
    nav.classList.remove('active');
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.