Barre latérale

2,917 ledoc

Ouvrir dans l'éditeur Publiez votre code

Recommandé

17 December 2025

Barre de navigation inférieure avec icônes et CSS Tailwind

12 July 2025

Compteur de clics avec la barre d'espace - JavaScript HTML

17 November 2024

Barre de menu horizontale

HTML

<!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;
}