Responsive Intro Section W/ Dropdown navigator (SASS)
Design comparison
Solution retrospective
Hi everybody! 👋
This is a solution to the Intro section with dropdown navigation challenge on Frontend Mentor.
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
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
Community feedback
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord