Angular Aside Menu / AngularJS / Сниппеты Bootstrap

Версия: v1.0

Каталог: Сниппеты Bootstrap

Категория: AngularJS

Bootstrap: 3, 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Английский

Уникальный ID: 1096

Количество символов:

Посмотрели: 3870 раз

Помощь: установка & настройка

Прикреплён файл №1: /_sf/10/1096.js

Прокомментировали: 0 раз

Рейтинг: 4.6 / 5 - 8 голосов

Тип лицензии: CC BY 4.0

Авторство: http://goo.gl/wMxVGV

Информация: Пользователям

Информация: Правообладателям

Теги: angularjs, Snippet, menu, сниппет, ангуляр, Angular, Bootstrap, ангулар, html

Поделился: BootstrapТема

Добавлено: 2016-06-08 в 15:01

Метка: 1581147098

⇄ ⇅

<aside-menu id="sol1" side="left" width="400" is-backdrop="true" push-content="true">
 <ul class="list-group">
 <li class="list-group-item">Cras justo odio</li>
 <li class="list-group-item">Dapibus ac facilisis in</li>
 <li class="list-group-item">Morbi leo risus</li>
 <li class="list-group-item">Porta ac consectetur ac</li>
 <li class="list-group-item">Vestibulum at eros</li>
 </ul>
</aside-menu>
<aside-menu id="sol2" side="left" width="400" is-backdrop="true" push-content="false">
 <ul class="list-group">
 <li class="list-group-item">Cras justo odio</li>
 <li class="list-group-item">Dapibus ac facilisis in</li>
 <li class="list-group-item">Morbi leo risus</li>
 <li class="list-group-item">Porta ac consectetur ac</li>
 <li class="list-group-item">Vestibulum at eros</li>
 </ul>
</aside-menu>
<aside-menu id="sag1" side="right" width="240" is-backdrop="false" push-content="true">
 <ul class="list-group">
 <li class="list-group-item">Cras justo odio</li>
 <li class="list-group-item">Dapibus ac facilisis in</li>
 <li class="list-group-item">Morbi leo risus</li>
 <li class="list-group-item">Porta ac consectetur ac</li>
 <li class="list-group-item">Vestibulum at eros</li>
 </ul>
</aside-menu>
<aside-menu id="sag2" side="right" width="240" is-backdrop="false" push-content="false">
 <ul class="list-group">
 <li class="list-group-item">aaa</li>
 <li class="list-group-item">asa</li>
 <li class="list-group-item">sds</li>
 <li class="list-group-item">Porta ac consectetur ac</li>
 <li class="list-group-item">Vestibulum at eros</li>
 </ul>
</aside-menu>

<aside-menu-content>
<ul class="nav nav-pills" style="display: table; margin: 250px auto">
 <li class="nav-item">
 <a href="#" aside-menu-toggle="sol1" class="btn btn-default">Left Menu (Push Content & Backdrop)</a>
 </li>
 <li class="nav-item">
 <a href="#" aside-menu-toggle="sol2" class="btn btn-default">Left (Backdrop)</a>
 </li>
 <li class="nav-item">
 <a href="#" aside-menu-toggle="sag1" class="btn btn-default">Right Menu (Push Content)</a>
 </li>
 <li class="nav-item">
 <a href="#" aside-menu-toggle="sag2" class="btn btn-default">Right Menu</a>
 </li>
</ul>
</aside-menu-content>

</div>
 </div>

BootstrapTema

Angular Aside Menu

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0