@stuvascript/dropdown-thang NPM

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;
}