https://github.com/carlosfrontend/dropdownme
A lightweight and simple dropdown generator
https://github.com/carlosfrontend/dropdownme
animated-dropdown animated-menu css dropdown dropdown-menu dropdown-menu-generator dropdownme html javascript npm simple-dropdown webpack5
Last synced: 4 months ago
JSON representation
A lightweight and simple dropdown generator
- Host: GitHub
- URL: https://github.com/carlosfrontend/dropdownme
- Owner: carlosfrontend
- Created: 2024-02-27T12:34:40.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-02-28T19:03:54.000Z (over 1 year ago)
- Last Synced: 2025-01-31T09:18:10.445Z (5 months ago)
- Topics: animated-dropdown, animated-menu, css, dropdown, dropdown-menu, dropdown-menu-generator, dropdownme, html, javascript, npm, simple-dropdown, webpack5
- Language: JavaScript
- Homepage: https://carlosfrontend.github.io/dropdown-menu-odin-project/
- Size: 92.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @carlosfrontend/dropdownme
## Dynamic User Interface Interactions
### JavaScript Course The Odin Project
This package was developed as an exercise for [The Odin Project](https://www.theodinproject.com/). It's pretty lightweight and allows you to add as many animated dropdown menus as you need.
### HTML
1. The first thing you need is to copy and paste this codeblock container into your body tags:
`index.html`
```html
```
2. Each block with the `.parentContainer` class is a dropdown menu. You can add by copying and pasting as many as you need at you navbar container:
`index.html`
```html
Home
One
Two
Three
Services
One
Two
Three
Four
```
### Advice
3. The only **requirement** is **not to change the name of the nav id and the name classes**. You can replace the rest of the text with whatever you want. You can even add more tags with the html tag if you need more elements:
```html
New Item
```
### Javascipt
1. Install it as a dependency in your project with this terminal command:
```console
npm i @carlosfrontend/dropdownme
```
2. Make sure you import it into your project's javascipt file and call the function to animate the dropdown:
`index.js`
```js
import dropDownMe from "@carlosfrontend/dropdownme";
dropDownMe();
```
### Link:
:white_check_mark: [Assigments](https://www.theodinproject.com/lessons/node-path-javascript-dynamic-user-interface-interactions) :blue_book:
:white_check_mark: [Live Preview](https://carlosfrontend.github.io/dropdown-menu-odin-project/) :computer:
Feel free to change the styles as you like.
Happy Coding!! :coffee: :rocket: