<div class="navbar-demo">
<nav class="navbar">
<div class="nav-container">
<div class="nav-logo">
<a href="#" onclick="return false;">Marca</a>
</div>
<ul class="nav-menu" id="navMenu">
<li class="nav-item">
<a href="#" class="nav-link" onclick="return false;">Inicio</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" onclick="return false;">Acerca</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" onclick="return false;">Servicios</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" onclick="return false;">Portafolio</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" onclick="return false;">Contacto</a>
</li>
</ul>
<div class="nav-toggle" id="mobileMenu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</div>
</nav>
<!-- Contenido de demostración -->
<div class="demo-content">
<h2>Demo de Navegación Responsiva</h2>
<p>Cambia el tamaño de tu ventana del navegador para ver el menú hamburguesa móvil en acción.</p>
<p>La barra de navegación está fija en la parte superior y permanecerá visible al hacer scroll.</p>
</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.navbar {
background-color: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
height: 60px;
}
.nav-logo a {
font-size: 1.5rem;
font-weight: bold;
color: #333;
text-decoration: none;
}
.nav-menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.nav-item {
margin-left: 2rem;
}
.nav-link {
color: #333;
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
position: relative;
}
.nav-link:hover {
color: #007bff;
}
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -5px;
left: 0;
background-color: #007bff;
transition: width 0.3s ease;
}
.nav-link:hover::after {
width: 100%;
}
.nav-toggle {
display: none;
flex-direction: column;
cursor: pointer;
}
.bar {
width: 25px;
height: 3px;
background-color: #333;
margin: 3px 0;
transition: 0.3s;
}
@media screen and (max-width: 768px) {
.nav-menu {
position: fixed;
left: -100%;
top: 60px;
flex-direction: column;
background-color: white;
width: 100%;
text-align: center;
transition: 0.3s;
box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
padding: 2rem 0;
}
.nav-menu.active {
left: 0;
}
.nav-item {
margin: 1rem 0;
}
.nav-toggle {
display: flex;
}
.nav-toggle.active .bar:nth-child(2) {
opacity: 0;
}
.nav-toggle.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.nav-toggle.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
}
document.addEventListener('DOMContentLoaded', function() {
const mobileMenu = document.getElementById('mobile-menu');
const navMenu = document.querySelector('.nav-menu');
mobileMenu.addEventListener('click', function() {
mobileMenu.classList.toggle('active');
navMenu.classList.toggle('active');
});
// Cerrar menú móvil al hacer clic en un enlace
document.querySelectorAll('.nav-link').forEach(link => {
link.addEventListener('click', () => {
mobileMenu.classList.remove('active');
navMenu.classList.remove('active');
});
});
// Cerrar menú móvil al hacer clic fuera
document.addEventListener('click', function(event) {
const isClickInsideNav = navMenu.contains(event.target) || mobileMenu.contains(event.target);
if (!isClickInsideNav && navMenu.classList.contains('active')) {
mobileMenu.classList.remove('active');
navMenu.classList.remove('active');
}
});
});