Barra lateral

2,789 ledoc

Abrir en el editor Publica tu código

Recomendado

16 November 2024

Cómo crear una barra lateral de cuadrícula en CSS

19 May 2025

menú de la barra de navegación

30 January 2026

Ejemplo de barra de navegación adaptable con CSS puro

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