|
| 1 | +# @carlosfrontend/dropdownme |
| 2 | + |
| 3 | +## Dynamic User Interface Interactions |
| 4 | + |
| 5 | +### JavaScript Course The Odin Project |
| 6 | + |
| 7 | +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. |
| 8 | + |
| 9 | +### HTML |
| 10 | + |
| 11 | +1. The first thing you need is to copy and paste this codeblock container into your body tags: |
| 12 | + |
| 13 | + `index.html` |
| 14 | + |
| 15 | + ```html |
| 16 | + <body> |
| 17 | + <nav id="navbar"> |
| 18 | + <!-- Dropdonws will goes here --> |
| 19 | + </nav> |
| 20 | + </body> |
| 21 | + ``` |
| 22 | + |
| 23 | +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: |
| 24 | + |
| 25 | + `index.html` |
| 26 | + |
| 27 | + ```html |
| 28 | + <nav id="navbar"> |
| 29 | + <!-- Start of the first dropdown --> |
| 30 | + |
| 31 | + <div class="parentContainer"> |
| 32 | + <div class="parentItem">Home</div> |
| 33 | + <div class="itemsContainer"> |
| 34 | + <div class="dummy-item"></div> |
| 35 | + <div class="item">One</div> |
| 36 | + <div class="item">Two</div> |
| 37 | + <div class="item">Three</div> |
| 38 | + </div> |
| 39 | + </div> |
| 40 | + |
| 41 | + <!-- End of the first dropdown --> |
| 42 | + |
| 43 | + <!-- Start of the second dropdown --> |
| 44 | + |
| 45 | + <div class="parentContainer"> |
| 46 | + <div class="parentItem">Services</div> |
| 47 | + <div class="itemsContainer"> |
| 48 | + <div class="dummy-item"></div> |
| 49 | + <div class="item">One</div> |
| 50 | + <div class="item">Two</div> |
| 51 | + <div class="item">Three</div> |
| 52 | + <div class="item">Four</div> |
| 53 | + </div> |
| 54 | + </div> |
| 55 | + |
| 56 | + <!-- End of the second dropdown --> |
| 57 | + </nav> |
| 58 | + ``` |
| 59 | + |
| 60 | +### Advice |
| 61 | + |
| 62 | +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: |
| 63 | + |
| 64 | + ```html |
| 65 | + <div class="item">New Item</div> |
| 66 | + ``` |
| 67 | + |
| 68 | +### Javascipt |
| 69 | + |
| 70 | +1. Install it as a dependency in your project with this terminal command: |
| 71 | + |
| 72 | + ```console |
| 73 | + npm i @carlosfrontend/dropdownme |
| 74 | + ``` |
| 75 | + |
| 76 | +2. Make sure you import it into your project's javascipt file and call the function to animate the dropdown: |
| 77 | + |
| 78 | + `index.js` |
| 79 | + |
| 80 | + ```js |
| 81 | + import dropDownMe from "@carlosfrontend/dropdownme"; |
| 82 | + dropDownMe(); |
| 83 | + ``` |
| 84 | + |
| 85 | +### Link: |
| 86 | + |
| 87 | +:white_check_mark: [Assigments](https://www.theodinproject.com/lessons/node-path-javascript-dynamic-user-interface-interactions) :blue_book: |
| 88 | + |
| 89 | +Feel free to change the styles as you like. |
| 90 | + |
| 91 | +Happy Coding!! :coffee: :rocket: |
0 commit comments