AndrewJBateman / javascript-dropdown-navigation

:clipboard: Create a dropdown menu that follows the mouse along the top. Tutorial 26 from Wes Bos Javascript30

⚡ Javascript Dropdown Navigation

• 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

📄 Table of contents

• ⚡ Javascript Dropdown Navigation
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • ✉️ Contact

📚 General info

• Uses direct descendants, mouse events and event listeners. An ES6 function () uses this from parent function.

📷 Screenshots

.

📶 Technologies

• Javascript ECMA-262 ECMAScript 2021

💾 Setup

• Open index.html in browser. If any code is changed the browser needs to be refreshed.

💻 Code Examples

• 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
};

🆒 Features

• 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 & To-Do List

• Status: Working
• To-Do: Nothing

👏 Inspiration

• Wes Bos Youtube Javascript30 tutorial 26

✉️ Contact

• Repo created by ABateman, email: [e-mail]