- A dropdown navigation menu that follows the mouse along each list item in the top. The size of the background of the dropdown adjusts to the size of the content menu. Tutorial from Wes Bos Javascript30 Youtube series.
- Note: to open web links in a new window use: ctrl+click on link
- Uses direct descendants, mouse events and event listeners. An ES6 function () uses this from parent function.
- Open
index.html
in browser. If any code is changed the browser needs to be refreshed.
- part of function
handleEnter()
to get dropdown and nav coords and use them in const coords
const dropdown = this.querySelector('.dropdown'); //different dropdown under each list item
const dropdownCoords = dropdown.getBoundingClientRect(); //gets dimensions of dropdown rect
const navCoords = nav.getBoundingClientRect(); //in case header added etc that would push the whole menu position down
const coords = {
height: dropdownCoords.height,
width: dropdownCoords.width,
top: dropdownCoords.top - navCoords.top,
left: dropdownCoords.left - navCoords.left
};
- Uses the
element.getBoundingClientRect()
method that returns the size of an element and its position relative to the viewport; properties left, top, right, bottom, x, y, width, height.
- Status: Working
- To-Do: Nothing
- Repo created by ABateman, email: gomezbateman@yahoo.com