<main class="page">
  <div class="header">
    <nav class="menu">
      <a href="#" class="menu__open"></a>
      <div class="list">
        <div class="menu__item"> 
          <span><a href="#">Home</a></span></div>
        <div class="menu__item"> 
          <span><a href="#">About</a></span></div>
        <div class="menu__item"> 
          <span><a href="#">Proyects</a></span></div>
      </div>
    </nav>
  </div>
  <section class="wrapper">
    <button class="menu-1">Sample 1</button><br>
    <button class="menu-2">Sample 2</button><br>
    <button class="menu-3">Sample 3</button><br>
    <button class="menu-4">Sample 4</button><br>
    <button class="menu-5">Sample 5</button>
  </section>
</main>
$dark: #333;
$light: #fff;
$width: 3em;
$height: 3em;
$fx: 500ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
/* transform */ 
@function _transform($d, $x,$y) {
	@return rotate($d) translate($x,$y);
}
/* mixin absolute */
@mixin absolute {
	position: absolute;
	top: 0;
	left: 0;
}

* {
	box-sizing: border-box;
}

html,
body {
	position: relative;
	height: 100%;
}

body {
	margin: 0;
	padding: 0;
}

/* Basic*/
.page {
	.header {
		padding: 1em;
	}
	.wrapper {
		padding: 1em;
		text-align: center;
		button {
			background: $light;
			border: 1px solid $dark;
			color: $dark;
			margin-bottom: 1em;
			padding: 0.8em 1.5em;
			border-radius: 4px;
			transition: all 500ms ease;
			text-transform: uppercase;
			letter-spacing: 2px;
			outline: none;
			&:hover {
				background: darken($dark, 60);
				border: 1px solid $dark;
				color: $light;
				transition: all 500ms ease;
			}
			&.active {
				background: $dark;
				color: $light;
				transition: all 500ms ease;
			}
		}
	}
}
.menu {
	position: relative;
	width: $width;
	height: $height;
	z-index: 1;
	transition: all 1s ease;
	.menu__open {
		@include absolute;
		right: 0;
		bottom: 0;
		width: $width - 1;
		height: $height - 1;
		margin: auto;
		background: $dark;
		border-radius: 100%;
		z-index: 2;
		transition: background $fx;
		&:hover {
			background: #f88;
			transition: background $fx;
		}
	}
}
.menu__item {
	@include absolute;
	width: $width;
	height: $height;
	margin: 0;
	background: $light;
	border: 1px solid $dark;
	transform: _transform(0deg, 0em, 0em);
	transition: all $fx;
	a {
		color: $dark;
		text-decoration: none;
		text-transform: uppercase;
		letter-spacing: 2px;
		font-size: 12px;
		font-weight: bold;
	}
	span {
		text-align: right;
		color: #ddd;
		width: 80%;
		display: block;
		line-height: $height;
		opacity: 0;
		transition: opacity 100ms linear;
	}
}
.menu__is__open {
	.menu__item {
		width: 10em;
		transition: all $fx;
		span {
			opacity: 1;
			transition: opacity $fx;
		}
		&:nth-child(1) {
			transform: _transform(0deg, 0em, 0em);
		}
		&:nth-child(2) {
			transform: _transform(45deg, 2.5em, 2em);
		}
		&:nth-child(3) {
			transform: _transform(90deg, 3.5em, 3.5em);
		}
	}
}
.menu__is__open_2 {
	.menu__item {
		width: auto;
		padding: 0 1em;
		transition: all $fx;
		span {
			opacity: 1;
			transition: opacity $fx;
		}
		&:nth-child(1) {
			transform: _transform(0deg, 3em, 0em);
		}
		&:nth-child(2) {
			transform: _transform(0deg, 0em, 4em);
		}
		&:nth-child(3) {
			transform: _transform(0deg, 2em, 8em);
		}
	}
}
.menu__is__open_3 {
	.menu__item {
		width: auto;
		padding: 0 1em;
		transition: all $fx;
		span {
			opacity: 1;
			transition: opacity $fx;
		}
		&:nth-child(1) {
			transform: _transform(0deg, 3em, 0em);
		}
		&:nth-child(2) {
			transform: _transform(0deg, 8.5em, 0em);
		}
		&:nth-child(3) {
			transform: _transform(0deg, 14.5em, 0em);
		}
	}
}
.menu__is__open_4 {
	.menu__item {
		width: auto;
		padding: 0 1em;
		transition: all $fx;
		span {
			opacity: 1;
			transition: opacity $fx;
		}
		&:nth-child(1) {
			transform: _transform(45deg, 3em, 0.5em);
		}
		&:nth-child(2) {
			transform: _transform(45deg, 8.5em, 0.7em);
		}
		&:nth-child(3) {
			transform: _transform(45deg, 14.7em, 1.3em);
		}
	}
}
.menu__is__open_5 {
	.menu__item {
		width: auto;
		padding: 0 1em;
		transition: all $fx;
		span {
			opacity: 1;
			transition: opacity $fx;
		}
		&:nth-child(1) {
			transform: _transform(90deg, 4em, 0.8em);
		}
		&:nth-child(2) {
			transform: _transform(90deg, 9.5em, 1em);
		}
		&:nth-child(3) {
			transform: _transform(90deg, 16.2em, 1.9em);
		}
	}
}
View Compiled
const _ = el => document.querySelector(el);
const _all = el => document.querySelectorAll(el);

const openNav = (sel,dest) =>{
 return  _(sel).addEventListener('click', e => {
    e.preventDefault();
    _('.menu').classList.toggle(dest);
    _(sel).classList.toggle('active');
  });
}

openNav('.menu','menu__is__open');
for(let i = 1; i < 6; i++){
	if(i === 1) openNav('.menu-1','menu__is__open');
	openNav('.menu-'+i,'menu__is__open_'+i);
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.