Introducción: En este tutorial, aprenderás cómo crear un sitio web moderno y adaptable utilizando HTML, CSS y JavaScript. Te guiaré paso a paso para implementar un diseño con modo claro/oscuro y un menú adaptable que se transforma en un icono de hamburguesa en dispositivos pequeños.
Paso 1: Preparación del proyecto Antes de comenzar, asegúrate de tener configurado un proyecto básico de HTML y CSS. También necesitarás incluir la biblioteca de Font Awesome en tu proyecto para acceder a los iconos que utilizaremos más adelante.
El HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alternar Modo Claro/Oscuro</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
</head>
<body>
<div class="container">
<h1>Modo Claro/Oscuro</h1>
<button id="toggle-btn">
<i class="fas fa-sun"></i>
<i class="fas fa-moon"></i>
</button>
</div>
</body>
</html>El CSS:
body {
background-color: #f0f0f0; /* Color de fondo predeterminado (modo claro) */
color: #333; /* Color de texto predeterminado (modo claro) */
}
.dark-mode {
background-color: #333; /* Color de fondo para modo oscuro */
color: #f0f0f0; /* Color de texto para modo oscuro */
}Asegúrate de tener los archivos de Font Awesome (CSS y fuentes) incluidos en tu proyecto para que los iconos funcionen correctamente.
Para ello incluye ésta línea antes de </head>:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
Además, este ejemplo solo cambia los colores de fondo y texto, pero podrías ajustarlo para cambiar otros estilos según tus necesidades.
Paso 2: Creación del esqueleto HTML Diseñaremos la estructura básica de nuestra página web, que incluirá un encabezado con un botón para alternar entre el modo claro y oscuro, y un menú de navegación con tres enlaces.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menú con Icono de Hamburguesa</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
</head>
<body>
<nav class="navbar">
<div class="container">
<div class="menu-toggle" id="menu-toggle">
<i class="fas fa-bars"></i>
</div>
<ul class="menu" id="menu">
<li><a href="#">Inicio</a></li>
<li><a href="#">Acerca</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
</nav>
</body>
</html>Paso 3: Estilos CSS Aplicaremos estilos CSS para darle un aspecto atractivo a nuestro sitio web. Configuraremos los colores y las disposiciones para el modo claro y oscuro, así como para el menú de navegación.
.navbar {
background-color: #333;
color: #fff;
padding: 10px 0;
}
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
.menu-toggle {
display: none; /* Por defecto oculto en pantallas grandes */
cursor: pointer;
}
.menu {
list-style: none;
padding: 0;
margin: 0;
}
.menu li {
display: inline-block;
margin-right: 20px;
}
.menu li:last-child {
margin-right: 0;
}
.menu a {
text-decoration: none;
color: inherit;
}
@media screen and (max-width: 768px) {
.menu {
display: none; /* Ocultar menú en pantallas pequeñas por defecto */
}
.menu-toggle {
display: block; /* Mostrar icono de hamburguesa en pantallas pequeñas */
}
.menu.active {
display: block; /* Mostrar menú cuando se hace clic en el icono de hamburguesa */
}
}
Paso 4: Funcionalidad del modo claro/oscuro Agregaremos funcionalidad con JavaScript para permitir que los usuarios cambien entre el modo claro y oscuro con un solo clic. Utilizaremos localStorage para recordar la preferencia del usuario incluso después de recargar la página.
document.addEventListener('DOMContentLoaded', function() {
const toggleBtn = document.getElementById('toggle-btn');
const sunIcon = document.getElementById('sun-icon');
const moonIcon = document.getElementById('moon-icon');
const body = document.body;
const menuToggle = document.getElementById('menu-toggle');
const menu = document.getElementById('menu');
// Verificar si hay una preferencia de modo almacenada en localStorage
const mode = localStorage.getItem('mode');
if (mode === 'dark') {
enableDarkMode();
}
toggleBtn.addEventListener('click', () => {
if (body.classList.contains('dark-mode')) {
disableDarkMode();
} else {
enableDarkMode();
}
});
menuToggle.addEventListener('click', () => {
menu.classList.toggle('active');
});
function enableDarkMode() {
body.classList.add('dark-mode');
sunIcon.style.display = 'none';
moonIcon.style.display = 'inline';
// Almacenar preferencia de modo en localStorage
localStorage.setItem('mode', 'dark');
}
function disableDarkMode() {
body.classList.remove('dark-mode');
sunIcon.style.display = 'inline';
moonIcon.style.display = 'none';
// Eliminar preferencia de modo de localStorage
localStorage.setItem('mode', 'light');
}
});
Conclusión: ¡Felicidades! Has creado con éxito un sitio web moderno con modo claro/oscuro y un menú adaptable. ¡Ahora puedes personalizarlo aún más y desplegarlo para que el mundo lo vea!
0 Comentarios