Frontend Mentor - Intro section with dropdown navigation solution

This is a solution to the Intro section with dropdown navigation challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • 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 URL: View codes
• Live Site URL: View Live site

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• Javascript

What I learned

onClick function

<div
  class="company nav-item"
  onClick="toggleDropdown('company-expanded-list');"
>
  <p>Company</p>
  <div class="arrow-img"></div>
</div>

overlay effect over the entire page except sidebar

.overlay {
  transition: all 0.2s ease-out;
}

.overlay.open {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  transition: all 0.2s ease-in;
}

features items dropdown

.features-expanded-list {
  // display: inline;
  overflow-y: hidden;
  position: absolute;
  z-index: 1;
  top: 3rem;
  left: 0;
  border-radius: 0.5rem;
  background-color: var(--almost-white);
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  margin: 0;
}
.features-expanded-list.open {
  height: 200px;
  padding: 1.5rem 1.5rem 0 1.5rem;
}

Continued development

Useful resources

• Youtube tutorial - This tutorial helped me learn how to do the slide side menu on mobile.
• Geeks for Geeks - This article helped me learn how to pass a string parameter in onClick function.

Author

• Github - Nguyen Nguyen
• Frontend Mentor - @jesuisbienbien

Acknowledgments