Фото в меню при наведении / Меню / Сниппеты Bootstrap

Версия: v1.0.1

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

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

Bootstrap: 3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавлено: 2017-05-15 в 15:20

Метка: 1566191630

⇄ ⇅

<nav class="navbar navbar-default" role="navigation">
 <div class="container">
 
 <div class="navbar-header">
 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#dropdown-thumbnail-preview">
 <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" id="dropdown-thumbnail-preview">
 <ul class="nav navbar-nav">
 <li class="active"><a href="#">Link</a></li>
 <li class="dropdown thumb-dropdown">
 <a href="#" class="dropdown-toggle" data-toggle="dropdown">My Frends <span class="caret"></span></a>
 <ul class="dropdown-menu" role="menu">
 <li role="presentation" class="dropdown-header">Only Photo</li>
 <li>
 <a href="#">
 Frend one 
 <div class="thumbnail">
 <img class="img-responsive" src="https://bootstraptema.ru/snippets/icons/2016/mia/1.png">
 </div>
 </a>
 </li>
 <li>
 <a href="#">
 Frend two 
 <div class="thumbnail">
 <img class="img-responsive" src="https://bootstraptema.ru/snippets/icons/2016/mia/2.png">
 </div>
 </a>
 </li>
 <li>
 <a href="#">
 Frend three 
 <div class="thumbnail">
 <img class="img-responsive" src="https://bootstraptema.ru/snippets/icons/2016/mia/3.png">
 </div>
 </a>
 </li>
 <li class="divider"></li>
 <li role="presentation" class="dropdown-header">Photo and Description</li>
 <li>
 <a href="#">
 My photo 
 <div class="thumbnail">
 <img class="img-responsive" src="https://bootstraptema.ru/snippets/icons/2016/mia/4.png">
 <div class="caption">
 <p class="text-center">My description for photo</p>
 </div>
 </div>
 </a>
 </li>
 </ul>
 </li>
 </ul>
 <form class="navbar-form navbar-left" role="search">
 <div class="form-group">
 <input type="text" class="form-control" placeholder="Search">
 </div>
 <button type="submit" class="btn btn-default">Submit</button>
 </form>
 <ul class="nav navbar-nav navbar-right">
 <li><a href="#">Link</a></li>
 <li class="dropdown">
 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
 <ul class="dropdown-menu" role="menu">
 <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><a href="#">Separated link</a></li>
 </ul>
 </li>
 </ul>
 </div>
 </div>
</nav>

BootstrapTema

Фото в меню при наведении

Скриншот

Подробнее

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

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

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