Check out the final result: https://nikmaxott.github.io/intro-section-with-dropdown/
Check out the source code: https://github.com/nikmaxott/intro-section-with-dropdown
Desktop Design
This challenge had a few key steps. I started with the basic Desktop Layout and perfecting that. This required extensive use of the CSS Grid, something that I’m not overly familiar with, in combination with Flexbox, a tool I have a lot of experience in.
Following this I had to create the dropdown menus (see below). Initially I just made these visible all the time, the JavaScript to hide/display them would come later.
Mobile Design
The Mobile design for this site was a lot more complicated, especially trying to make the code somewhat neat and modular with the already designed desktop version.
The mobile design is mostly built with CSS Grid and has a lot of clever CSS tricks to scale the images and text to a mobile appropriate size. This means the entire application is dynamic and resizes rather well based on window size.
The most complicated part of the mobile design was the menu, this not only needed animations it also had to use z-index, and CSS filters to create the menu overlay effect, this was inspired by the menu here on this site.
The final change for mobile was to edit the menu dropdown so they behaved as expected in this setting, this took a lot of work but I’m very happy with the end result!
JavaScript
The JavaScript for this project is not overly complicated. To create the menu’s I only needed to swap out the CSS classes, this can be achieved quite quickly. The real issue was making it adaptive so only one of the menus would display at a time, and this would only occur when it was in “focus” so a click anywhere else would close the active menu.
The final bit of CSS trickery was to move the menu in and out smoothly. Requiring both a bit of CSS and JS trickery I am very happy with the final result and I think I will try and use something similar in the future in other projects when the need arises.
Next Steps
The next steps for this site would be add some nicer animations, but as this is something I’m not overly familiar with I will have to dedicate some more time learning.
Next week I’ll be starting my new job so don’t except such frequent posts, but I’ll try my best to continue publishing where possible
– nikmaxott
