@pavel-yakovlev/dropdown-menu NPM

simpleDropdown

This is a JavaScript implementation of a simple dropdown with simple default style. If you want your dropdown to look good, please add some styles for it.

Usage example

Your html:

<!-- Only a body element for simplicity -->
<body>
  <div class="container">
    
  </div>
</body>

Your JS:

import SimpleDropdown from "simpleDropdown";

const dropdown = new SimpleDropdown(".container", "title");

dropdown
  .addItems(
    { content: "item1" },
    { content: "item2" },
    {
      content: "<b>item4</b>",
      style: {
        backgroundColor: "yellow",
      },
    },
  )
  .appendToContainer()
  .alignTitleAndItemsWidth()
  .showOnHover()
  .showOnClick();

Structure of the generated HTML element

<div class="sdd">
  <div class="sdd__title">
    Dropdown title
  </div>
  <div class="sdd__items">
    <div class="sdd__item">
      <div class="sdd__item-title">
        Item title
      </div>
    </div>
    <!-- Below there will be other items that you added -->
  </div>
</div>

Note that you can add custom classes throw the library API.

SimpleDropdown class API

SimpleDropdown

new SimpleDropdown(containerSelector, titleContent, styles)

A constructor. You must pass a selector for a container of this dropdown and a title. Optionally you can pass an object with styles that will be applied to the whole dropdown or to the items.

Param	Type	Description
containerSelector	string	selector for a container of this dropdown.
titleContent	string	title of the dropdown.
styles	dropdownStyles	styles for the dropdown and/or its items.

simpleDropdown.childItems

Returns an array with child items. You can change a style of an individual item or add an event listener to it.

Kind: instance property of SimpleDropdown

simpleDropdown.appendToContainer() ⇒

Appends this dropdown element to its container on the page.

Kind: instance method of SimpleDropdown Returns: this. Throws:

Will throw an error if the container will not be selected.