Hi everybody! 👋

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
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author

Overview

The challenge 🎯

Users should be able to:

• View the relevant dropdown menus on desktop and mobile when interacting with the navigation links

navbar w/ sub-menus close:

navbar w/ sub-menus open:

• View the optimal layout for the content depending on their device's screen size

mobile design:

desktop design:

• See hover states for all interactive elements on the page

button Hover:

Links 🔗

• Solution: Github Repository
• Solution: Github PAge

My process ⚙️

Built with 🛠️

• Semantic HTML5 markup
• Flexbox
• Mobile-first workflow
• Sass - Css preprocessor
• Javascript

What I learned 📚

In this challenge i had the oportunity to improve my handdle of javascript. Particulary i learned how to design (in HTML) a completly functional menu with a sub-menu included, - how to toggle the display of my css (sass in this case) for show & hide my page´s navbar:

//opening the navbar
hamburguerMenu.addEventListener('click', ()=>{
    hamburguerMenu.style.display = 'none';
    navBar.style.display = 'block';
});

// closing the navbar
closeBtn.addEventListener('click', ()=>{
    screenSize = window.innerWidth;
    if(screenSize >= 768){
        navBar.style.display = 'block';
        hamburguerMenu.style.display = 'none';
    } else {
        hamburguerMenu.style.display = 'block';  
        navBar.style.display = 'none';
    }
});

Furthermore i had the chance to use, for the very first time, ternary operators to reduce the length of the functions codes.

//using the ternary operator to make the navbar appear/hide when clicked in a certain place
featureSubMenu.style.display = (featureSubMenu.style.display === 'block') ? 'none' : 'block';

Also i learned how to set the transform/transition properties from js (to add moving at the arrow icons in the sub menues)

featureBtnArrow.style.transition = 'transform .3s ease';

Author 🙋🏻‍♂️

• Twitter/X - @agus_firpo
• Frontend Mentor - @Arfirpo
• Linkedin - Agustín Rodrigo Firpo