{"id":18614933,"url":"https://github.com/andrewjbateman/javascript-dropdown-navigation","last_synced_at":"2025-11-03T03:30:31.094Z","repository":{"id":96860584,"uuid":"161459736","full_name":"AndrewJBateman/javascript-dropdown-navigation","owner":"AndrewJBateman","description":":clipboard: Create a dropdown menu that follows the mouse along the top. Tutorial 26 from Wes Bos Javascript30","archived":false,"fork":false,"pushed_at":"2022-04-13T08:49:36.000Z","size":573,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-27T02:45:00.282Z","etag":null,"topics":["css3","html5","javascript-dropdown-navigation","javascript30","menu-navigation","mouse-events","tutorial-code","wesbos"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AndrewJBateman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-12-12T08:54:24.000Z","updated_at":"2022-05-12T01:38:26.000Z","dependencies_parsed_at":"2023-03-30T11:35:48.923Z","dependency_job_id":null,"html_url":"https://github.com/AndrewJBateman/javascript-dropdown-navigation","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fjavascript-dropdown-navigation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fjavascript-dropdown-navigation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fjavascript-dropdown-navigation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fjavascript-dropdown-navigation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AndrewJBateman","download_url":"https://codeload.github.com/AndrewJBateman/javascript-dropdown-navigation/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239406449,"owners_count":19633024,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css3","html5","javascript-dropdown-navigation","javascript30","menu-navigation","mouse-events","tutorial-code","wesbos"],"created_at":"2024-11-07T03:27:28.007Z","updated_at":"2025-11-03T03:30:31.063Z","avatar_url":"https://github.com/AndrewJBateman.png","language":"HTML","readme":"# :zap: Javascript Dropdown Navigation\n\n* 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.\n* **Note:** to open web links in a new window use: _ctrl+click on link_\n\n![GitHub repo size](https://img.shields.io/github/repo-size/AndrewJBateman/javascript-dropdown-navigation?style=plastic)\n![GitHub pull requests](https://img.shields.io/github/issues-pr/AndrewJBateman/javascript-dropdown-navigation?style=plastic)\n![GitHub Repo stars](https://img.shields.io/github/stars/AndrewJBateman/javascript-dropdown-navigation?style=plastic)\n![GitHub last commit](https://img.shields.io/github/last-commit/AndrewJBateman/javascript-dropdown-navigation?style=plastic)\n\n## :page_facing_up: Table of contents\n\n* [:zap: Javascript Dropdown Navigation](#zap-javascript-dropdown-navigation)\n  * [:page_facing_up: Table of contents](#page_facing_up-table-of-contents)\n  * [:books: General info](#books-general-info)\n  * [:camera: Screenshots](#camera-screenshots)\n  * [:signal_strength: Technologies](#signal_strength-technologies)\n  * [:floppy_disk: Setup](#floppy_disk-setup)\n  * [:computer: Code Examples](#computer-code-examples)\n  * [:cool: Features](#cool-features)\n  * [:clipboard: Status \u0026 To-Do List](#clipboard-status--to-do-list)\n  * [:clap: Inspiration](#clap-inspiration)\n  * [:envelope: Contact](#envelope-contact)\n\n## :books: General info\n\n* Uses direct descendants, mouse events and event listeners. An ES6 function () uses this from parent function.\n\n## :camera: Screenshots\n\n![Example screenshot](./nav.png).\n\n## :signal_strength: Technologies\n\n* [Javascript ECMA-262 ECMAScript 2021](http://www.ecma-international.org/publications/standards/Ecma-262.htm)\n\n## :floppy_disk: Setup\n\n* Open `index.html` in browser. If any code is changed the browser needs to be refreshed.\n\n## :computer: Code Examples\n\n* part of function `handleEnter()` to get dropdown and nav coords and use them in const coords\n\n```javascript\nconst dropdown = this.querySelector('.dropdown'); //different dropdown under each list item\nconst dropdownCoords = dropdown.getBoundingClientRect(); //gets dimensions of dropdown rect\nconst navCoords = nav.getBoundingClientRect(); //in case header added etc that would push the whole menu position down\n\nconst coords = {\n  height: dropdownCoords.height,\n  width: dropdownCoords.width,\n  top: dropdownCoords.top - navCoords.top,\n  left: dropdownCoords.left - navCoords.left\n};\n```\n\n## :cool: Features\n\n* 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.\n\n## :clipboard: Status \u0026 To-Do List\n\n* Status: Working\n* To-Do: Nothing\n\n## :clap: Inspiration\n\n* [Wes Bos Youtube Javascript30 tutorial 26](https://www.youtube.com/watch?v=GvuWJSXYQDU\u0026list=PLu8EoSxDXHP6CGK4YVJhL_VWetA865GOH\u0026index=26)\n\n## :envelope: Contact\n\n* Repo created by [ABateman](https://github.com/AndrewJBateman), email: gomezbateman@yahoo.com\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewjbateman%2Fjavascript-dropdown-navigation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandrewjbateman%2Fjavascript-dropdown-navigation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewjbateman%2Fjavascript-dropdown-navigation/lists"}