Responsive Menu

Responsive navigation

Resize this window to see it in action!

Changes will happen When the screen (browser window) gets smaller than 680px

Resize this window to see it in action!

Changes will happen When the screen (browser window) gets smaller than 680px

HTML

							
							
<div class="outer">
	<input type="checkbox" id="slide-checkbox" class="slide-checkbox" role="button">
	<label for="slide-checkbox" class="slide-toggle" onclick="">
		<span class="menu-icon"></span>
	</label>
	<div class="slide">
		<ul class="nav">
			<li><a href="#">Menu 1</a></li>
			<li><a href="#">Menu 2</a></li>
			<li><a href="#">Menu 3</a></li>
			<li><a href="#">Menu 4</a></li>
		</ul>
		<div class="content">
			<h1>Responsive navigation</h1>
			<p>Resize this window to see it in action!</p>
			<p>Changes will happen When the screen (browser window) gets smaller than 680px</p>
			<p>Resize this window to see it in action!</p>
			<p>Changes will happen When the screen (browser window) gets smaller than 680px</p>
		</div>
	</div>
</div>
							
						

CSS

							
							
.outer {
	overflow: hidden;
}

.slide {
	background: #f9f9f9;
	padding: 20px;
}

.content {
	margin-top: 30px;
}
.nav {
	width: 100%;
	margin: 0 0 20px 0;
	padding: 5px 0;
	background: #a25f5e;
	border-radius: 3px;
	overflow: hidden;
}
.nav li {
	list-style: none;
	margin: 0;
	padding: 0;
	float: left;
}
.nav li a {
	display: block;
	padding: 5px 20px;
	text-decoration: none;
	color: #f9f9f9;
}

.slide-toggle {
	float: right;
	cursor: pointer;
	position: relative;
	z-index: 1;
	display: none;
	margin: 10px 20px 0 0;
	background-color: #a25f5e;
	height: 30px;
	width: 38px;
	border-radius: 3px;
	text-align: center;
}

.menu-icon {
	cursor: pointer;
	border-radius: 1px;
	height: 2px;
	width: 26px;
	background: white;
	position: relative;
	-webkit-transition: background 300ms ease-in-out;
	-moz-transition: background 300ms ease-in-out;
	-o-transition: background 300ms ease-in-out;
	-ms-transition: background 300ms ease-in-out;
	transition: background 300ms ease-in-out;
}
.menu-icon:before, 
.menu-icon:after {
	content: '';
	-webkit-transition: transform 300ms ease-in-out;
	-moz-transition: transform 300ms ease-in-out;
	-o-transition: transform 300ms ease-in-out;
	-ms-transition: transform 300ms ease-in-out;
	transition: transform 300ms ease-in-out;
	position: absolute;
	background: white;
	width: 100%;
	height: 100%;
	left: 0;
}
.menu-icon:before {
	top: -6px;
}
.menu-icon:after {
	bottom: -6px;
}
.slide-toggle,
.slide-toggle:active,
.slide-toggle:focus {
	border: none !important;
	outline: none !important;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

.slide-checkbox {
	position: absolute;
	top: -9999px;
	left: -9999px;
}

.slide-checkbox:checked ~ .slide-toggle .menu-icon:before {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 0;
	display: inline-block;
}

.slide-checkbox:checked ~ .slide-toggle .menu-icon:after {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	top: 0;
	display: inline-block;
}

.slide-checkbox:checked ~ .slide-toggle .menu-icon {
	background-color: transparent;
}

@media handheld, only screen and (max-width: 680px) {

	.slide-toggle {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.slide {
		-webkit-transition: -webkit-transform 500ms ease;
		-moz-transition: -moz-transform 500ms ease;
		-o-transition: -o-transform 500ms ease;
		transition: transform 500ms ease;
	}

	.slide,
	.nav {
		-webkit-transform: translateZ(0);
		-moz-transform: translateZ(0);
		-webkit-perspective: 1000;
		-moz-perspective: 1000;
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
	}

	.slide-checkbox:checked ~ .slide {
		-webkit-transform: translateX(70%) scale(1);
		-moz-transform: translateX(70%) scale(1);
		-ms-transform: translateX(70%) scale(1);
		-o-transform: translateX(70%) scale(1);
		transform: translateX(70%) scale(1);

	}

	.nav {
		height: 100%;
		background: #a25f5e;
		border-radius: 0;

		width: 70%;

		position: absolute;
		left: 0;
		top: 0;

		-webkit-transform: translateX(-100%);
		-moz-transform: translateX(-100%);
		-ms-transform: translateX(-100%);
		-o-transform: translateX(-100%);
		transform: translateX(-100%);
	}

	.nav li {
		float: none;
	}

	.nav li a {
		border-bottom: 1px solid #FFFFFF;
		padding: 12px 12px;
	}

	.nav li:last-child a {
		border-bottom: none;
	}

}