Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kbelltree/dropdown-menu
The Odin Project: Drop-down menus (Dynamic User Interface Interactions)
https://github.com/kbelltree/dropdown-menu
dropdown dropdown-menu javascript js npm-package subnavigator the-odin-project theodinproject vanilla-js
Last synced: about 12 hours ago
JSON representation
The Odin Project: Drop-down menus (Dynamic User Interface Interactions)
- Host: GitHub
- URL: https://github.com/kbelltree/dropdown-menu
- Owner: kbelltree
- Created: 2024-03-26T22:34:35.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-04-23T01:37:40.000Z (10 months ago)
- Last Synced: 2025-02-07T23:46:34.399Z (3 days ago)
- Topics: dropdown, dropdown-menu, javascript, js, npm-package, subnavigator, the-odin-project, theodinproject, vanilla-js
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/@k-bell/k-bell-dropdown-menu-practice
- Size: 841 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @k-bell/k-bell-dropdown-menu-practice
This NPM package is developed as part of a tutorial from [The Odin Project](https://www.theodinproject.com/lessons/node-path-javascript-dynamic-user-interface-interactions), aimed at creating dynamic, single-level dropdown menus with minimal setup. For an in-depth guide, refer to [the lesson on 'Dropdown Menus'](https://www.theodinproject.com/lessons/node-path-javascript-dynamic-user-interface-interactions#drop-down-menus).
## Table of Contents
- [Description](#description)
- [Quick Start](#quick-start)
- [Preview](#preview)
- [Enhanced Example Preview](#enhanced-example-preview)
- [Final Thoughts](#final-thoughts)
## Description
The `@k-bell/k-bell-dropdown-menu-practice` simplifies the implementation of single-level dropdown menus on webpages. By initializing once, the package enables all dropdowns to toggle visibility seamlessly. This tool is designed for handling multiple dropdowns without the need for individual configurations.
> **Note**: This package is intended for **private and educational use**, tailored to specific project requirements.
### Features
1. [**`attachDropdownEffectOnLoad`**](#attachdropdowneffectonload-function-and-k-bell-dropdowncss-file):
- Attaches _click_ event listeners to dropdown triggers globally on page load. This function activates the dropdown effect for all menus simultaneously.
2. [**`addDropdownToEachMenuAEl`**](#adddropdowntoeachmenuael-function):
- Dynamically inserts a structured dropdown list (`
`) under each `Menu Title`. It is capable of targeting multiple anchor elements at once.
3. **`k-bell-dropdown.css`**:
- Provides essential styles for the functioning of the dropdown effects and includes basic styling that can be easily adapted or extended.
## Quick Start
For quick installation and basic usage instructions, please visit my [Usage Guide](https://github.com/kbelltree/dropdown-menu/blob/main/USAGE.md)
## Preview
Here’s what the default setup looks like:
## Enhanced Example Preview
See how the package can be transformed with a bit of customization:
```css
/* my-customized-style.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}
ul {
padding-inline-start: 0;
}
a {
color: black;
}
ul.nav-container {
display: flex;
justify-content: space-around;
background: whitesmoke;
padding: 8px;
}
.k-bell-dropdown::after {
content: '▾';
font-size: 16px;
padding-left: 5px;
}
.k-bell-dropdown + ul {
translate: 0 8px;
background: gainsboro;
min-width: 150px;
z-index: 1;
}
.k-bell-dropdown + ul li {
width: 100%;
padding: 8px;
}
.k-bell-dropdown + ul li:hover {
background: lemonchiffon;
}
/* This setup makes the entire area of each list item clickable, improving usability for navigation. Makes tags fill the entire space of their parent
.k-bell-dropdown + ul li a {
display: block;
width: 100%;
height: 100%;
}
```
## Final Thoughts
Throughout the development of this npm package, I encountered several challenges that not only tested my technical skills but also deepened my understanding of effective web development practices. Here’s a recap of the major learning points and the solutions I crafted:
### 1. Managing Dropdown Display
**Problem**: Choosing the optimal method to control the visibility of dropdown contents.
- **Reflection**: I opted for a CSS-centric approach with minimal DOM manipulation to manage dropdown visibility. This decision was influenced by the principle of separation of concerns, aiming for efficiency and cleaner code.
### 2. Event Handling for User Interaction
**Problem**: Deciding on the interaction model for triggering the dropdown—whether through hover, click, or both.
- **Reflection**: After evaluating user interaction patterns and considering the complexity involved, I settled on using the click event. This method not only simplifies the interaction but also improves accessibility, particularly for mobile environments where hover states can be problematic and for users who rely on assistive technologies.
### 3. Improving UX with Outside Click Detection
**Problem**: Ensuring intuitive usability by closing the dropdown when clicking outside of it.
- **Reflection**: I implemented a document-level listener to detect clicks outside the dropdown, a common UX practice that enhances the interface's responsiveness and user engagement.
### 4. Balancing Functionality and Simplicity
**Problem**: Determining the right amount of functionality to include without compromising simplicity and usability.
- **Reflection**: Still exploring the best practices in npm package development, I chose a minimalist approach. The functions were designed to perform effectively with a single invocation, supplemented by CSS for basic styling and adjustments, allowing users flexibility without complexity.
These experiences have not only contributed to my professional growth but also shaped my approach to software development, emphasizing the importance of user-centric design and clean coding practices. While I strive to fully incorporate these principles, I recognize that mastering them is an ongoing process. Each challenge I encountered has been a stepping stone in understanding and implementing these crucial aspects more effectively.