ikona23
7/27/2017 - 10:42 AM

Responsive side menu

Responsive side menu

index.html
content_copyfile_download
<body>
<nav class="navbar">
	<span class="open-slide" id="ham" onclick="openSlideMenu()" >
		<a href="#">
			<svg width="30" height="30">
				<path d="M0,5 30,5" stroke="#fff" stroke-width="5" />
				<path d="M0,14 30,14" stroke="#fff" stroke-width="5" />
				<path d="M0,23 30,23" stroke="#fff" stroke-width="5" />
			</svg>
		</a>
	</span>
	
	<div id="mainMenu">
	<ul class="navbar-nav">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Contact</a></li>	
	</ul>
		</div>

	</nav>

	<div id="side-menu" class="side-nav">
		<a href="#" class="btn-close" onclick="closeSlideMenu()">&times;</a>
		<a href="#">Home</a>
		<a href="#">About</a>
		<a href="#">Contact</a>
		<a href="#">Side bar</a>
	</div>
	
	<hr>
	<div id="main">
		<h1> Responsive Side Menu </h1>
	</div>
	<hr>
</body>
responsive-side-menu.markdown
content_copyfile_download
  • Rendered
  • Source

Responsive side menu

A Pen by Peter Kona on CodePen.

License.

script.js
content_copyfile_download
function openSlideMenu(){
	document.getElementById('side-menu').style.width = '250px';
	document.getElementById('main').style.marginLeft = '250px';	document.getElementById('ham').style.visibility = "hidden";
} 

function closeSlideMenu(){
	document.getElementById('side-menu').style.width = '0';
document.getElementById('ham').style.visibility = "visible";
	document.getElementById('main').style.marginLeft = '-50px'
}
style.css
content_copyfile_download
body {
	font-family:"Lato";
	background-color:smokewhite;
}
.navbar {
	background:#EB744C;
	color:black;
  overflow:hidden;
	height:63px;
}
.navbar a {
	float:left;
	display:block;
	color:white;
	text-align:center;
	font-size:20px;
	padding:14px 26px;
	text-decoration:none;
}
.navbar ul {
	margin:3px 0 0 0;
	list-style:none;
}

.navbar a:hover {
	background-color:#ddd;
	color:#000;
}

.side-nav {
	height:100%;
	width:0;
	z-index:1;
	position:fixed;
	top:0;
	left:0;
	background-color:#111;
	opacity:0.9;
	overflow-x:hidden;
	padding-top:60px;
	transition:0.5s;
}

.side-nav a {
	padding:10px 10px 10px 30px;
	text-decoration:none;
	font-size:22px;
	color:white;
	display:block;
}

.side-nav a:hover {
	font-size:35px;
}

.side-nav .btn-close {
	position:absolute;
	top:0;
	right:22px;
	font-size:36px;
	margin-left:50px;
}

#main {
	transition:margin-left 0.5s;
	padding:20px;
	overflow: hidden;
	width:100%;
	margin:60px 0 0 0;
	text-align:center;
}

@media(max-width:568px){
	.navbar-nav{display:none}
}

@media(max-width:568px){
	.navbar-slide{display:none}
}