{"_id":"@aby-jo/dropdown-package","name":"@aby-jo/dropdown-package","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@aby-jo/dropdown-package","version":"1.0.0","description":"A simple and customizable JavaScript package for creating dropdown menus that can be toggled by either a click or hover event. This lightweight and reusable solution works with multiple dropdowns on the same page, offering flexibility in user interaction.","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["[\"dropdown\"]"],"author":{"name":"Low_juice"},"license":"MIT","_id":"@aby-jo/dropdown-package@1.0.0","_nodeVersion":"20.15.1","_npmVersion":"10.7.0","dist":{"integrity":"sha512-lmHOQpOu3gMMdWrWxVI9e7F/vlxuXm588RlM5S4H9pE6QNsjKUeArS8/niN7377FlOw9y7MMDfBXYVNlaclGcQ==","shasum":"cd7d13e70bc92d34cd2b012677261e79fab17b79","tarball":"https://registry.npmjs.org/@aby-jo/dropdown-package/-/dropdown-package-1.0.0.tgz","fileCount":3,"unpackedSize":4112,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIETBwJ4VnXnbqDseZgLZJ+Td3VtwutmdxPsb7Zyd+WTlAiEApJA1Coqah7etTW3K2CXACy5wxIMyymHiA72yIxD1HOA="}]},"_npmUser":{"name":"aby-jo","email":"abyj090@gmail.com"},"directories":{},"maintainers":[{"name":"aby-jo","email":"abyj090@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/dropdown-package_1.0.0_1745824139990_0.9505568318991997"},"_hasShrinkwrap":false}},"time":{"created":"2025-04-28T07:08:59.926Z","1.0.0":"2025-04-28T07:09:00.158Z","modified":"2025-04-28T07:09:00.434Z"},"maintainers":[{"name":"aby-jo","email":"abyj090@gmail.com"}],"description":"A simple and customizable JavaScript package for creating dropdown menus that can be toggled by either a click or hover event. This lightweight and reusable solution works with multiple dropdowns on the same page, offering flexibility in user interaction.","keywords":["[\"dropdown\"]"],"author":{"name":"Low_juice"},"license":"MIT","readme":"# Dropdown\nA simple and customizable JavaScript package for creating dropdown menus that can be toggled by either a click or hover event. This lightweight and reusable solution works with multiple dropdowns on the same page, offering flexibility in user interaction.\n\n## Features\n\nClick or Hover Toggle: Easily toggle the dropdown menu visibility using a click or hover event.\n\nModular and Reusable: Use the package for multiple dropdowns on your webpage.\n\nSimple API: Works out-of-the-box with minimal configuration.\n\n## Installation\n\nTo install via npm, run the following command:\n\n#### bash\n```bash\nnpm install @aby-jo/dropdown-package\n```\n## Usage\n\nInclude the package in your JavaScript file:\n\n- Import the dropdown function into your project:\n\n    #### javascript\n    ```javascript\n    import { dropdown } from '@aby-jo/dropdown-package';\n    ```\n- Initialize the dropdowns:\n\n  After importing, call the dropdown function and pass the CSS selector for the dropdown button(s) and the toggle method (\"click\" or \"hover\"):\n\n    #### javascript\n    ``` javascript\n\n    // Initialize dropdowns with click toggle method\n\n    dropdown('.dropdown', 'click');\n\n    // Alternatively, use hover toggle method\n\n    // dropdown('.dropdown', 'hover');\n    ```\n#### HTML Structure:\n\nEnsure your HTML has a button to trigger the dropdown and a hidden menu:\n```html\n<div class=\"dropdown\">  \n    <button class=\"dropdown-button\">Menu</button>  \n    <div class=\"dropdown-menu\" style=\"display:none;\">  \n        <div class=\"dropdown-item\">Option 1</div>  \n        <div class=\"dropdown-item\">Option 2</div>  \n        <div class=\"dropdown-item\">Option 3</div>  \n    </div>  \n</div>\n```\nYou can create as many dropdown menus as needed by repeating the structure and calling the dropdown function with the appropriate selectors.\n\n## Options\n\n- selector (string): The CSS selector for the button(s) that trigger the dropdown. This can be a class, ID, or any valid CSS selector.\n\n- togglemethod (string): Choose between \"click\" or \"hover\" to trigger the dropdown.\n\n## Example\nHere’s a full example of how to set up a dropdown with click and hover events:\n\n#### html\n\n```html\n<div class=\"dropdown\">\n   <button class=\"dropdown-button\">Click me</button>\n   <div class=\"dropdown-menu\" style=\"display:none;\">\n       <div class=\"dropdown-item\">Option 1</div>\n       <div class=\"dropdown-item\">Option 2</div>\n       <div class=\"dropdown-item\">Option 3</div>\n   </div>\n</div>\n```\n\n#### JavaScript\n``` javascript\nimport { dropdown } from '@aby-jo/dropdown-package';\n\n// Initialize dropdowns with click toggle method\ndropdown('.dropdown', 'click');\n\n// Alternatively, use hover toggle method\n// dropdown('.dropdown', 'hover');\n```","readmeFilename":"readme.md","_rev":"1-fccf0f383720f6450a57095926e4e009"}