Карта покупок / Меню / Сниппеты Bootstrap

Версия: v1.0.1

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

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

Bootstrap: 3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавлено: 2015-11-29 в 20:34

Метка: 1582175710

⇄ ⇅

.mix{
 min-height:370px;
}

ul.dropdown-cart{
 min-width:250px;
 border: 2px solid #343434;
 padding: 2px;
 margin: 7px;
 margin-top: 11px;
}
ul.dropdown-cart li .item{
 display:block;
 padding:3px 10px;
 margin: 3px 0;
 
}
ul.dropdown-cart li .item:hover{
 background-color:#c3c5c5;
 
}
ul.dropdown-cart li .item:after{
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;
}

ul.dropdown-cart li .item-left{
 float:left;
}
ul.dropdown-cart li .item-left img,
ul.dropdown-cart li .item-left span.item-info{
 float:left;
}

/* - наша правка, косяк источника - */
ul.dropdown-cart li .item-left img {width:50px;height:50px}

ul.dropdown-cart li .item-left span.item-info{
 margin-left:10px; 
}
ul.dropdown-cart li .item-left span.item-info span{
 display:block;
}
ul.dropdown-cart li .item-right{
 float:right;
}
ul.dropdown-cart li .item-right button{
 margin-top:14px;
} 
</style>

<div class="mix">
<nav class="navbar navbar-inverse">
 <div class="container-fluid">
 <div class="navbar-header menuitem">
 <a class="navbar-brand" href="#">WebSiteName</a>
 </div>
 <div>
 <ul class="nav navbar-nav">
 <li class="active"><a href="#">Home</a></li>
 <li><a href="#">Menu Item 1</a></li>
 <li><a href="#">Menu Item 2</a></li>
 <li><a href="#">Menu Item 3</a></li>
 </ul>
 </div>
 <div> <ul class="nav navbar-nav navbar-right">
 <li class="dropdown">
 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"> <span class="fa fa-gift bigicon"></span> 4 - Items in Cart<span class="caret"></span></a>
 <ul class="dropdown-menu dropdown-cart" role="menu">
 <li>
 <span class="item">
 <span class="item-left">
 <img src="https://bootstraptema.ru/assets/img/avatar/logo-bt.png" alt="" />
 <span class="item-info">
 <span>Item name</span>
 <span>price: 27$</span>
 </span>
 </span>
 <span class="item-right">
 <button class="btn btn-danger fa fa-close"></button>
 </span>
 </span>
 </li>
<li>
 <span class="item">
 <span class="item-left">
 <img src="https://bootstraptema.ru/assets/img/avatar/logo-bt.png" alt="" />
 <span class="item-info">
 <span>Item name</span>
 <span>price: 3$</span>
 </span>
 </span>
 <span class="item-right">
 <button class="btn btn-danger fa fa-close"></button>
 </span>
 </span>
 </li>
 <li>
 <span class="item">
 <span class="item-left">
 <img src="https://bootstraptema.ru/assets/img/avatar/logo-bt.png" alt="" />
 <span class="item-info">
 <span>Item name</span>
 <span>price: 12$</span>
 </span>
 </span>
 <span class="item-right">
 <button class="btn btn-danger fa fa-close"></button>
 </span>
 </span>
 </li>
<li>
 <span class="item">
 <span class="item-left">
 <img src="https://bootstraptema.ru/assets/img/avatar/logo-bt.png" alt="" />
 <span class="item-info">
 <span>Item name</span>
 <span>price: 7$</span>
 </span>
 </span>
 <span class="item-right">
 <button class="btn btn-danger fa fa-close"></button>
 </span>
 </span>
 </li> 
 <li class="divider"></li>
 <li><a class="text-center" href="#">View Cart</a></li>
 </ul>
 </li>
 </ul>
 </div>
 </div>
</nav>
</div>

BootstrapTema

Карта покупок

Скриншот

Подробнее

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

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

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