open-index/open-npm huggingface dataset:
npm package: @stuvascript/dropdown-thang
Description: Creates a customizable dropdown menu for your projects.
Author: stuvascript
Latest version: 1.0.0

# 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:

1. 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.
2. A child element of that element needs to have a class of `drop-down-box`.
3. 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](https://github.com/StuvaScript)

## License

This project is licensed under the MIT License - see the [MIT License](https://choosealicense.com/licenses/mit/) file for details

## Acknowledgments

- Shoutout to The Odin Project for helping me on my coding journey
npm package: @stuvascript/mobile-menu
Description: A nifty mobile menu for all your mobile projects!
Author: stuvascript
Latest version: 1.0.1

# Mobile Menu

A nifty mobile menu for all your mobile projects!

## Getting Started

### View The Project

Visit [the live project](https://stuvascript.github.io/mobile-menu/). If you're not using a mobile device, open the dev tools with F12 on Windows or Cmd + Opt + I on macOS and change the window size to see the mobile menu in action!

### 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/mobile-menu
```

## To Use

### JavaScript

You can use the `import` syntax to call the package. Here is what it would look like:

```Javascript
import mobile-menu from '@stuvascript/mobile-menu';
```

### HTML

In your HTML file, you need:

1. An element to have the class of "outer-nav-for-mobile-menu". This is what the package looks for to actually work. Semantically this should be a `<nav>` element but really it can be anything.

2. That element needs to have `<li>` children. This is what the package will read and copy to the mobile menu for navigation.

### Notes

- If your element that has the class of "outer-nav-for-mobile-menu" is the child of another element, it's up to you to target that parent element with a media query parameter of "min-width: 450px" and a "position: absolute" to remove it from the document flow when this mobile menu kicks in.

- Your element that has the class of "outer-nav-for-mobile-menu" CAN'T be styled directly. You need to target that element with your own class name so it doesn't override the mobile menu styles.

### Examples

Here is an example of what your HTML could look like:

```HTML
<nav class="outer-nav-for-mobile-menu class-for-styling">
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Products</li>
    <li>Contact</li>
    <li>Team</li>
    <li>Funky Monkey</li>
  </ul>
</nav>
```

You can see there is the correct class name and an extra class name for you to style.

Here's an example of what your CSS could look like if your element that has the class of "outer-nav-for-mobile-menu" has a parent element:

```CSS
@media (width <= 450px) {

  .wrapper-element {
    position: absolute;
  }

}
```

This "media query" and "position: absolute" are needed so that the parent element will disappear from the document flow and make the rest of the page look better.

## Built With

Vanilla JavaScript and CSS

### With assistance from:

- node.js
- Webpack
- Prettier
- ES Lint

## Author

- **Stuvascript** - [Portfolio](https://stuvascript.github.io/portfolio/)

## License

This project is licensed under the MIT License - see the [MIT License](https://choosealicense.com/licenses/mit/) file for details

## Acknowledgments

- Shoutout to The Odin Project for helping me on my coding journey