Выпадающие опции

Выпадающие опции - блок с элементами управления, который может использовать как в отдельном блоке, таки внутри контента.
Выпадающий блок позволяет скрывать функционал за иконкой, позволяет экономить место на странице.
Пользователю достаточно навести курсор мыши на иконку, чтобы выбрать дополнительные опции.
Такой блок может быть использован, к примеру, для выбора действия из нескольких возможных вариантов.

Стандартные опции

<div class="ob-options-dropdown">
    <div class="toggle"></div>
    <div class="dropdown">
        <a class="nowrap" href="#">Example link</a>
        <a class="nowrap" href="#">Example link</a>
        <a class="nowrap" href="#">Example link</a>
        <a class="nowrap" href="#">Example link</a>
    </div>
</div>

<div class="ob-options-dropdown">
    <div class="toggle"></div>
    <div class="dropdown right">
        <a class="nowrap" href="#">Example link</a>
        <a class="nowrap" href="#">Example link</a>
        <a class="nowrap" href="#">Example link</a>
        <a class="nowrap" href="#">Example link</a>
    </div>
</div>

Выпадающий блок может позиционироваться как слева так и справа. Для позиционирования выпадающего блока справа необходимо использовать модификатор для блока dropdown.

Опции в виде кнопки

При нажатии на кнопку появляются опции для выбора.
Цвет кнопки можно менять аналогично, как и цвет в стандартных кнопках.
Данный тип выпадающих опций удобен для использования в формах.

<div class="ob-button-dropdown">
    <a class="ob-button" href="javascript:void(0);">Button name</a>
    <div class="dropdown">
        <a class="nowrap" href="javascript:void(0);">Option 1</a>
        <a class="nowrap" href="javascript:void(0);">Option 2</a>
        <a class="nowrap" href="javascript:void(0);">Option 3</a>
        <a class="nowrap" href="javascript:void(0);">Option 4</a>
        <a class="nowrap" href="javascript:void(0);">Option 5</a>
    </div>
</div>