dropdown-menu

This package makes all your dropdowns expand on hover and disappear when mouse leaves the dropdown element.

How to use

Step 1

Install the package in your projects folder.

npm install @hysky93/dropdown-menu --save

Step 2

Create your dropdown structure in html. Make sure your container that wraps around your dropdown element has a dropdown class and the container that you want to show on hover has a dropdown-menu class.

Example html structure

  <div class="dropdown">
    <div class="dropdown-title">
      <h3>Dropdown</h3>
    </div>
    <ul class="dropdown-menu">
      <li class="dropdown-item">
        <a href="#" class="dropdown-link">Item One</a>
      </li>
      <li class="dropdown-item">
        <a href="#" class="dropdown-link">Item Two</a>
      </li>
      <li class="dropdown-item">
        <a href="#" class="dropdown-link">Item Three</a>
      </li>
      <li class="dropdown-item">
        <a href="#" class="dropdown-link">Item Four</a>
      </li>
    </ul>
  </div>

Step 3

In your JavaScript file import and call initDropdowns function.

import initDropdowns from '@hysky93/dropdown-menu';

initializeDropdowns();

All your dropdowns should now expand on hover.