Intro Section with Dropdown Navigation

A responsive landing page featuring an interactive dropdown navigation menu, built as a solution to the Intro section with dropdown navigation challenge on Frontend Mentor.

Table of Contents

• Overview
  • The Challenge
  • Screenshots
  • Links
• My Process
  • Built With
  • Project Structure
  • What I Learned
• Getting Started
• Author
• Acknowledgments

Overview

The Challenge

Users should be able to:

• View the relevant dropdown menus on desktop and mobile when interacting with the navigation links
• View the optimal layout for the content depending on their device's screen size
• See hover states for all interactive elements on the page

Screenshots

Desktop (1440px)

Mobile (375px)

Links

• Solution URL: Frontend Mentor Solution
• Live Site URL: Live Site

My Process

Built With

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Responsive design with three breakpoints (mobile, tablet, desktop)
• Vanilla JavaScript
• Vite - Build tool and dev server
• Google Fonts - Epilogue font family (500, 700)

Project Structure

src/
├── assets/        # Images, icons, and SVG logos
├── css/
│   └── styles.css # All styles with CSS custom properties
├── js/
│   └── main.js    # Dropdown toggles and mobile menu logic
└── index.html     # Semantic HTML entry point

What I Learned

Responsive navigation patterns — This project required implementing two distinct navigation paradigms: a horizontal dropdown nav for desktop and a slide-in sidebar for mobile. The key challenge was sharing the same HTML structure across both layouts while switching behavior entirely through CSS media queries and minimal JavaScript.

CSS-driven dropdown menus with ARIA — The dropdowns use aria-expanded attributes as CSS selectors to show/hide content, keeping the JavaScript minimal. The adjacent sibling combinator (+) connects the button state to the dropdown visibility:

.nav__link--dropdown[aria-expanded="true"] + .dropdown {
  display: flex;
}

Mobile menu with overlay and scroll lock — The mobile sidebar uses position: fixed with a transform: translateX(100%) off-screen pattern, combined with a semi-transparent overlay. Adding overflow: hidden to the body prevents background scrolling while the menu is open.

<picture> element for art direction — Used the <picture> element with a <source> tag to serve different hero images for mobile and desktop, rather than hiding/showing two <img> elements with CSS:

<picture>
  <source media="(min-width: 768px)" srcset="./assets/image-hero-desktop.png" />
  <img src="./assets/image-hero-mobile.png" alt="Person working remotely on a laptop" />
</picture>

CSS custom properties for theming — All colors, font weights, and spacing values are defined as CSS custom properties in :root, making the design system easy to adjust or theme:

:root {
  --color-gray-50: hsl(0, 0%, 98%);
  --color-gray-500: hsl(0, 0%, 41%);
  --color-gray-950: hsl(0, 0%, 8%);
  --font-family: "Epilogue", sans-serif;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
}

Keyboard accessibility — The Escape key closes both the mobile menu and any open dropdowns. Clicking outside a dropdown also dismisses it, matching user expectations for this type of UI pattern.

Useful Resources

• MDN: ARIA aria-expanded - Reference for accessible dropdown patterns
• MDN: <picture> element - Art direction with responsive images
• Vite Documentation - Project setup and configuration

Getting Started

Prerequisites

• Node.js >= 18

Installation

# Clone the repository
git clone https://github.com/gusanchefullstack/fsdev-intro-section-with-dropdown-navigation.git

# Navigate to the project directory
cd fsdev-intro-section-with-dropdown-navigation

# Install dependencies
npm install

# Start the development server
npm run dev

The site will be available at http://localhost:5173.

Build for Production

npm run build
npm run preview  # Preview the production build locally

Author

Gustavo Sanchez — Full Stack Developer

Acknowledgments

• Challenge design by Frontend Mentor
• Epilogue font by Tyler Finck