Вертикальное выпадающее меню 3 уровня / Меню / Сниппеты Bootstrap | BootstrapТема

1
2
3
4
5

Версия: v1.0

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

Категория: Меню

Bootstrap: 3

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

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

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

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

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

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

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

Рейтинг: 4.3 / 5 - 6 голосов

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

Авторство: http://u.to/cT0UDQ

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

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

Теги: меню, бутстрап, dropdown, мультименю, Bootstrap, menu, выпадающее меню, Snippet

Поделился: aTmpl

Добавлено: 2015-11-26 в 11:41

Метка: 1566071141

⇄ ⇅

<link rel="stylesheet" href="https://bootstraptema.ru/plugins/2015/bootstrap3/bootstrap.min.css" />
<style>
 .dropdown-submenu {
 position: relative;
 }
 
 .dropdown-submenu>.dropdown-menu {
 top: 0;
 left: 100%;
 margin-top: -6px;
 margin-left: -1px;
 -webkit-border-radius: 0 6px 6px 6px;
 -moz-border-radius: 0 6px 6px 6px;
 border-radius: 0 6px 6px 6px;
 }
 
 .dropdown-submenu:hover>.dropdown-menu {
 display: block;
 }
 
 .dropdown-submenu>a:after {
 display: block;
 content: " ";
 float: right;
 width: 0;
 height: 0;
 border-color: transparent;
 border-style: solid;
 border-width: 5px 0 5px 5px;
 border-left-color: #cccccc;
 margin-top: 5px;
 margin-right: -10px;
 }
 
 .dropdown-submenu:hover>a:after {
 border-left-color: #ffffff;
 }
 
 .dropdown-submenu.pull-left {
 float: none;
 }
 
 .dropdown-submenu.pull-left>.dropdown-menu {
 left: -100%;
 margin-left: 10px;
 -webkit-border-radius: 6px 0 6px 6px;
 -moz-border-radius: 6px 0 6px 6px;
 border-radius: 6px 0 6px 6px;
 }
</style>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
 <li><a href="#">Action</a></li>
 <li><a href="#">Another action</a></li>
 <li><a href="#">Something else here</a></li>
 <li class="divider"></li>
 <li class="dropdown-submenu">
 <a tabindex="-1" href="#">More options</a>
 <ul class="dropdown-menu">
 <li><a tabindex="-1" href="#">Second level</a></li>
 <li class="dropdown-submenu">
 <a href="#">More..</a>
 <ul class="dropdown-menu">
 <li><a href="#">3rd level</a></li>
 <li><a href="#">3rd level</a></li>
 </ul>
 </li>
 <li><a href="#">Second level</a></li>
 <li><a href="#">Second level</a></li>
 </ul>
 </li>
</ul>