{"_id":"@carlosfrontend/dropdownme","_rev":"2-80919170debabce831038eb8461546d8","name":"@carlosfrontend/dropdownme","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@carlosfrontend/dropdownme","version":"1.0.0","description":"A lightweight and simple dropdown generator","module":"./dist/dropdownme.js","scripts":{"start":"webpack serve --open --config webpack.dev.js","build":"webpack --config webpack.prod.js","deploy":"git subtree push --prefix dist origin gh-pages"},"repository":{"type":"git","url":"git+ssh://git@github.com/carlosfrontend/dropdownme.git"},"keywords":["dropdownme","dropdown-menu","dropdown-menu-generator","dropdown","animated-menu","simple-dropdown","animated-dropdown"],"author":{"name":"carlosfrontend","email":"developer.carlosfrontend@gmail.com"},"license":"ISC","bugs":{"url":"https://github.com/carlosfrontend/dropdownme/issues"},"homepage":"https://github.com/carlosfrontend/dropdownme#readme","devDependencies":{"@babel/core":"^7.23.9","@babel/preset-env":"^7.23.9","babel-loader":"^9.1.3","css-loader":"^6.10.0","css-minimizer-webpack-plugin":"^6.0.0","html-webpack-plugin":"^5.6.0","mini-css-extract-plugin":"^2.8.0","style-loader":"^3.3.4","webpack":"^5.90.3","webpack-cli":"^5.1.4","webpack-dev-server":"^5.0.2","webpack-merge":"^5.10.0"},"_id":"@carlosfrontend/dropdownme@1.0.0","gitHead":"0501ace5ad84bbb79b41d92edd7f344e3e71b2e3","_nodeVersion":"20.11.1","_npmVersion":"10.2.4","dist":{"integrity":"sha512-+Id0gQtmD3qfWR4cZYPL311JjhVUtqinHjxfjnVzR3lyADjb/yAsPXgeWinmf4yelO+saWNXu7HB4niekSDZoA==","shasum":"97a36f95e0493286f1360b28c2520a1a5fb87ccc","tarball":"https://registry.npmjs.org/@carlosfrontend/dropdownme/-/dropdownme-1.0.0.tgz","fileCount":6,"unpackedSize":60049,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBxAgjFjBM/uIru32Fi1Z87GUzrhAcMOByXBI+OPISW0AiBcp4bfL+W7YQ2lF0Ch6DVk+z34GvERMoOQZKV24yAfwA=="}]},"_npmUser":{"name":"carlosfrontend","email":"developer.carlosfrontend@gmail.com"},"directories":{},"maintainers":[{"name":"carlosfrontend","email":"developer.carlosfrontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/dropdownme_1.0.0_1709059702203_0.4251880345861716"},"_hasShrinkwrap":false},"1.0.1":{"name":"@carlosfrontend/dropdownme","version":"1.0.1","description":"A lightweight and simple dropdown generator","module":"./dist/dropdownme.js","scripts":{"start":"webpack serve --open --config webpack.dev.js","build":"webpack --config webpack.prod.js","deploy":"git subtree push --prefix dist origin gh-pages"},"repository":{"type":"git","url":"git+ssh://git@github.com/carlosfrontend/dropdownme.git"},"keywords":["dropdownme","dropdown-menu","dropdown-menu-generator","dropdown","animated-menu","simple-dropdown","animated-dropdown"],"author":{"name":"carlosfrontend","email":"developer.carlosfrontend@gmail.com"},"license":"ISC","bugs":{"url":"https://github.com/carlosfrontend/dropdownme/issues"},"homepage":"https://github.com/carlosfrontend/dropdownme#readme","devDependencies":{"@babel/core":"^7.23.9","@babel/preset-env":"^7.23.9","babel-loader":"^9.1.3","css-loader":"^6.10.0","css-minimizer-webpack-plugin":"^6.0.0","html-webpack-plugin":"^5.6.0","mini-css-extract-plugin":"^2.8.0","style-loader":"^3.3.4","webpack":"^5.90.3","webpack-cli":"^5.1.4","webpack-dev-server":"^5.0.2","webpack-merge":"^5.10.0"},"_id":"@carlosfrontend/dropdownme@1.0.1","gitHead":"7ab607a176d6d9249c74a91eef9cdc9ac05bda9f","_nodeVersion":"20.11.1","_npmVersion":"10.2.4","dist":{"integrity":"sha512-8sJsPVxShbdRRsQy+shCwkZ1UtjLrgRXrEex2mAHIi4owPo5Iaml8B6ol0FxTSiNJMoGDR4DRU68UoDVi1SR9w==","shasum":"a6836951914b165a68e00f4aafe153d10af48b9f","tarball":"https://registry.npmjs.org/@carlosfrontend/dropdownme/-/dropdownme-1.0.1.tgz","fileCount":6,"unpackedSize":60192,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHwIDbbx8sYcaX0Nd55wWGLLwx1ldVfH8IZHUvFivEdfAiEA1uNpPx1WyZQGrIQqgGyJ4Ns+JIP1+zaEEmvxWQJT4mM="}]},"_npmUser":{"name":"carlosfrontend","email":"developer.carlosfrontend@gmail.com"},"directories":{},"maintainers":[{"name":"carlosfrontend","email":"developer.carlosfrontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/dropdownme_1.0.1_1709126548617_0.7798962009349899"},"_hasShrinkwrap":false},"1.0.2":{"name":"@carlosfrontend/dropdownme","version":"1.0.2","description":"A lightweight and simple dropdown generator","module":"./dist/dropdownme.js","scripts":{"start":"webpack serve --open --config webpack.dev.js","build":"webpack --config webpack.prod.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/carlosfrontend/dropdownme.git"},"keywords":["dropdownme","dropdown-menu","dropdown-menu-generator","dropdown","animated-menu","simple-dropdown","animated-dropdown"],"author":{"name":"carlosfrontend","email":"developer.carlosfrontend@gmail.com"},"license":"ISC","bugs":{"url":"https://github.com/carlosfrontend/dropdownme/issues"},"homepage":"https://github.com/carlosfrontend/dropdownme#readme","devDependencies":{"@babel/core":"^7.23.9","@babel/preset-env":"^7.23.9","babel-loader":"^9.1.3","css-loader":"^6.10.0","css-minimizer-webpack-plugin":"^6.0.0","html-webpack-plugin":"^5.6.0","mini-css-extract-plugin":"^2.8.0","style-loader":"^3.3.4","webpack":"^5.90.3","webpack-cli":"^5.1.4","webpack-dev-server":"^5.0.2","webpack-merge":"^5.10.0"},"_id":"@carlosfrontend/dropdownme@1.0.2","gitHead":"cad0c3ac7971a86aacd0843083bb04f121c38154","_nodeVersion":"20.11.1","_npmVersion":"10.2.4","dist":{"integrity":"sha512-0sqqo0mr6k3UB98O/TDvtjxKFBZNGag3gSez87ReZB2vhw0pzv51OUnAcXNwd35FgaN3BQVeY+ULa3De5mDLOw==","shasum":"60f7286f1451f3c92e4670c97b54bfd603cac77f","tarball":"https://registry.npmjs.org/@carlosfrontend/dropdownme/-/dropdownme-1.0.2.tgz","fileCount":6,"unpackedSize":60188,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBQA4zzmEg5HkI4QMWQIwafMbEj64qO4gj/tEEXajNTIAiEA4V8Dx/0TSKL9bIdOMk/E0W8UwCaJCXcUVettVGFP00I="}]},"_npmUser":{"name":"carlosfrontend","email":"developer.carlosfrontend@gmail.com"},"directories":{},"maintainers":[{"name":"carlosfrontend","email":"developer.carlosfrontend@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/dropdownme_1.0.2_1709146636102_0.32368543789035065"},"_hasShrinkwrap":false}},"time":{"created":"2024-02-27T18:48:22.087Z","1.0.0":"2024-02-27T18:48:22.397Z","modified":"2024-02-28T18:57:16.961Z","1.0.1":"2024-02-28T13:22:28.769Z","1.0.2":"2024-02-28T18:57:16.327Z"},"maintainers":[{"name":"carlosfrontend","email":"developer.carlosfrontend@gmail.com"}],"description":"A lightweight and simple dropdown generator","homepage":"https://github.com/carlosfrontend/dropdownme#readme","keywords":["dropdownme","dropdown-menu","dropdown-menu-generator","dropdown","animated-menu","simple-dropdown","animated-dropdown"],"repository":{"type":"git","url":"git+ssh://git@github.com/carlosfrontend/dropdownme.git"},"author":{"name":"carlosfrontend","email":"developer.carlosfrontend@gmail.com"},"bugs":{"url":"https://github.com/carlosfrontend/dropdownme/issues"},"license":"ISC","readme":"# @carlosfrontend/dropdownme\n\n## Dynamic User Interface Interactions\n\n### JavaScript Course The Odin Project\n\nThis 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.\n\n### HTML\n\n1. The first thing you need is to copy and paste this codeblock container into your body tags:\n\n   `index.html`\n\n   ```html\n   <body>\n     <nav id=\"navbar\">\n       <!-- Dropdonws will goes here  -->\n     </nav>\n   </body>\n   ```\n\n2. 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:\n\n   `index.html`\n\n   ```html\n   <nav id=\"navbar\">\n     <!-- Start of the first dropdown -->\n\n     <div class=\"parentContainer\">\n       <div class=\"parentItem\">Home</div>\n       <div class=\"itemsContainer\">\n         <div class=\"dummy-item\"></div>\n         <div class=\"item\">One</div>\n         <div class=\"item\">Two</div>\n         <div class=\"item\">Three</div>\n       </div>\n     </div>\n\n     <!-- End of the first dropdown -->\n\n     <!-- Start of the second dropdown -->\n\n     <div class=\"parentContainer\">\n       <div class=\"parentItem\">Services</div>\n       <div class=\"itemsContainer\">\n         <div class=\"dummy-item\"></div>\n         <div class=\"item\">One</div>\n         <div class=\"item\">Two</div>\n         <div class=\"item\">Three</div>\n         <div class=\"item\">Four</div>\n       </div>\n     </div>\n\n     <!-- End of the second dropdown -->\n   </nav>\n   ```\n\n### Advice\n\n3. 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:\n\n   ```html\n   <div class=\"item\">New Item</div>\n   ```\n\n### Javascipt\n\n1. Install it as a dependency in your project with this terminal command:\n\n   ```console\n   npm i @carlosfrontend/dropdownme\n   ```\n\n2. Make sure you import it into your project's javascipt file and call the function to animate the dropdown:\n\n   `index.js`\n\n   ```js\n   import dropDownMe from \"@carlosfrontend/dropdownme\";\n   dropDownMe();\n   ```\n\n### Link:\n\n:white_check_mark: [Assigments](https://www.theodinproject.com/lessons/node-path-javascript-dynamic-user-interface-interactions) :blue_book:\n\n:white_check_mark: [Live Preview](https://carlosfrontend.github.io/dropdown-menu-odin-project/) :computer:\n\nFeel free to change the styles as you like.\n\nHappy Coding!! :coffee: :rocket:\n","readmeFilename":"README.md"}