This project is a historical practice focused on mastering responsive navigation systems. It demonstrates the ability to implement a "Mobile-First" navigation that transforms from a slide-out sidebar (off-canvas) to a complex desktop header with interactive dropdown menus.
This project was developed as a solution to the Intro section with dropdown navigation challenge on Frontend Mentor.
⚠️ Note on my trajectory: This repository reflects my exploration of responsive logic beyond simple Media Queries. By using thewindow.onresizeevent and manual DOM manipulation, I learned to synchronize layout states between mobile and desktop environments before adopting modern declarative frameworks.
In this specific phase of my training, I successfully achieved:
-
Hybrid Navigation System: Implementation of an "Off-Canvas" mobile menu and a persistent desktop header, managed through a custom
deleteNone()function that monitors screen width in real-time. -
Synchronized State Transitions: Use of
setTimeoutin JavaScript to coordinate CSS transitions withdisplay: nonelogic, ensuring smooth slide-in and slide-out animations for the mobile overlay. -
Interactive Disclosure Components: Utilization of the semantic
<details>and<summary>HTML tags, enhanced with custom JavaScript to toggle arrow iconography based on theopenattribute state. -
Advanced Responsive Imagery: Dynamic swapping of hero images (
mobilevsdesktop) using CSScontentproperties and Media Queries to optimize visual impact across devices. -
Overlay Layering (Z-Index): Management of complex visual hierarchies, including a semi-transparent background overlay (
.sec1) that dims the main content when the mobile menu is active.
- HTML5: Semantic navigation,
<details>components, and custom SVG icons. - CSS3: Flexbox layout, absolute positioning, and synchronized transitions.
- Vanilla JavaScript: Event listeners (Resize/Click), DOM attribute manipulation, and timing functions.
Coded by Carlos Miguel Puche