Личный кабинет OneBox CRM
Связаться с нами
+38 (067) 328-75-45
+38 (050) 324-46-54
Кабинет клиентаБаза знаний › Просмотр базы знаний

Вкладки

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

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



<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>

Пример


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

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


<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>

Пример


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

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


<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>

Пример