jmjuanes/siimple

Add dropdown component

jmjuanes opened this issue · 0 comments

Add new .siimple-dropdown experimental component to display toggleable dropdown links with the appearance of a list.

image

Here is an example code of a dropdown element:

<div class="siimple-dropdown siimple-dropdown--visible">
    <div class="siimple-btn siimple-btn--primary siimple-dropdown-toggle">
        Dropdown button
    </div>
    <div class="siimple-dropdown-content">
        <div class="siimple-dropdown-item">Item 1</div>
        <div class="siimple-dropdown-item">Item 2</div>
        <div class="siimple-dropdown-item">Item 3</div>
    </div>
</div>

The siimple-dropdown component should wrap two components:

  • A button, link, or another element that will display the dropdown (using JavaScript) for example when the user clicks on it. Additionally, this element might contain the class .siimple-dropdown-toggle to display an arrorw on the right side of the element.
  • A container for all dropdown items, with the class .siimple-dropdown-content. By default the container won't be visible.

The .siimple-dropdown-content element can contain the following elements:

  • .siimple-dropdown-item to display a link inside the container.
  • .siimple-dropdown-separator to display a separator between two items.

The .siimple-dropdown-content will be displayed if a .siimple-dropdown--visible class is added to the parent .siimple-dropdown element.