Горизонтальное выпадающее меню / Меню / Сниппеты Bootstrap | BootstrapТема

1
2
3
4
5

Версия: v1.0.1

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

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

Bootstrap: 3

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

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

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

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

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

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

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

Рейтинг: 5.0 / 5 - 4 голосов

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

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

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

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

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

Поделился: aTmpl

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

Метка: 1582179173

⇄ ⇅

<link rel="stylesheet" href="https://bootstraptema.ru/plugins/2015/bootstrap3/bootstrap.min.css" />
<script src="https://bootstraptema.ru/assets/js/jquery-1.10.2.js"></script>
<script src="https://bootstraptema.ru/plugins/2015/bootstrap3/bootstrap.min.js"></script>
<style>
 .dropdown-menu {
 width: 100%;
 position: fixed;
 top: 50px;
 left: 0;
 z-index: 1000;
 display: none;
 float: left;
 min-width: 160px;
 padding: 5px 0;
 margin: 0 auto;
 text-align: left;
 }
 
 .dropdown-menu li {
 display: inline-block;
 }
 
 .dropdown-menu li.dropdown .dropdown-menu {
 top: 210px;
 }
 
 .dropdown-menu li.dropdown {
 background: #ccc;
 }
</style>
<div class="navbar navbar-default navbar-fixed-top">
 <div class="container-fluid">
 <div class="navbar-header">
 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 <a class="navbar-brand" href="#">Brand</a>
 </div>
 <div class="collapse navbar-collapse">
 <ul class="nav navbar-nav">
 <li class="dropdown">
 
 <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/">Home <span class="caret"></span></a>
 <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
 <li role="presentation" class="divider"></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
 </ul>
 </li>
 <li class="dropdown">
 <a id="dLabel2" role="button" data-toggle="dropdown" href="#">About <span class="caret"></span></a>
 <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel2">
 <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">menu item 1</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">menu item 2</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">menu item 3</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
 </ul>
 </li>
 <li><a href="#contact">Contact</a></li>
 </ul>
 </div>
 
 </div>
</div>