Меню CSS с иконками / Меню / Сниппеты Bootstrap

Версия: v1.0.1

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

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

Bootstrap: 3

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

Язык: Русский

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

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

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

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

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

Рейтинг: 4.0 / 5 - 7 голосов

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

Авторство: http://jenrique7.github.io/bootstrap-vertical-menu/

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

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

Теги: Snippet, html, menu, анимация, меню, сниппет, Bootstrap

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

Добавлено: 2016-02-07 в 13:12

Метка: 1581669808

⇄ ⇅

.navbar-vertical-left ul.navbar-nav {
 width: 100%;
 height: 100%;
 display: table;
 margin: 0;
}

.navbar-vertical-left ul.navbar-nav:before,
.navbar-vertical-left ul.navbar-nav:after {
 display: none;
}

.navbar-vertical-left ul.navbar-nav > li {
 display: table-row;
 float: none;
}

.navbar-vertical-left ul.navbar-nav > li > a {
 display: table-cell;
 vertical-align: middle;
}

.navbar-vertical-left ul.navbar-nav > li > a > i.fa {
 margin-right: 20px;
}

/* Цвета */

.navbar-vertical-left {
 background: #34495e;
 color: #ecf0f1;
}

.navbar-vertical-left ul.navbar-nav > li > a {
 color: #ecf0f1;
}

.navbar-vertical-left ul.navbar-nav > li > a.one:hover,
.navbar-vertical-left ul.navbar-nav > li > a.one:active {
 background: rgb(58,36,83);
}

.navbar-vertical-left ul.navbar-nav > li > a.two:hover,
.navbar-vertical-left ul.navbar-nav > li > a.two:active {
 background: rgb(58,36,83);
}

.navbar-vertical-left ul.navbar-nav > li > a.tree:hover,
.navbar-vertical-left ul.navbar-nav > li > a.tree:active {
 background: rgb(67,41,97);
}

.navbar-vertical-left ul.navbar-nav > li > a.for:hover,
.navbar-vertical-left ul.navbar-nav > li > a.for:active {
 background: rgb(77,47,111);
}

.navbar-vertical-left ul.navbar-nav > li > a.five:hover,
.navbar-vertical-left ul.navbar-nav > li > a.five:active {
 background: rgb(86,53,125);
}

.navbar-vertical-left ul.navbar-nav > li > a.six:hover,
.navbar-vertical-left ul.navbar-nav > li > a.six:active {
 background: rgb(96,59,138);
}

.navbar-vertical-left ul.navbar-nav > li > a.selected {
 background: #d35400;
}

/* Анимация */

.navbar-vertical-left {
 -webkit-transition: -webkit-transform .3s;
 -moz-transition: -moz-transform .3s;
 transition: transform .3s;

-webkit-transform: translateX(-100px);
 -moz-transform: translateX(-100px);
 transform: translateX(-100px);
}
.navbar-vertical-left:hover {
 -webkit-transform: translateX(0px);
 -moz-transform: translateX(0px);
 transform: translateX(0px);
}

.navbar-vertical-left ul.navbar-nav {
 -webkit-transition: -webkit-transform .3s;
 -moz-transition: -moz-transform .3s;
 transition: transform .3s;

-webkit-transform: translateX(100px);
 -moz-transform: translateX(100px);
 transform: translateX(100px);
}

.navbar-vertical-left:hover ul.navbar-nav {
 -webkit-transform: translateX(0px);
 -moz-transform: translateX(0px);
 transform: translateX(0px);
}

/* Изменения для разрешений */

@media(max-width: 768px) {
 .navbar-vertical-left {
 position: fixed;
 top: auto;
 bottom: 0;
 height: auto;
 width: 100%;
 }

.navbar-vertical-left,
 .navbar-vertical-left ul.navbar-nav {
 -webkit-transition: none;
 -moz-transition: none;
 transition: none;
 -webkit-transform: none;
 -moz-transform: none;
 transform: none;
 }

.navbar-vertical-left ul.navbar-nav > li {
 display: table-cell;
 }

.navbar-vertical-left ul.navbar-nav > li > a {
 display: inline-block;
 width: 100%;
 text-align: center;
 height: 50px;
 line-height: 30px;
 }

.navbar-vertical-left ul.navbar-nav > li > a > i.fa {
 margin: 0;
 }

.navbar-vertical-left ul.navbar-nav > li > a > span {
 display: none;
 }
}
</style>
<div class="container">
<div class="row">
<nav class="navbar navbar-vertical-left">
 <ul class="nav navbar-nav">
 <li>
 <a href="#" class="one">
 <i class="fa fa-fw fa-lg fa-home"></i> 
 <span>Главная</span>
 </a>
 </li>
 <li>
 <a href="#" class="two">
 <i class="fa fa-fw fa-lg fa-star"></i> 
 <span>Топ 100</span>
 </a>
 </li>
 <li>
 <a href="#" class="tree">
 <i class="fa fa-fw fa-lg fa-newspaper-o"></i> 
 <span>Шаблоны</span>
 </a>
 </li>
 <li>
 <a href="#" class="for">
 <i class="fa fa-fw fa-lg fa-cog"></i> 
 <span>Плагины</span>
 </a>
 </li>
 <li>
 <a href="#" class="five">
 <i class="fa fa-fw fa-lg fa-code"></i> 
 <span>Сниппеты</span>
 </a>
 </li>
 <li>
 <a href="#" class="six">
 <i class="fa fa-fw fa-lg fa-money"></i> 
 <span>Заработать</span>
 </a>
 </li>
 </ul>
 </nav>

</div>
</div>

BootstrapTema

Меню CSS с иконками

Скриншот

Подробнее

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

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

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