<input type='checkbox' id='mmeennuu'>
<label class='menu' for='mmeennuu'>

<div class='barry'>
	<span class='bar'></span>
	<span class='bar'></span>
	<span class='bar'></span>
	<span class='bar'></span>
</div>
	
<ul>
	<li><a id='home' href='#home'>Home</a></li>
	<li><a id='about' href='#about'>About</a></li>
	<li><a id='contact' href='#contact'>Contact</a></li>
	<li><a id='link' href='#link'>Other</a></li>
</ul>

</label>
$lred:#E57373;
$red:#F44336;

@mixin transition($in) {
	transition:$in;
	-webkit-transition:$in;
	-moz-transition:$in;
	-o-transition:$in;
	-ms-transition:$in;
}

body {
	margin:0;
	padding:0;
	background-color:#222;
}
* {
	font-family:Helvetica,sans-serif;
	color:#555;
}

#mmeennuu {
	display:none;
}

#mmeennuu:checked ~ .menu {

	width:500px;
	border-radius:5px;
	background-color:transparent;
	border:3px solid $red;
	height:85px;

	&>ul {
		display:block;
		opacity:1;
	}
	&>.barry {
		display:none;
	}
}

.menu {
	display:block;
	margin:30px auto;
	width:100px;
	height:100px;
	background-color:$red;
	border:3px solid transparent;
	border-radius:50%;
	overflow:hidden;
	cursor:pointer;
	@include transition(all 0.5s ease-in-out);

	div.barry {
		width:40px;
		margin:35px auto;


		.bar {
			display:block;
			width:100%;
			height:5px;
			margin-top:3px;
			border-radius:2px;
			background-color:#fff;
		}
	}

	ul {
		opacity:0;
		display:none;
		@include transition(all 0.5s ease-in-out);
		list-style-type:none;
		padding:0;
		width:500px;
		text-align:center;
		margin-bottom: 0;

		li {
			display:inline-block;
			a {
				text-decoration:none;
				display:inline-block;
				padding:15px 25px;
				color:$red;
				font-size:20px;
				@include transition(all 0.3s ease-in-out);
				border:3px solid transparent;
				border-radius:5px;

				&:hover {
					border-color:$red;
				}
				
				&:target {
					border-bottom-color:$red;
				}
			}
		}
	}
}
View Compiled
/*
Error 404.
Javascript Not Found.
*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.