Name: Горизонтальное 4 уровневое меню Bootstrap
Item: Горизонтальное 4 уровневое меню Bootstrap
Author: BootstrapТема

Версия: v1.0.1

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

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

Bootstrap: 3

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

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

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

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

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

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

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

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

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

Авторство: https://goo.gl/ejovGo

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

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

Теги: Выпадающее, меню, bootsnav, сниппет, Bootstrap, menu, Snippet, многоуровневое

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

Добавлено: 2017-07-22 в 12:34

Метка: 1566151981

⇄ ⇅

/* demo menu */
nav.navbar.bootsnav{
 border: none;
 background: none;
 margin-bottom: 150px;
}
nav.navbar.bootsnav ul.nav > li{
 margin-right: 10px;
}
nav.navbar.bootsnav ul.nav > li:before,
nav.navbar.bootsnav ul.nav > li:after{
 content: "";
 width: 2px;
 height: 100%;
 background: #fff;
 position: absolute;
 top: 0;
 opacity: 0.3;
 transition: all 0.3s ease 0s;
}
nav.navbar.bootsnav ul.nav > li:before{ left: 0; }
nav.navbar.bootsnav ul.nav > li:after{ right: 0; }
nav.navbar.bootsnav ul.nav > li:hover:before,
nav.navbar.bootsnav ul.nav > li:hover:after{
 width: 100%;
}
nav.navbar.bootsnav ul.nav > li > a{
 padding: 15px;
 margin: 0;
 color: #fff;
 text-transform: uppercase;
 z-index: 1;
 transition: all 0.5s ease 0s;
}
nav.navbar.bootsnav ul.nav > li.dropdown > a{
 padding: 15px 30px 15px 15px;
}
nav.navbar.bootsnav ul.nav > li > a:hover{ color: #fff; }
nav.navbar.bootsnav ul.nav > li.dropdown > a.dropdown-toggle:after{
 position: absolute;
 margin: 0 0 0 7px;
}
nav.navbar.bootsnav ul.nav > li.dropdown > ul{
 top: 120%;
 transition: all 0.8s ease 0s;
}
nav.navbar.bootsnav ul.nav > li.dropdown.on > ul{
 top: 100%;
}
.dropdown-menu.multi-dropdown{
 position: absolute;
 left: -100% !important;
}
nav.navbar.bootsnav li.dropdown ul.dropdown-menu{
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 border: none;
}
@media only screen and (max-width:990px){
 .dropdown-menu.multi-dropdown{ left: 0 !important; }
 nav.navbar.bootsnav .navbar-toggle{
 background: none;
 color: #fff;
 }
 nav.navbar.bootsnav ul.nav > li{
 margin-right: 0;
 }
 nav.navbar.bootsnav ul.nav > li:before,
 nav.navbar.bootsnav ul.nav > li:after{
 background: #dca342;
 height: 52px;
 }
 nav.navbar.bootsnav.navbar-mobile ul.nav > li > a{
 padding: 15px;
 text-align: center;
 }
 nav.navbar.bootsnav ul.nav > li > a{
 color: #333;
 }
 nav.navbar.bootsnav ul.nav > li > a:hover{
 color: #fff;
 }
 nav.navbar.bootsnav ul.nav > li.dropdown > ul{ top: 100%; }
}
</style>

<nav class="navbar navbar-default navbar-mobile bootsnav">
 <div class="navbar-header">
 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
 <i class="fa fa-bars"></i>
 </button>
 </div>
 <div class="collapse navbar-collapse" id="navbar-menu">
 <ul class="nav navbar-nav" data-in="fadeInDown" data-out="fadeOutUp">
 <li><a href="#">Home</a></li>
 <li><a href="#">About Us</a></li>
 <li class="dropdown">
 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Shortcodes</a>
 <ul class="dropdown-menu">
 <li><a href="#">Custom Menu</a></li>
 <li><a href="#">Custom Menu</a></li>
 <li class="dropdown">
 <a href="#" class="dropdown-toggle" data-toggle="dropdown" >Sub Menu</a>
 <ul class="dropdown-menu">
 <li><a href="#">Custom Menu</a></li>
 <li><a href="#">Custom Menu</a></li>
 <li class="dropdown">
 <a href="#" class="dropdown-toggle" data-toggle="dropdown" >Sub Menu</a>
 <ul class="dropdown-menu multi-dropdown">
 <li><a href="#">Custom Menu</a></li>
 <li><a href="#">Custom Menu</a></li>
 <li><a href="#">Custom Menu</a></li>
 <li><a href="#">Custom Menu</a></li>
 </ul>
 </li>
 <li><a href="#">Custom Menu</a></li>
 </ul>
 </li>
 <li><a href="#">Custom Menu</a></li>
 <li><a href="#">Custom Menu</a></li>
 <li><a href="#">Custom Menu</a></li>
 <li><a href="#">Custom Menu</a></li>
 </ul>
 </li>
 <li class="dropdown">
 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Pages</a>
 <ul class="dropdown-menu">
 <li><a href="#">Custom Menu</a></li>
 <li><a href="#">Custom Menu</a></li>
 <li class="dropdown">
 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Sub Menu</a>
 <ul class="dropdown-menu">
 <li><a href="#">Custom Menu</a></li>
 <li><a href="#">Custom Menu</a></li>
 <li class="dropdown">
 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Sub Menu</a>
 <ul class="dropdown-menu multi-dropdown">
 <li><a href="#">Custom Menu</a></li>
 <li><a href="#">Custom Menu</a></li>
 <li><a href="#">Custom Menu</a></li>
 <li><a href="#">Custom Menu</a></li>
 </ul>
 </li>
 <li><a href="#">Custom Menu</a></li>
 </ul>
 </li>
 <li><a href="#">Custom Menu</a></li>
 <li><a href="#">Custom Menu</a></li>
 <li><a href="#">Custom Menu</a></li>
 <li><a href="#">Custom Menu</a></li>
 </ul>
 </li>
 <li><a href="#">Portfolio</a></li>
 <li><a href="#">Contact Us</a></li>
 </ul>
 </div>
 </nav>

</div>

Всего комментариев: 1
Порядок вывода комментариев: 0 1 BootstrapТема • 06:58, 2017-11-13 Для направления меню в право RTL используйте базовый класс .navbar-right: Код <ul class="nav navbar-nav navbar-right" data-in="fadeInDown" data-out="fadeOutUp"> http://bootsnav.danurstrap.com/nav-menu-right.html

BootstrapTema

Горизонтальное 4 уровневое меню Bootstrap

Скриншот

Подробнее

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

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