Skip to content

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

Notifications You must be signed in to change notification settings

AndrewJBateman/javascript-dropdown-navigation

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

⚡ 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

GitHub repo size GitHub pull requests GitHub Repo stars GitHub last commit

📄 Table of contents

📚 General info

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

📷 Screenshots

Example screenshot.

📶 Technologies

💾 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

✉️ Contact

About

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

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published