Bootstrap Mega Menu Images / Меню / Сниппеты Bootstrap

Версия: v1.0.1

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

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

Bootstrap: 3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавлено: 2017-05-03 в 07:53

Метка: 1566192067

⇄ ⇅

/* style menu */
.navbar-brand { 
 width: 70px;
 height: 50px;
 background: inherit;
 background-size: 50px; 
}
.nav-tabs {
 display: inline-block;
 border-bottom: none;
 padding-top: 15px;
 font-weight: bold;
}
.nav-tabs > li > a, 
.nav-tabs > li > a:hover, 
.nav-tabs > li > a:focus, 
.nav-tabs > li.active > a, 
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
 border: none;
 border-radius: 0;
}
.nav-list { border-bottom: 1px solid #eee; }
.nav-list > li { 
 padding: 20px 15px 15px;
 border-left: 1px solid #eee; 
}
.nav-list > li:last-child { border-right: 1px solid #eee; }
.nav-list > li > a:hover { text-decoration: none; }
.nav-list > li > a > span {
 display: block;
 font-weight: bold;
 text-transform: uppercase;
}
.mega-dropdown { position: static !important; }
.mega-dropdown-menu {
 padding: 20px 15px 15px;
 text-align: center;
 width: 100%;
}
.tab-pane ul li img { max-width: 120px }
</style>

<div class="navbar-header">
 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-megadropdown-tabs">
 <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" id="bs-megadropdown-tabs">
 <ul class="nav navbar-nav">
 <li><a href="#">Link 1</a></li>
 <li><a href="#">Link 2</a></li>
 <li class="dropdown mega-dropdown active">
 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Mega Dropdown <span class="caret"></span></a> 
 <div class="dropdown-menu mega-dropdown-menu">
 <div class="container-fluid">

<div class="tab-pane active" id="img1">
 <ul class="nav-list list-inline">
 <li><a href="#"><img src="https://bootstraptema.ru/snippets/icons/2016/mia/1.png"><span>image 1</span></a></li>
 <li><a href="#"><img src="https://bootstraptema.ru/snippets/icons/2016/mia/2.png"><span>image 2</span></a></li>
 <li><a href="#"><img src="https://bootstraptema.ru/snippets/icons/2016/mia/3.png"><span>image 3</span></a></li>
 <li><a href="#"><img src="https://bootstraptema.ru/snippets/icons/2016/mia/4.png"><span>image 4</span></a></li>
 <li><a href="#"><img src="https://bootstraptema.ru/snippets/icons/2016/mia/5.png"><span>image 5</span></a></li>
 <li><a href="#"><img src="https://bootstraptema.ru/snippets/icons/2016/mia/6.png"><span>image 6</span></a></li>
 </ul>
 </div>

<div class="tab-pane" id="img2">
 <ul class="nav-list list-inline">
 <li><a href="#"><img src="https://bootstraptema.ru/snippets/icons/2016/mia/7.png"><span>image 7</span></a></li>
 <li><a href="#"><img src="https://bootstraptema.ru/snippets/icons/2016/mia/8.png"><span>image 8</span></a></li>
 <li><a href="#"><img src="https://bootstraptema.ru/snippets/icons/2016/mia/9.png"><span>image 9</span></a></li>
 <li><a href="#"><img src="https://bootstraptema.ru/snippets/icons/2016/mia/10.png"><span>image 10</span></a></li> 
 </ul>
 </div>

<div class="tab-pane" id="img3">
 <ul class="nav-list list-inline">
 <li><a href="#"><img src="https://bootstraptema.ru/snippets/icons/2016/mia/11.png"><span>image 11</span></a></li>
 <li><a href="#"><img src="https://bootstraptema.ru/snippets/icons/2016/mia/12.png"><span>image 12</span></a></li>
 <li><a href="#"><img src="https://bootstraptema.ru/snippets/icons/2016/mia/13.png"><span>image 13</span></a></li>
 <li><a href="#"><img src="https://bootstraptema.ru/snippets/icons/2016/mia/14.png"><span>image 14</span></a></li>
 <li><a href="#"><img src="https://bootstraptema.ru/snippets/icons/2016/mia/15.png"><span>image 15</span></a></li>
 <li><a href="#"><img src="https://bootstraptema.ru/snippets/icons/2016/mia/16.png"><span>image 16</span></a></li>
 </ul>
 </div>

</div>

<ul class="nav nav-tabs" role="tablist">
 <li class="active"><a href="#img1" role="tab" data-toggle="tab">Images 1</a></li>
 <li><a href="#img2" role="tab" data-toggle="tab">Images 2</a></li>
 <li><a href="#img3" role="tab" data-toggle="tab">Images 3</a></li>
 </ul> 
 </div> 
 </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">Search</button>
 </form>
 <ul class="nav navbar-nav navbar-right">
 <li><a href="#">Link 3</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="#">Link</a></li>
 </ul>
 </li>
 </ul>
 </div>

 </div>

</nav>
<div class="container">
 <div class="well">
<h2 class="text-center">Bootstrap Mega Menu Images</h2>
<div class="text-center">+</div> 
<h3 class="text-center">Tab Control</h3> 
 </div>
</div>

BootstrapTema

Bootstrap Mega Menu Images

Скриншот

Подробнее

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

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

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