PUG:
button.toggle-menu
  span.sandwich
    span.sw-topper
    span.sw-bottom
    span.sw-footer

nav.main-navigation
  a(href="#") Обо мне
  a(href="#") Резюме
  a(href="#") Портфолио
  a(href="#") Контакты

Sass:
$w: 40px
$h: 4px

.toggle-menu
	background-color: transparent
	outline: 0
	width: 60px
	height: 60px
	right: 30px
	position: fixed
	z-index: 200
	border: none
	span
		display: block

.sandwich
	width: $w
	height: $w
	position: absolute
	top: 13px
	bottom: 0
	left: 0
	right: 0
	margin: auto

.sw-topper
	position: relative
	top: 0
	width: $w
	height: $h
	background: rgb(255, 255, 255)
	border: none
	border-radius: 4px 4px 4px 4px
	transition: transform 0.5s, top 0.2s
	/*transition-delay: 0.2s, 0s */


.sw-bottom
	position: relative
	width: $w
	height: $h
	top: $h * 2
	background: rgb(255, 255, 255)
	border: none
	border-radius: 4px 4px 4px 4px
	transition: transform 0.5s, top 0.2s
	/*transition-delay: 0.2s, 0s */

.sw-footer
	position: relative
	width: $w
	height: $h
	top: $h * 4
	background: rgb(255, 255, 255)
	border: none
	border-radius: 4px 4px 4px 4px
	transition: transform 0.5s, top 0.2s
	transition-delay: 0.2s, 0s

.sandwich.active
	.sw-topper
		top: 13px
		transform: rotate(45deg)
	.sw-bottom
		top: 8px
		transform: rotate(-45deg)
	.sw-footer
		opacity: 0
		top: 0
		transform: rotate(180deg)

.main-navigation
	display: none
	position: fixed
	width: 100%
	height: 100%
	background-color: rgba(0,0,0,.9)
	z-index: 100
	top: 0
	right: 0
	padding-top: 180px
	text-align: center
	a
		display: block
		color: #fff
		text-transform: uppercase
		letter-spacing: 5px
		position: relative
		height: 60px
		&:hover
			color: $color
		span
			display: block
			position: relative
			top: -40px
			left: 0
			height: 100%
			transition: all 0.5s ease
			&:hover
				background-color: rgba(255,255,255,.08)

JQuery:
$(document).ready(function () {
	$(".toggle-menu").click(function() {
		$(".sandwich").toggleClass("active");
	});

	$(".main-navigation").click(function() {
		$(".main-navigation").fadeOut(600);
		$(".sandwich").toggleClass("active");
	}).append("<span>");

	$(".toggle-menu").click(function() {
		if ($(".main-navigation").is(":visible")) {
			$(".main-navigation").fadeOut(600);
		} else {
			$(".main-navigation:hidden").fadeIn(600);
		}
	});
});