@stuvascript/dropdown-thang
v1.0.0
Published
Creates a customizable dropdown menu for your projects.
Downloads
1
Readme
Dropdown Thang
Creates a customizable dropdown menu for your projects.
Getting Started
Prerequisites
I'm pretty sure you need Webpack for this to work on your browser.
Installing
Make sure you have npm installed by going to the root directory of your project and typing the following CLI command:
npm init -y
Then install this project using the following CLI command:
npm i @stuvascript/dropdown-thang
To Use
HTML
In your HTML file, you need:
- An element to have the class of
drop-down-target
. This is where you can put your content subject that will have the menu drop down below it. - A child element of that element needs to have a class of
drop-down-box
. - And a child element of that element needs to have a class of
drop-down-list
. Inside this element you can place all your child elements and their content that need to be displayed in the dropdown.
Here is an example that you can copy and paste into your HTML file and edit however you like:
<div class="drop-down-target">
Hamburger
<div class="drop-down-box">
<ul class="drop-down-list">
<li>pickles</li>
<li>buns</li>
<li>lettuce</li>
<li>ketchup</li>
</ul>
</div>
</div>
<div class="drop-down-target">
<div class="drop-down-box">
<ul class="drop-down-list">
<li>doberman</li>
<li>chihuahua</li>
<li>boxer</li>
<li>greyhound</li>
<li>labrador</li>
</ul>
</div>
<span>dogs</span>
</div>
<div class="drop-down-target">
places
<div class="drop-down-box">
<div class="drop-down-list">
<p>Paris</p>
<span>London</span>
<div>Rome</div>
<p>Oklahoma</p>
</div>
</div>
</div>
To Style
CSS
In your CSS file, you can copy and paste the following code to make changes to how it's styled:
.drop-down-box {
background: white;
top: 1rem;
line-height: 1.5rem;
border-radius: 5px;
box-shadow: 2px 2px 15px rgb(2, 2, 2);
}
.drop-down-list {
padding: 5px;
}
.drop-down-list > * {
list-style-type: none;
}
.drop-down-list > *:hover {
background: #1ce;
}
Built With
Vanilla JavaScript and CSS
Author
- Stuvascript - Github page
License
This project is licensed under the MIT License - see the MIT License file for details
Acknowledgments
- Shoutout to The Odin Project for helping me on my coding journey