Версия: v1.0

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

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

Bootstrap: 3

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

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

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

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

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

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

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

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

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

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

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

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

Теги: Snippet, menu, адаптивное, сниппет, Bootstrap, Responsive, megamenu, html, меню

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

Добавлено: 2017-03-24 в 10:05

Метка: 1567147024

⇄ ⇅

<div class="container">
 <nav class="navbar navbar-default">
 <div class="navbar-header">
 <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-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="#">БелоеМегаМеню</a>
 </div>

<div class="collapse navbar-collapse js-navbar-collapse">
 <ul class="nav navbar-nav">
 <li class="dropdown mega-dropdown">
 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Выбор мебели <span class="glyphicon glyphicon-chevron-down pull-right"></span></a>

<ul class="dropdown-menu mega-dropdown-menu row">
 <li class="col-sm-3">
 <ul>
 <li class="dropdown-header">Новые поступления</li>
 <div id="myCarousel" class="carousel slide" data-ride="carousel">
 <div class="carousel-inner">
 <div class="item active">
 <a href="#"><img src="https://bootstraptema.ru/snippets/menu/2017/wmm/1.jpg" class="img-responsive" alt="Кухня"></a>
 <h4><small>Оригинальный набор кухни</small></h4>
 <button class="btn btn-primary" type="button">3999 €</button>
 <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> В Избранное</button>
 </div>
 
 <div class="item">
 <a href="#"><img src="https://bootstraptema.ru/snippets/menu/2017/wmm/2.jpg" class="img-responsive" alt="Спальня"></a>
 <h4><small>Оригинальный набор спальни</small></h4>
 <button class="btn btn-primary" type="button">2444 €</button>
 <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> В Избранное</button>
 </div>
 
 <div class="item">
 <a href="#"><img src="https://bootstraptema.ru/snippets/menu/2017/wmm/3.jpg" class="img-responsive" alt="Кровать"></a>
 <h4><small>Оригинальная кровать</small></h4>
 <button class="btn btn-primary" type="button">999 €</button>
 <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> В Избранное</button>
 </div>
 
 </div>
 
 </div>
 
 <li class="divider"></li>
 <li><a href="#">Вся коллекция <span class="glyphicon glyphicon-chevron-right pull-right"></span></a></li>
 </ul>
 </li>
 <li class="col-sm-3">
 <ul>
 <li class="dropdown-header">Спальни</li>
 <li><a href="#">Новые</a></li>
 <li><a href="#">Популярные</a></li>
 <li><a href="#">Эксклюзивные</a></li>
 <li><a href="#">Уценённые</a></li>
 <li class="divider"></li>
 <li class="dropdown-header">Кухни</li>
 <li><a href="#">Новые</a></li>
 <li><a href="#">Популярные</a></li>
 <li><a href="#">Эксклюзивные</a></li>
 <li><a href="#">Уценённые</a></li>
 </ul>
 </li>
 <li class="col-sm-3">
 <ul>
 <li class="dropdown-header">Прихожие</li>
 <li><a href="#">Новые</a></li>
 <li><a href="#">Популярные</a></li>
 <li><a href="#">Эксклюзивные</a></li>
 <li><a href="#">Уценённые</a></li>
 <li class="divider"></li>
 <li class="dropdown-header">Детские</li>
 <li><a href="#">Новые</a></li>
 <li><a href="#">Популярные</a></li>
 <li><a href="#">Эксклюзивные</a></li>
 <li><a href="#">Уценённые</a></li>
 </ul>
 </li>
 <li class="col-sm-3">
 <ul>
 <li class="dropdown-header">Доставка</li>
 <li><a href="#">По стране</a></li>
 <li><a href="#">По области</a></li>
 <li><a href="#">По городу</a></li>
 <li><a href="#">По району</a></li>
 <li class="divider"></li>
 <li class="dropdown-header">Получать новости</li>
 <form class="form" role="form">
 <div class="form-group">
 <label class="sr-only" for="email">E-mail адрес</label>
 <input type="email" class="form-control" id="email" placeholder="Ваш E-mail">
 </div>
 <button type="submit" class="btn btn-primary btn-block">Подписаться</button>
 </form>
 </ul>
 </li>
 </ul>

</li>
 </ul>

</div>
 
 </nav>

</div>

Всего комментариев: 1
Порядок вывода комментариев: 0 1 Ник™ • 16:26, 2019-11-16 thank you, very good site!

BootstrapTema

Белое Мега Меню Bootstrap

Скриншот

Подробнее

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

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