[NIVEL 3] Issue #54 - Navbar Underline Animado Turquesa
Implementación de underline animado en navbar según diseño RDash. **Cambios en header.css:** - Agregado position: relative a .primary-menu a - Implementado ::after pseudo-element con gradiente turquesa - Animation scaleX(0) → scaleX(1) en hover - Underline permanente en links activos (.current-menu-item) - Soporte prefers-reduced-motion **Características:** ✅ Gradiente: #61c7cd → #4db8c4 (CSS variables) ✅ Width: 80%, height: 2px ✅ Transición: 0.3s ease (CSS variable --transition-base) ✅ Transform origin: center ✅ Active links: underline permanente ✅ Accessibility: reduced motion support Closes #54 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -135,6 +135,7 @@
|
|||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
transition: background-color 0.3s ease, color 0.3s ease;
|
transition: background-color 0.3s ease, color 0.3s ease;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.primary-menu a:hover,
|
.primary-menu a:hover,
|
||||||
@@ -149,6 +150,24 @@
|
|||||||
outline-offset: 2px;
|
outline-offset: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Underline animation - Issue #54 */
|
||||||
|
.primary-menu a::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%) scaleX(0);
|
||||||
|
width: 80%;
|
||||||
|
height: 2px;
|
||||||
|
background: linear-gradient(90deg, var(--color-cyan-primary, #61c7cd) 0%, var(--color-cyan-dark, #4db8c4) 100%);
|
||||||
|
transition: transform var(--transition-base, 0.3s ease);
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary-menu a:hover::after {
|
||||||
|
transform: translateX(-50%) scaleX(1);
|
||||||
|
}
|
||||||
|
|
||||||
/* Current menu item */
|
/* Current menu item */
|
||||||
.primary-menu .current-menu-item > a,
|
.primary-menu .current-menu-item > a,
|
||||||
.primary-menu .current_page_item > a {
|
.primary-menu .current_page_item > a {
|
||||||
@@ -156,6 +175,12 @@
|
|||||||
background-color: rgba(0, 123, 255, 0.1);
|
background-color: rgba(0, 123, 255, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Active link permanent underline */
|
||||||
|
.primary-menu .current-menu-item > a::after,
|
||||||
|
.primary-menu .current_page_item > a::after {
|
||||||
|
transform: translateX(-50%) scaleX(1);
|
||||||
|
}
|
||||||
|
|
||||||
/* Submenu styles (if needed) */
|
/* Submenu styles (if needed) */
|
||||||
.primary-menu .sub-menu {
|
.primary-menu .sub-menu {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -471,6 +496,7 @@ body.mobile-menu-open {
|
|||||||
@media (prefers-reduced-motion: reduce) {
|
@media (prefers-reduced-motion: reduce) {
|
||||||
.site-header,
|
.site-header,
|
||||||
.primary-menu a,
|
.primary-menu a,
|
||||||
|
.primary-menu a::after,
|
||||||
.mobile-menu,
|
.mobile-menu,
|
||||||
.mobile-menu-overlay,
|
.mobile-menu-overlay,
|
||||||
.hamburger-icon .line,
|
.hamburger-icon .line,
|
||||||
|
|||||||
Reference in New Issue
Block a user