<nav class="modern-nav">
<div class="nav-container">
<div class="nav-brand">
<a href="#" class="brand-link">Logo</a>
</div>
<button class="nav-toggle" id="navToggle">
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
</button>
<div class="nav-menu" id="navMenu">
<ul class="nav-list">
<li class="nav-item">
<a href="#" class="nav-link">Inicio</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle">Servicios</a>
<ul class="dropdown-menu">
<li><a href="#" class="dropdown-link">Desarrollo Web</a></li>
<li><a href="#" class="dropdown-link">Diseño UI/UX</a></li>
<li><a href="#" class="dropdown-link">Marketing Digital</a></li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Portafolio</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Blog</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contacto</a>
</li>
</ul>
</div>
</div>
</nav>
.modern-nav {
background: #fff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
transition: all 0.3s ease;
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
display: flex;
align-items: center;
justify-content: space-between;
height: 70px;
}
.nav-brand .brand-link {
font-size: 1.5rem;
font-weight: bold;
color: #333;
text-decoration: none;
transition: color 0.3s ease;
}
.nav-brand .brand-link:hover {
color: #3b82f6;
}
.nav-toggle {
display: none;
flex-direction: column;
background: none;
border: none;
cursor: pointer;
padding: 0.5rem;
}
.hamburger-line {
width: 25px;
height: 3px;
background: #333;
margin: 3px 0;
transition: all 0.3s ease;
border-radius: 2px;
}
.nav-toggle.active .hamburger-line:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.nav-toggle.active .hamburger-line:nth-child(2) {
opacity: 0;
}
.nav-toggle.active .hamburger-line:nth-child(3) {
transform: rotate(-45deg) translate(7px, -6px);
}
.nav-menu {
display: flex;
}
.nav-list {
display: flex;
list-style: none;
margin: 0;
padding: 0;
align-items: center;
}
.nav-item {
position: relative;
margin: 0 1rem;
}
.nav-link {
color: #333;
text-decoration: none;
font-weight: 500;
padding: 0.5rem 0;
transition: color 0.3s ease;
display: block;
}
.nav-link:hover {
color: #3b82f6;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
background: #fff;
min-width: 200px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
border-radius: 8px;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
list-style: none;
padding: 0.5rem 0;
margin: 0;
}
.dropdown:hover .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-link {
display: block;
padding: 0.75rem 1rem;
color: #333;
text-decoration: none;
transition: background 0.2s ease;
}
.dropdown-link:hover {
background: #f8fafc;
color: #3b82f6;
}
/* Responsive Design */
@media (max-width: 768px) {
.nav-toggle {
display: flex;
}
.nav-menu {
position: fixed;
top: 70px;
left: 0;
right: 0;
background: #fff;
flex-direction: column;
padding: 1rem 0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transform: translateY(-100%);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.nav-menu.active {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
.nav-list {
flex-direction: column;
width: 100%;
}
.nav-item {
margin: 0;
width: 100%;
}
.nav-link {
padding: 1rem;
border-bottom: 1px solid #f1f5f9;
}
.dropdown-menu {
position: static;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
background: #f8fafc;
margin-left: 1rem;
}
}