Custom Select-Dropdown

INFO

A Dropdown is a list of links or buttons that appears when the user interacts with a trigger element. It is used to display a list of options or actions that the user can choose from.

Example

c-panel.-is-dropdown

TIP

For a more detailed description of all classes and options, see Panel Module, which is the base for the Modal.

Bereich wählen

• Studenten
• PhiP
• Apotheker
• PTA

Show Code

<div class="h-inline-block h-pos-relative">
  <button class="c-btn -small -icon-left -dropdown -light js-select" data-target="#globalAreaNavWrap">
    <span class="h-color-apothecary m-r-xs"><i class="fas fa-circle"></i></span>
    Apotheker
  </button>
  <div class="c-panel -is-dropdown -close-backdrop -arrow-up-right -is-small" id="globalAreaNavWrap" role="menu" aria-haspopup="true">
    <div class="c-panel__inner">
      <h6>Bereich wählen</h6>
      <ul class="c-list -linklist -fullwidth m-t-s" id="globalAreaNav">
        <li class="c-list__item -is-subpages">
          <a class="c-link -icon-left">
            <span class="h-color-student m-r-xs"><i class="fas fa-circle"></i></span>
            Studenten
          </a>
        </li>
        <li class="c-list__item -is-subpages">
          <a class="c-link -icon-left">
            <span class="h-color-phip m-r-xs"><i class="fas fa-circle"></i></span>
            PhiP
          </a>
        </li>
        <li class="c-list__item -is-active -is-current -is-subpages">
          <a class="c-link -icon-left">
            <span class="h-color-apothecary m-r-xs"><i class="fas fa-circle"></i></span>
            Apotheker
          </a>
        </li>
        <li class="c-list__item -is-subpages">
          <a class="c-link -icon-left">
            <span class="h-color-pta m-r-xs"><i class="fas fa-circle"></i></span>
            PTA
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

TIP

• The Button has an attribute data-target='#panelID' referring to the panel-ID and the classes -dropdown js-select
• The Panel needs the classes c-panel -is-dropdown and optionally: -has-backdrop -close-backdrop (= dark layer in the backdrop and close with click on layer)
• The Panel contains a Link List with the classes c-list -linklist.
• Use the extra class js-external-links if the list contains external links.
• Use .-is-scrollable on .c-panel__inner if you want the panel to be scrollable.