PHP FACIL WEB: Diseño responsive HTML 5 y css3

Este tutorial proporciona una guía completa para crear un diseño web responsive con un menú lateral interactivo.

Paso 1: Estructura Básica del HTML

Primero, vamos a crear la estructura básica del HTML.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Diseño Responsive Mejorado</title>
<link rel="stylesheet" href="styles.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>

<body>
<div class="container">


<header class="header">
<button class="menu-toggle" aria-label="Abrir menú">
<i class="fa fa-bars"></i>
</button>
<h1>Mi Sitio Web</h1>
</header>


<main class="main-content">


<aside class="sidebar">
<button class="close-btn" aria-label="Cerrar menú">
<i class="fa fa-times"></i>
</button>

<ul>
<li><a href="#"><i class="fa fa-home"></i> Inicio</a></li>
<li><a href="#"><i class="fa fa-user"></i> Acerca de</a></li>
<li><a href="#"><i class="fa fa-cogs"></i> Servicios</a></li>
<li><a href="#"><i class="fa fa-envelope"></i> Contacto</a></li>
</ul>

</aside>


<div class="content">
<h2>Contenido Principal</h2>
<p>Aquí va el contenido de la página.</p>
</div>

</main>


<footer class="footer">
<p>© 2024 Mi Sitio Web</p>
</footer>
</div>
<script src="script.js"></script>
</body>
</html>

CSS (styles.css)

Aquí está el CSS actualizado para que el menú esté siempre visible en pantallas grandes y colapsable en pantallas pequeñas:

/* Reset de estilos básicos */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
}

.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}

/* Header */
.header {
background: #007bff;
color: #fff;
padding: 15px;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
}

/* Título del header */
.header h1 {
font-size: 24px;
}

/* Botón de menú para pantallas pequeñas */
.menu-toggle {
background: none;
border: none;
color: #fff;
font-size: 24px;
cursor: pointer;
display: none;
}

/* Main content area */
.main-content {
display: flex;
flex: 1;
}

/* Sidebar */
.sidebar {
background: #343a40;
color: #fff;
width: 250px;
padding: 15px;
position: fixed;
top: 0;
left: 0;
height: 100%;
overflow-y: auto;
transition: transform 0.3s ease;
z-index: 1000; /* Asegura que el menú esté por encima del contenido */
}

/* Botón de cerrar menú */
.close-btn {
background: none;
border: none;
color: #fff;
font-size: 24px;
cursor: pointer;
margin-bottom: 20px;
}

/* Lista de menú */
.sidebar ul {
list-style: none;
}

.sidebar ul li {
margin-bottom: 15px;
}

.sidebar ul li a {
color: #fff;
text-decoration: none;
display: flex;
align-items: center;
gap: 10px;
}

.sidebar ul li a:hover {
background: #495057;
border-radius: 4px;
padding: 10px;
}

/* Mostrar contenido desplazado por el sidebar */
.content {
flex: 1;
padding: 15px;
margin-left: 250px; /* Desplazamiento por el ancho del sidebar */
background: #fff;
}

/* Footer */
.footer {
background: #007bff;
color: #fff;
text-align: center;
padding: 15px;
}

/* Responsive Design */

@media (max-width: 768px) {
/* Ocultar el contenido del sidebar en pantallas pequeñas */
.sidebar {
transform: translateX(-250px); /* Inicialmente oculto */
width: 200px;
}

/* Mostrar el botón de menú en pantallas pequeñas */
.menu-toggle {
display: block;
}

/* Mostrar el contenido en pantallas pequeñas */
.main-content {
flex-direction: column;
}

/* Mover el contenido al lado del sidebar */
.content {
margin-left: 0;
}

/* Mostrar el sidebar cuando se activa el botón de menú */
.sidebar.open {
transform: translateX(0);
}

/* Botón de cerrar menú */
.close-btn {
display: block;
}
}

@media (max-width: 480px) {
.header h1 {
font-size: 20px;
}

.sidebar ul li {
margin-bottom: 10px;
}

.content {
padding: 10px;
}

.footer {
font-size: 14px;
padding: 10px;
}
}

JavaScript (script.js)

Aquí está el JavaScript para manejar el menú responsive:

document.addEventListener('DOMContentLoaded', () => {
const menuToggle = document.querySelector('.menu-toggle');
const sidebar = document.querySelector('.sidebar');
const closeBtn = document.querySelector('.close-btn');
// Mostrar el menú cuando se haga clic en el botón de menú
menuToggle.addEventListener('click', () => {
sidebar.classList.add('open');
});
// Ocultar el menú cuando se haga clic en el botón de cerrar
closeBtn.addEventListener('click', () => {
sidebar.classList.remove('open');
});
// Ocultar el menú al hacer clic fuera de él
document.addEventListener('click', (event) => {
if (!sidebar.contains(event.target) && !menuToggle.contains(event.target) && sidebar.classList.contains('open')) {
sidebar.classList.remove('open');
}
});
});

Explicación Paso a Paso

Estructura HTML:

<!DOCTYPE html>: Define el tipo de documento.

<html lang="es">: Inicia el documento HTML y define el idioma.

<head>: Contiene meta información sobre el documento.

<body>: Contiene el contenido visible de la página.

<header>: Encabezado de la página con un botón para abrir/cerrar el menú y el título del sitio.

<main>: Contenedor principal que incluye el sidebar y el área de contenido.

<aside>: Menú lateral con enlaces de navegación.

<footer>: Pie de página con un mensaje de copyright.

Estilos CSS:

*: Aplica un reset básico de estilos a todos los elementos.

body: Define los estilos generales del cuerpo del documento.

.container: Contenedor principal que abarca toda la página.

.header: Estilos del encabezado, incluyendo el botón de menú para pantallas pequeñas.

.menu-toggle: Estilos para el botón de menú que aparece en pantallas pequeñas.

.main-content: Define el contenedor principal para el sidebar y el contenido.

.sidebar: Estilos del menú lateral, incluyendo su comportamiento en pantallas pequeñas.

.content: Estilos para el área de contenido principal.

.footer: Estilos del pie de página.

@media (max-width: 768px): Define estilos específicos para pantallas con un ancho máximo de 768px.

@media (max-width: 480px): Define estilos específicos para pantallas con un ancho máximo de 480px.

Interactividad JavaScript:

document.addEventListener('DOMContentLoaded', ...): Asegura que el código se ejecute una vez que el DOM esté completamente cargado.

menuToggle.addEventListener('click', ...): Añade un evento al botón de menú para alternar la clase open en el sidebar.

document.addEventListener('click', ...): Cierra el menú si se hace clic fuera de él.

Cómo Probar el Diseño

Preparar los Archivos:

Crea un archivo index.html y copia el código HTML proporcionado.

Crea un archivo styles.css y copia el código CSS proporcionado.

Crea un archivo script.js y copia el código JavaScript proporcionado.

Abrir el Archivo HTML:

Abre el archivo index.html en un navegador web para ver el diseño.

Probar la Responsividad:

Redimensiona la ventana del navegador para ver cómo el diseño se adapta a diferentes tamaños de pantalla.

Prueba el botón de menú en pantallas pequeñas para asegurarte de que el menú lateral se abre y cierra correctamente.

Translate

Inicio

martes, 16 de julio de 2024

Diseño responsive HTML 5 y css3

No hay comentarios.:

Publicar un comentario

Visitas de la última semana a la página