Вкладки

Стандартный блок вкладок

Зачастую разрабатывая функционал, возникает потребность разбить функционал на вкладки. Для этого нужна html конструкция ссылок, которые будут визуально представлять пользователю блок вкладок.
Ниже представлен сниппет, который предназначен для этого.
Для обозначения активной вкладки, добавьте одной из ссылок класс

<div class="nb-block-tabs">
    <div class="tab-element">
        <a class="selected" href="#">Tab name</a>
    </div>
    <div class="tab-element">
        <a href="#">Tab name</a>
    </div>
    <div class="tab-element">
        <a href="#">Tab name</a>
    </div>
    <div class="tab-element">
        <a href="#">Tab name</a>
    </div>
    <div class="clear"></div>
</div>

Фиксированный блок вкладок

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

<div class="nb-top-nav-place js-top-nav-buffer"></div>
<div class="nb-top-nav js-top-nav">
    <div class="nb-block-tabs">
        <div class="tab-element">
            <a class="selected" href="#">Tab name</a>
        </div>
        <div class="tab-element">
            <a href="#">Tab name</a>
        </div>
        <div class="tab-element">
            <a href="#">Tab name</a>
        </div>
        <div class="tab-element">
            <a href="#">Tab name</a>
        </div>
        <div class="clear"></div>
    </div>
</div>

Слайд блок вкладок

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

<div class="nb-block-tabs js-slide-tabs">
    <div class="tab-element">
        <a class="selected" href="#">Tab name</a>
    </div>
    <div class="tab-element">
        <a href="#">Tab name</a>
    </div>
    <div class="tab-element">
        <a href="#">Tab name</a>
    </div>
    <div class="tab-element">
        <a href="#">Tab name</a>
    </div>
    <span class="hover"></span>
    <div class="clear"></div>
</div>