Skip to content

Commit 8bfe894

Browse files
t0tclaude
t0t
and
claude
committed
Implementar menú hamburguesa responsive profesional
• Añadir botón hamburguesa con animación X • Menú móvil tipo overlay con backdrop blur • Navegación accesible con ARIA y focus trap • Animaciones escalonadas para filtros • Responsive optimizado para múltiples breakpoints • Soporte para landscape y pantallas pequeñas • JavaScript robusto con cleanup y event delegation 🔖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 3bd27bc commit 8bfe894

5 files changed

Lines changed: 686 additions & 34 deletions

File tree

‎proyectos/referencias-diseno/assets/css/style.css‎

Lines changed: 230 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -583,85 +583,205 @@ body {
583583
color: var(--color-text-light);
584584
}
585585

586+
/* Menú móvil hamburguesa */
587+
.mobile-menu-toggle {
588+
display: none;
589+
flex-direction: column;
590+
justify-content: space-around;
591+
width: 28px;
592+
height: 28px;
593+
background: transparent;
594+
border: none;
595+
cursor: pointer;
596+
padding: 4px;
597+
z-index: 1001;
598+
transition: all 0.3s ease;
599+
}
600+
601+
.hamburger-line {
602+
width: 100%;
603+
height: 2px;
604+
background: var(--color-primary);
605+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
606+
border-radius: 2px;
607+
transform-origin: center;
608+
}
609+
610+
.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
611+
transform: rotate(45deg) translateY(8px);
612+
}
613+
614+
.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
615+
opacity: 0;
616+
transform: scaleX(0);
617+
}
618+
619+
.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
620+
transform: rotate(-45deg) translateY(-8px);
621+
}
622+
623+
/* Overlay para móvil */
624+
.mobile-menu-overlay {
625+
position: fixed;
626+
top: 0;
627+
left: 0;
628+
right: 0;
629+
bottom: 0;
630+
background: rgba(0, 0, 0, 0.5);
631+
z-index: 999;
632+
opacity: 0;
633+
visibility: hidden;
634+
transition: all 0.3s ease;
635+
backdrop-filter: blur(4px);
636+
}
637+
638+
.mobile-menu-overlay.active {
639+
opacity: 1;
640+
visibility: visible;
641+
}
642+
586643
/* Responsive refinado */
587644
@media (max-width: 768px) {
588645
/* Header responsive */
589646
.header {
590647
padding: var(--space-sm) 0;
591-
max-height: 90px;
648+
max-height: none;
649+
min-height: 80px;
592650
}
593651

594652
.header.scrolled {
595653
padding: var(--space-xs) 0;
596-
max-height: 70px;
654+
min-height: 70px;
597655
}
598656

599657
body {
600-
padding-top: 90px;
658+
padding-top: 80px;
601659
}
602660

603661
.header-content {
604662
padding: 0 var(--space-md);
605663
}
606664

607665
.main {
608-
padding: var(--space-lg) var(--space-lg);
666+
padding: var(--space-md) var(--space-md);
609667
}
610668

611669
.header-main {
612-
flex-direction: column;
613-
align-items: stretch;
614-
gap: var(--space-sm);
670+
flex-direction: row;
671+
align-items: center;
672+
justify-content: space-between;
673+
gap: var(--space-md);
674+
}
675+
676+
.header-brand {
677+
flex: 1;
615678
}
616679

617680
.header-nav {
618-
justify-content: space-between;
681+
position: relative;
682+
flex-shrink: 0;
619683
}
620684

621-
.nav-filters {
622-
flex-wrap: wrap;
623-
gap: var(--space-xs);
685+
.mobile-menu-toggle {
686+
display: flex;
624687
}
625688

626-
.favorites-count {
627-
margin-left: 0;
628-
margin-top: var(--space-xs);
689+
.nav-filters {
690+
position: fixed;
691+
top: 80px;
692+
left: 0;
693+
right: 0;
694+
background: rgba(255, 255, 255, 0.98);
695+
backdrop-filter: blur(20px);
696+
border-bottom: 1px solid var(--color-border);
697+
padding: var(--space-lg);
698+
flex-direction: column;
699+
gap: var(--space-md);
700+
transform: translateY(-100%);
701+
opacity: 0;
702+
visibility: hidden;
703+
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
704+
z-index: 1000;
705+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
706+
max-height: calc(100vh - 80px);
707+
overflow-y: auto;
629708
}
630709

631-
.header-title {
632-
font-size: var(--font-size-lg);
710+
.nav-filters.active {
711+
transform: translateY(0);
712+
opacity: 1;
713+
visibility: visible;
633714
}
634715

635-
.header.scrolled .header-title {
716+
.nav-filter {
717+
padding: var(--space-sm) var(--space-md);
718+
border-radius: var(--border-radius-lg);
636719
font-size: var(--font-size-base);
720+
font-weight: 500;
721+
text-align: center;
722+
background: var(--color-surface-alt);
723+
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
724+
transform: translateY(20px);
725+
opacity: 0;
726+
visibility: hidden;
637727
}
638728

639-
.header-subtitle {
640-
font-size: var(--font-size-xs);
729+
.nav-filters.active .nav-filter {
730+
transform: translateY(0);
731+
opacity: 1;
732+
visibility: visible;
641733
}
642734

643-
.nav {
644-
margin-top: var(--space-xs);
735+
.nav-filter:nth-child(1) { transition-delay: 0.1s; }
736+
.nav-filter:nth-child(2) { transition-delay: 0.15s; }
737+
.nav-filter:nth-child(3) { transition-delay: 0.2s; }
738+
.nav-filter:nth-child(4) { transition-delay: 0.25s; }
739+
.nav-filter:nth-child(5) { transition-delay: 0.3s; }
740+
.nav-filter:nth-child(6) { transition-delay: 0.35s; }
741+
742+
.nav-filter.active {
743+
background: var(--color-primary);
744+
color: white;
745+
transform: scale(1.02);
645746
}
646747

647-
.nav-filters {
648-
gap: var(--space-xs);
649-
justify-content: flex-start;
650-
overflow-x: auto;
651-
padding-bottom: var(--space-xs);
652-
scrollbar-width: none;
653-
-ms-overflow-style: none;
748+
.favorites-count {
749+
margin: var(--space-lg) 0 0 0;
750+
padding: var(--space-md);
751+
text-align: center;
752+
background: linear-gradient(135deg, var(--color-accent-light), var(--color-surface-alt));
753+
border-radius: var(--border-radius-lg);
754+
border: 1px solid var(--color-accent-medium);
755+
font-weight: 600;
756+
transform: translateY(20px);
757+
opacity: 0;
758+
visibility: hidden;
759+
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
760+
transition-delay: 0.4s;
761+
}
762+
763+
.nav-filters.active .favorites-count {
764+
transform: translateY(0);
765+
opacity: 1;
766+
visibility: visible;
654767
}
655768

656-
.nav-filters::-webkit-scrollbar {
769+
.header-title {
770+
font-size: var(--font-size-xl);
771+
line-height: 1.2;
772+
}
773+
774+
.header.scrolled .header-title {
775+
font-size: var(--font-size-lg);
776+
}
777+
778+
.header-subtitle {
779+
font-size: var(--font-size-sm);
657780
display: none;
658781
}
659782

660-
.nav-filter {
661-
flex-shrink: 0;
662-
font-size: 11px;
663-
padding: 4px 8px;
664-
border-radius: 12px;
783+
.header.scrolled .header-subtitle {
784+
display: none;
665785
}
666786

667787
.references-grid {
@@ -726,6 +846,82 @@ body {
726846
}
727847
}
728848

849+
/* Responsive intermedio para tablets */
850+
@media (min-width: 769px) and (max-width: 1024px) {
851+
.header-content {
852+
padding: 0 var(--space-lg);
853+
}
854+
855+
.main {
856+
padding: var(--space-lg) var(--space-lg);
857+
}
858+
859+
.nav-filters {
860+
gap: var(--space-sm);
861+
flex-wrap: wrap;
862+
justify-content: center;
863+
}
864+
865+
.nav-filter {
866+
font-size: var(--font-size-sm);
867+
padding: var(--space-xs) var(--space-sm);
868+
}
869+
870+
.references-grid {
871+
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
872+
gap: var(--space-lg);
873+
}
874+
}
875+
876+
/* Mejoras para pantallas muy pequeñas */
877+
@media (max-width: 320px) {
878+
.header-content {
879+
padding: 0 var(--space-sm);
880+
}
881+
882+
.main {
883+
padding: var(--space-sm) var(--space-sm);
884+
}
885+
886+
.header-title {
887+
font-size: var(--font-size-lg);
888+
}
889+
890+
.mobile-menu-toggle {
891+
width: 24px;
892+
height: 24px;
893+
}
894+
895+
.nav-filters {
896+
padding: var(--space-md);
897+
}
898+
899+
.nav-filter {
900+
padding: var(--space-sm);
901+
font-size: var(--font-size-sm);
902+
}
903+
}
904+
905+
/* Mejoras para landscape en móviles */
906+
@media (max-width: 768px) and (orientation: landscape) {
907+
.header {
908+
min-height: 60px;
909+
}
910+
911+
body {
912+
padding-top: 60px;
913+
}
914+
915+
.nav-filters {
916+
top: 60px;
917+
padding: var(--space-md);
918+
}
919+
920+
.nav-filter {
921+
padding: var(--space-xs) var(--space-md);
922+
}
923+
}
924+
729925
/* Estados de loading elegantes */
730926
.loading {
731927
text-align: center;

0 commit comments

Comments
 (0)