https://github.com/andrewjbateman/javascript-dropdown-navigation
:clipboard: Create a dropdown menu that follows the mouse along the top. Tutorial 26 from Wes Bos Javascript30
https://github.com/andrewjbateman/javascript-dropdown-navigation
css3 html5 javascript-dropdown-navigation javascript30 menu-navigation mouse-events tutorial-code wesbos
Last synced: 2 months ago
JSON representation
:clipboard: Create a dropdown menu that follows the mouse along the top. Tutorial 26 from Wes Bos Javascript30
- Host: GitHub
- URL: https://github.com/andrewjbateman/javascript-dropdown-navigation
- Owner: AndrewJBateman
- Created: 2018-12-12T08:54:24.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-04-13T08:49:36.000Z (about 3 years ago)
- Last Synced: 2024-12-27T02:45:00.282Z (4 months ago)
- Topics: css3, html5, javascript-dropdown-navigation, javascript30, menu-navigation, mouse-events, tutorial-code, wesbos
- Language: HTML
- Homepage:
- Size: 560 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# :zap: 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_
## :page_facing_up: Table of contents
* [:zap: Javascript Dropdown Navigation](#zap-javascript-dropdown-navigation)
* [:page_facing_up: Table of contents](#page_facing_up-table-of-contents)
* [:books: General info](#books-general-info)
* [:camera: Screenshots](#camera-screenshots)
* [:signal_strength: Technologies](#signal_strength-technologies)
* [:floppy_disk: Setup](#floppy_disk-setup)
* [:computer: Code Examples](#computer-code-examples)
* [:cool: Features](#cool-features)
* [:clipboard: Status & To-Do List](#clipboard-status--to-do-list)
* [:clap: Inspiration](#clap-inspiration)
* [:envelope: Contact](#envelope-contact)
## :books: General info
* Uses direct descendants, mouse events and event listeners. An ES6 function () uses this from parent function.
## :camera: Screenshots
.
## :signal_strength: Technologies
* [Javascript ECMA-262 ECMAScript 2021](http://www.ecma-international.org/publications/standards/Ecma-262.htm)
## :floppy_disk: Setup
* Open `index.html` in browser. If any code is changed the browser needs to be refreshed.
## :computer: Code Examples
* part of function `handleEnter()` to get dropdown and nav coords and use them in const coords
```javascript
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
};
```
## :cool: Features
* Uses the [`element.getBoundingClientRect()`](https://www.w3schools.com/jsref/met_element_getboundingclientrect.asp) method that returns the size of an element and its position relative to the viewport; properties left, top, right, bottom, x, y, width, height.
## :clipboard: Status & To-Do List
* Status: Working
* To-Do: Nothing
## :clap: Inspiration
* [Wes Bos Youtube Javascript30 tutorial 26](https://www.youtube.com/watch?v=GvuWJSXYQDU&list=PLu8EoSxDXHP6CGK4YVJhL_VWetA865GOH&index=26)
## :envelope: Contact
* Repo created by [ABateman](https://github.com/AndrewJBateman), email: [email protected]