Lab 39 Reflection


     La 39 was about creating links that would reveal a dropdown when hovered over. In the HTML, I obviously had to set up a few <a> tags for this. Underneath these tags, I set up several divs with the class of dropdown, being set to have no display initially in the CSS. In the JS, I stored all these dropdown divs in a variable and created 2 functions, handleOpen() and handleLeave(), which added a CSS class to make the div have a display and took away that same class, respectively. I used the .forEach method to add an event listener to all links that called these functions when the user hovered the mouse over the links or took their mouse out of the links.
     These skills are important to a web designer because they can help enhance a website's organization. In a nav, for example, there might be many links and it can become cluttered to have them all in one place. A dropdown like this can reduce the clutter by putting several links under one link and only displaying them when the user hovers over the parent link. Or perhaps a website uses a lot of vocabulary for a legal or technical reason many might not know the definition of. A dropdown can display the definition when the user hovers over the word.

Comments

Popular Posts