Unificado Menú Hamburguesa y Pie
Este es un ejemplo de un menú sticky con un fondo gris oscuro en escritorio y transparente en móvil. El contenido principal está centrado y tiene un fondo gris claro.
Estructura HTML (index.html)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menú Hamburguesa</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="logo">
<img src="logo.png" alt="Logo">
</div>>
<nav class="menu">
<div class="hamburger" id="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links" id="nav-links">
<li><a href="#">Inicio</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Productos</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</header>
<script src="script.js"></script>
</body>
</html>
Estilos CSS (styles.css)
/* Estilos generales */
body {
margin: 0;
font-family: Arial, sans-serif;
}
header {
position: sticky;
top: 0;
background-color: #333; /* Fondo gris oscuro casi negro */
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
z-index: 1000;
}
.logo img {
height: 50px;
}
.menu {
display: flex;
align-items: center;
}
.hamburger {
display: none;
flex-direction: column;
cursor: pointer;
}
.hamburger .line {
width: 25px;
height: 3px;
background-color: #fff; /* Color blanco para las líneas del ícono */
margin: 4px 0;
}
.nav-links {
list-style: none;
display: flex;
margin: 0;
padding: 0;
}
.nav-links li {
margin-left: 20px;
}
.nav-links a {
text-decoration: none;
color: #fff; /* Texto blanco para los enlaces */
font-size: 16px;
}
/* Estilos para móviles */
@media (max-width: 768px) {
header {
background-color: transparent; /* Fondo transparente en móvil */
}
.hamburger {
display: flex;
}
.nav-links {
position: absolute;
top: 60px;
right: 0;
background-color: #333; /* Fondo gris oscuro casi negro para el menú desplegado */
flex-direction: column;
width: 100%;
text-align: center;
display: none;
}
.nav-links.active {
display: flex;
}
.nav-links li {
margin: 10px 0;
}
.hamburger .line {
background-color: #333; /* Color gris oscuro para las líneas del ícono en móvil */
}
}
JavaScript (script.js)
document.getElementById('hamburger').addEventListener('click', function() {
var navLinks = document.getElementById('nav-links');
navLinks.classList.toggle('active');
});
Añadimos el Footer a la Estructura HTML (index.html)
<footer>
<div class="footer-links">
<a href="#"><img src="logo1.png" alt="Logo 1"></a>
<a href="#"><img src="logo2.png" alt="Logo 2"></a>
<a href="#"><img src="logo3.png" alt="Logo 3"></a>
</div>
<div class="footer-date">
<p id="current-year"></p>
</div>
</footer>
Añadimos Estilos CSS para el Footer (styles.css)
/* Estilos generales */
body, html {
margin: 0;
padding: 0;
height: 100%;
font-family: Arial, sans-serif;
}
.content {
min-height: 100%;
padding-bottom: 100px; /* Ajusta este valor según la altura de tu footer */
}
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #333;
color: white;
text-align: center;
padding: 10px 0;
box-sizing: border-box;
height: 60px; /* Altura inicial del footer */
overflow: hidden;
transition: height 0.3s ease;
}
footer:hover {
height: 150px; /* Altura cuando se hace hover o se desplaza */
}
.footer-links {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 10px;
}
.footer-links a {
display: inline-block;
}
.footer-links img {
width: 40px;
height: 40px;
}
.footer-date {
font-size: 14px;
}
/* Estilos para móvil */
@media (max-width: 768px) {
.footer-links {
flex-direction: column;
align-items: center;
}
footer {
height: 50px; /* Altura inicial en móvil */
}
footer:hover {
height: 250px; /* Altura cuando se hace hover o se desplaza en móvil */
}
}
Añadimos el JavaScript para el Footer (script.js)
// Obtener el año actual
const currentYear = new Date().getFullYear();
// Mostrar el año en el footer
document.getElementById('current-year').textContent = `© ${currentYear} Mi Página`;
// Expandir/contraer el footer al hacer clic
const footer = document.getElementById('footer');
footer.addEventListener('click', () => {
footer.classList.toggle('expanded');
});