Scribd
Cargar
10 vistas2 páginas

Menu Lateral en HTML y CSS

El documento presenta un código HTML y CSS para crear un menú lateral izquierdo en una página web. El menú incluye enlaces a diferentes secciones como Inicio, Servicios, Productos, Contacto y Acerca de, con estilos básicos para la apariencia y la interacción. Además, se define un área de contenido principal que se ajusta al lado derecho del menú.

Cargado por

Arturo Castro
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
10 vistas2 páginas

Menu Lateral en HTML y CSS

El documento presenta un código HTML y CSS para crear un menú lateral izquierdo en una página web. El menú incluye enlaces a diferentes secciones como Inicio, Servicios, Productos, Contacto y Acerca de, con estilos básicos para la apariencia y la interacción. Además, se define un área de contenido principal que se ajusta al lado derecho del menú.

Cargado por

Arturo Castro
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 2

MENU LATERAL EN HTML Y CSS

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menú Lateral Izquierdo</title>
<style>
/* Estilos básicos para el menú */
body {
margin: 0;
font-family: Arial, sans-serif;
}

.menu-izquierdo {
position: fixed;
left: 0;
top: 0;
width: 200px;
height: 100vh;
background-color: #333;
padding-top: 20px;
}

.menu-izquierdo a {
display: block;
color: white;
padding: 15px 20px;
text-decoration: none;
transition: background-color 0.3s;
}

.menu-izquierdo a:hover {
background-color: #555;
}

.menu-izquierdo a.active {
background-color: #007bff;
}

/* Contenido principal */
.contenido {
margin-left: 220px; /* Ancho del menú + 20px de espacio */
padding: 20px;
}
</style>
</head>
<body>
<!-- Menú lateral izquierdo -->
<nav class="menu-izquierdo">
<a href="#" class="active">Inicio</a>
<a href="#">Servicios</a>
<a href="#">Productos</a>
<a href="#">Contacto</a>
<a href="#">Acerca de</a>
</nav>

<!-- Contenido principal -->


<div class="contenido">
<h1>Bienvenido</h1>
<p>Este es el contenido principal de la página.</p>
</div>
</body>
</html>

También podría gustarte