Frontend Mentor - Intro section with dropdown navigation solution

This is a solution to the Intro section with dropdown navigation challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Work time
  • Built with
  • What I learned
  • Useful resources
• 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

Screenshot

Links

• Solution: frontendmentor.io

• Live Site: cloudflare

My process

• 1.Download assets, Install Vite & TailwindCss, Initialize git, README.md, Prepare project, ...
• 2.Create components
  • 1.Identify component
  • 2.Create components + style + functionality if exists
  • 3.go to step 1 (Identify component)
• 3.Prepare and Publish(4.Write README.md, Push to github, Make it live on Cloudflare, Publish to frontendmentor, ...)

Work Time

• My Clockify Report

Built with

• React
• TailwindCss
• Framer Motion

What I learned

A div with absolute position get size of its children if:

• make display of div flex
• make flex-shrink of children 0

<motion.div
  ...
  className="... flex"
>
  <ul className="... shrink-0">
    ...
  </ul>
</motion.div>

In this code each menu dropdown get appropriate width

Useful resources

• Multi Level Menu

Author

• Frontend Mentor - @siavhnz

• github - @siavhnz

Acknowledgments

Thanks To

Frontendmentor.io - for their Excitement challenges

Perfect Pixel - for such a great extension