Выпадающее горизонтальное меню Bootsnav / Меню / Сниппеты Bootstrap

Версия: v1.0.2

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

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

Bootstrap: 3, 4, 5

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

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

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

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

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

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

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

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

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

Авторство: Посмотреть

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

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

Теги: bootsnav, Snippet, Горизонтальное, menu, меню, сниппет, Bootstrap

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

Добавлено: 2017-08-28 в 15:49

Метка: 1566151657

⇄ ⇅

/* 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{
content: attr(alt);
padding: 15px;
font-size: 14px;
font-weight: 600;
color: #fff;
opacity: 0;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
transform: scale(1.2);
transition: all 0.3s ease 0s;
}
nav.navbar.bootsnav ul.nav > li:hover:before{
transform: scale(1);
opacity: 1;
}
nav.navbar.bootsnav ul.nav > li > a{
padding: 15px;
margin: 0;
color: #D5D6E2;
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,
nav.navbar.bootsnav ul.nav > li.on > a{ 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{
width: 100%;
font-weight: normal;
color: #555;
}
nav.navbar.bootsnav ul.nav > li > a{
color: #333 !important;
border-top: none;
}
nav.navbar.bootsnav ul.nav > li > a:hover{
color: #333;
}
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 alt="HOME"><a href="#">Home</a></li>
 <li alt="ABOUT US"><a href="#">About Us</a></li>
 <li class="dropdown" alt="SHORTCODES">
 <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" alt="PAGES">
 <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 alt="PORTFOLIO"><a href="#">Portfolio</a></li>
 <li alt="CONTACT US"><a href="#">Contact Us</a></li>
 </ul>
 </div>
 </nav>

</div>

BootstrapTema

Выпадающее горизонтальное меню Bootsnav

Скриншот

Подробнее

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

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

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