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

<div class='barry'>
	<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'>Products</a></li>
	<li><a id='contact' href='#contact'>About</a></li>
	<li><a id='link' href='#link'>Contact</a></li>
</ul>

</label>
$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:#FFFFFF;
}

#mmeennuu {
	display:none;
}
.bar{
	transition: 0.5sec ease-in-out;
	  -webkit-transform-origin: center;
          transform-origin: center;
}
#mmeennuu:checked ~ .menubar {

	width: 100%;
	border-radius:5px;
	background-color:$red;
	border: none;
	height:50px;

	&>ul {
		display:block;
		opacity:1;
	}
	&>.bar:nth-child(1) {
		-ms-transform: rotate(45deg); /* IE 9 */
  -webkit-transform: rotate(45deg); /* Safari 3-8 */
  transform: rotate(45deg);
	}
	&> .bar:nth-child(2) {
		-ms-transform: rotate(135deg); /* IE 9 */
  -webkit-transform: rotate(135deg); /* Safari 3-8 */
  transform: rotate(135deg);
	}
	&>.bar:nth-child(3) {
		-ms-transform: rotate(-45deg); /* IE 9 */
  -webkit-transform: rotate(-45deg); /* Safari 3-8 */
  transform: rotate(-45deg);
	}
}

.menubar {
	display:block;
	margin:20px 20px 0 0;
	float: right;
	width:65px;
	height:65px;
	background-color:$red;
	border: none;
	border-radius:50%;
	overflow:hidden;
	cursor:pointer;
	@include transition(all 0.3s ease-in-out);

	div.barry {
		width:30px;
		margin:22px auto;


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

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

		li {
			margin: auto 0;
			display:inline-block;
			a {
				position: relative;
				text-decoration:none;
				display:inline-block;
				padding-bottom:18px;
				margin: 0 20px;
				color: #FFFFFF;
				font-size:14px;
				@include transition(all 0.4s ease-in-out);

				
				&:hover{
					&:after{
					 content : "";
  					 position: absolute;
					z-index: 1000;
  					 left: 10%;
 					 bottom  : 0;
					 height  : 2px;
  					width   : 80%;  
  					border-bottom:2px solid white;
				}
				}
			}
		}
	}
}
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.