Penguin

Dropdown

A dropdown is used to show/hide additional content.

##single dropdown

btn--primary

<div class="dropdown dropdown--modifier">
    <a href="#single_dropdown" class="dropdown__link" data-rel="dropdown">Item 1</a>
    <ul id="single_dropdown" class="dropdown__menu" role="menu" data-dropdown>
        <li class="dropdown__menu__item">
            <a href="#" class="dropdown__menu__link">Item 1</a>
        </li>
        <li class="dropdown__menu__item">
            <a href="#" class="dropdown__menu__link">Item 2</a>
        </li>
        <li class="dropdown__menu__item">
            <a href="#" class="dropdown__menu__link">Item 3</a>
        </li>
    </ul>
</div>

##icon dropdown

<div class="penguin-example">
    <div class="dropdown">
        <a href="#icon_dropdown" class="dropdown__link" data-rel="dropdown">
            <span class="icon-text">
                <i class="icon" aria-hidden="true">*Your icon here*</i>Item 1
            </span>
        </a>
        <ul id="icon_dropdown" class="dropdown__menu" role="menu" data-dropdown>
            <li class="dropdown__menu__item">
                <a href="#" class="dropdown__menu__link">Item 1</a>
            </li>
            <li class="dropdown__menu__item">
                <a href="#" class="dropdown__menu__link">Item 2</a>
            </li>
            <li class="dropdown__menu__item">
                <a href="#" class="dropdown__menu__link">Item 3</a>
            </li>
        </ul>
    </div>
</div>

##fluid dropdown

<div class="penguin-example">
    <div class="dropdown  dropdown--fluid">
        <a href="#menu211" class="dropdown__link" data-rel="dropdown">
            <span class="icon-text">
                <i class="icon" aria-hidden="true">*Your icon here*</i>Item 1
            </span>
        </a>
        <ul id="menu211" class="dropdown__menu" role="menu" data-dropdown>
            <li class="dropdown__menu__item">
                <a href="#" class="dropdown__menu__link">Item 1</a>
            </li>
            <li class="dropdown__menu__item">
                <a href="#" class="dropdown__menu__link">Item 2</a>
            </li>
            <li class="dropdown__menu__item">
                <a href="#" class="dropdown__menu__link">Item 3</a>
            </li>
        </ul>
    </div>
</div>

##dropdown menu

<nav class="nav nav--inline" role="navigation">
    <h1 class="invisible">Navigation</h1>
    <ul class="nav__menu">
        <li class="nav__menu__item dropdown">
            <a href="#menu1" class="nav__menu__link" data-rel="dropdown">Item 1</a>
            <ul id="menu1" class="nav__submenu" role="menu" data-dropdown>
                <li class="nav__submenu__item">
                    <a href="#" class="nav__submenu__link">Item 1</a>
                </li>
                <li class="nav__submenu__item">
                    <a href="#" class="nav__submenu__link">Item 2</a>
                </li>
                <li class="nav__submenu__item">
                    <a href="#" class="nav__submenu__link">Item 3</a>
                </li>
            </ul>
        </li>
        <li class="nav__menu__item dropdown">
            <a href="#menu2" class="nav__menu__link" data-rel="dropdown">Item 2</a>
            <ul id="menu2" class="nav__submenu" role="menu" data-dropdown>
                <li class="nav__submenu__item">
                    <a href="#" class="nav__submenu__link">Item 1</a>
                </li>
                <li class="nav__submenu__item">
                    <a href="#" class="nav__submenu__link">Item 2</a>
                </li>
                <li class="nav__submenu__item">
                    <a href="#" class="nav__submenu__link">Item 3</a>
                </li>
            </ul>
        </li>
        <li class="nav__menu__item dropdown">
            <a href="#menu3" class="nav__menu__link" data-rel="dropdown">Item 3</a>
            <ul id="menu3" class="nav__submenu" role="menu" data-dropdown>
                <li class="nav__submenu__item">
                    <a href="#" class="nav__submenu__link">Item 1</a>
                </li>
                <li class="nav__submenu__item">
                    <a href="#" class="nav__submenu__link">Item 2</a>
                </li>
                <li class="nav__submenu__item">
                    <a href="#" class="nav__submenu__link">Item 3</a>
                </li>
            </ul>
        </li>
        <li class="nav__menu__item dropdown">
            <a href="#menu4" class="nav__menu__link" data-rel="dropdown">Item 4</a>
            <ul id="menu4" class="nav__submenu" role="menu" data-dropdown>
                <li class="nav__submenu__item">
                    <a href="#" class="nav__submenu__link">Item 1</a>
                </li>
                <li class="nav__submenu__item">
                    <a href="#" class="nav__submenu__link">Item 2</a>
                </li>
                <li class="nav__submenu__item">
                    <a href="#" class="nav__submenu__link">Item 3</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>

##How to use

Just add [data-rel=”dropdown”] to a link or any element with the [src] attribute and link to element who want toggles hidden it. The dropdown plugin toggling the ‘.dropdown–selected’ class and [data-selected] attribute on dropdown element.

##responsive

You can get more info about $slicer-breakpoints and $slicer-breakpoint-names in grid components section.

// Breakpoints
$slicer-breakpoints       : 0   400px   600px   800px   1050px;
$slicer-breakpoint-names  :  'a'     'b'     'c'     'd'      'e';

To use this component in a responsive project you have different options:

Breakpoint-slicer:

.dropdown {
    // Common styles

    @include to(c) {
        @include dropdown--stacked;
    }

    @include from(d) {
        @include dropdown--fluid;
    }

}

Default media query:

.dropdown {
    //Common styles

    @media (max-width: 799px) {
        @include dropdown--stacked;
    }

    @media (min-width: 800px) {
        @include dropdown--fluid;
    }

}

@include media-minwidth, a penguin mixin:

.dropdown {
    @include dropdown--stacked;

    @include media-minwidth('d') {
        // Custom styles
    }
}

##custom dropdown

You can create your own custom dropdown.

.dropdown--custom {
    @include dropdown--fluid;
    // Custom styles
}

##Animated

You can easily add CSS3 transition to dropdown when appears and disappears on the screen. You can do it through transition class. Check the next example:

.dropdown__menu {
  pointer-events: none;
  @include opacity(0);
  @include translate(0, -10px);
  @include transition(all, .3s);

  .transition & {
    pointer-events: auto;
    @include opacity(1);
    @include translate(0, 0);
  }

}