JavaScript 30- Day 26 Study Notes

https://javascript30.com/

Day 26 of JavaScript 30 by Wes Bos involved setting up a dropdown element that followed along a navigation bar. The element was customized for each item in the menu.

We set up three list items inside an unordered list that made up the navigation bar. They included a dropdown CSS class that contained properties for opacity and display. A new CSS property, to me, is the will-change property that hints to the browser to expect an element change later on.

.dropdown {  opacity: 0;  will-change: opacity;  display: none;

Bos added two sub-classes that will provide the change.

.trigger-enter .dropdown {   display: block;}.trigger-enter-active .dropdown {   opacity: 1;}

In the script tag, the usual setting of variables and adding event listeners. Then a function to handle a mouse event and activate the two sub-classes.

function handleEnter(){   this.classList.add('trigger-enter');   setTimeout(() => {      if(this.classList.contains('trigger-enter')) {      this.classList.add('trigger-enter-active')   }},150);

To custom fit the dropdown window to fit each element, we needed to obtain the coordinates from the viewport. Bos had used the getBoundingClientReact method earlier in the course, this obtains the measurements of the container. In this case, both the dropdown and nav elements.

const dropdown = this.querySelector('.dropdown');const dropdownCoords = dropdown.getBoundingClientRect();const navCoords = nav.getBoundingClientRect();

Set the proper coordinates into a variable.

const coords = {   height: dropdownCoords.height,   width: dropdownCoords.width,   top: dropdownCoords.top - navCoords.top,   left: dropdownCoords.left - navCoords.left,};

Now, we can resize the container using the setProperty method and template literals.

background.style.setProperty('width', `${coords.width}px`);background.style.setProperty('height', `${coords.height}px`);background.style.setProperty('transform', `translate(${coords.left}px, ${coords.top}px)`);

Finally, we used another function to handle the mouse leaving the container.

function handleLeave(){this.classList.remove('trigger-enter', 'trigger-enter-active');background.classList.remove('open');}

The program resulted in a nice effect as you moved the mouse from element to element on the navigation bar.

Follow my study notes as I progress through JavaScript 30.

Retired physician, writer, aspiring website designer and developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store