साइड बार

अनुशंसित

16 November 2024

<!DOCTYPE html>
<html>
<head>
	<title>Toggle Sidebar Navigation html css javascript</title>
	<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;0,900;1,700&display=swap" rel="stylesheet">
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="sideMenu" id="side-menu">
		<a class="closebtn" href="javascript:void(0)" onclick="closeNav()">×</a>
		<div class="main-menu">
			<h2>SideMenu</h2><a href="#"><i class="fa fa-home"></i>Home</a> <a href="#"><i class="fa fa-users"></i>About</a> <a href="#"><i class="fa fa-book"></i>Portfolio</a> <a href="#"><i class="fa fa-file-o"></i>Services</a> <a href="#"><i class="fa fa-phone"></i>Contact</a>
		</div>
	</div>
	<div id="content-area">
		<span onclick="openNav()" style="font-size:30px;cursor:pointer">☰ TOGGLEMENU</span>
		<div class="content-text">
			<h2>Toggle Sidebar Navigation</h2>
			<h3>html css javascript</h3>
		</div>
	</div>
	<script>
	function openNav() {
	 document.getElementById("side-menu").style.width = "300px";
	 document.getElementById("content-area").style.marginLeft = "300px"; 
	}

function closeNav() {
	 document.getElementById("side-menu").style.width = "0";
	 document.getElementById("content-area").style.marginLeft= "0";  
	}
	</script>
</body>
</html>

CSS

body {
	margin: 0;
	font-family: 'Poppins', sans-serif;
}
.sideMenu {
	height: 100%;
	width: 0;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	background: darksalmon;
	overflow-x: hidden;
	transition: 0.5s;
	padding-top: 60px;
}
.main-menu h2 {
	text-align: center;
	letter-spacing: 7px;
	color: #fff;
	background: #111;
	padding: 20px 0;
}
.sideMenu a {
	padding: 8px 8px 8px 32px;
	text-decoration: none;
	color: #fff;
	display: block;
	transition: 0.3s;
	font-size: 18px;
	margin-bottom: 20px;
	text-transform: uppercase;
	font-weight: 900;
}
.sideMenu a i {
	padding-right: 15px;
}
.main-menu a:hover {
	color: #f1f1f1;
	background: #111;
}
.sideMenu .closebtn {
	position: absolute;
	top: 0;
	right: 25px;
	font-size: 36px;
	margin-left: 50px;
}
#content-area {
	transition: margin-left .5s;
	padding: 16px;
}
.content-text {
	padding: 100px 180px;
	text-align: center;
}
.content-text h2 {
	background: darksalmon;
	display: inline-block;
	padding: 15px 35px;
	text-transform: uppercase;
	font-size: 50px;
	color: #fff;
}
.content-text h3 {
	text-transform: uppercase;
	font-size: 45px;
	margin: 0;
	letter-spacing: 3px;
}

साइड बार

अनुशंसित

साइडबार टॉगल

HTML CSS नेवबार कोड

प्रीमियम रिस्पॉन्सिव नेवबार

HTML

CSS

JS

अनुशंसित

साइडबार टॉगल

HTML CSS नेवबार कोड

प्रीमियम रिस्पॉन्सिव नेवबार

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS