Адаптивное блок меню 4 уровня Slinky / Меню / Сниппеты Bootstrap

Адаптивное блок меню 4 уровня Slinky

Четырёхуровневое адаптивное меню для установки в блок вёрстки Bootstrap, 4 уровня вложения и простота настроек, скачайте архив с меню бесплатно.

* Параметры внешнего вида установлены в минимально возможном виде, скачать меню можно в прикреплении №2.

Версия: v1.0

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

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

Для Bootstrap: 3

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

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

Вес файла: 3.4 Kb

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

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

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

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

Прикреплён файл №1: /_sf/7/792.html

Прикреплён файл №2: /stuff/0-0-0-792-20

Скачали бесплатно: 122 раз

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

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

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

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

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

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

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

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

Добавлено: 2016-03-25 в 14:45

Метка: 1581616214

⇄ ⇅

/* Default theme */

.slinky-menu a {
 background-color: rgba(0, 0, 0, 0.5);
 border: none;
 color: #fff;
 padding: 1em;
}
.slinky-menu a:hover {
 background-color: rgba(0, 0, 0, 0.8);
 color: #fff;
}
.slinky-menu a.next:after {
 content: '\276f';
 margin-left: 1em;
 float: right;
}
.slinky-menu a.back:before {
 content: '\276e';
 margin-right: 1em;
 float: left;
}
</style>

<li>
<a href="#">Свободный пункт</a>
</li>

<a href="#">Пункт меню 1</a>
<ul>
<li>
<a href="#">Вложение 1.1</a>
<ul>
<li>
<a href="#">Вложение 1.1.1</a>
<ul>
<li>
<a href="#">Вложение 1.1.1.1</a>
</li>
<li>
<a href="#">Вложение 1.1.1.2</a>
</li>
<li>
<a href="#">Вложение 1.1.1.3</a>
</li>
<li>
<a href="#">Вложение 1.1.1.4</a>
</li>
</ul>
</li>
</ul>
</li>

<li>
<a href="#">Вложение 1.2</a>
<ul>
<li>
<a href="#">Вложение 1.2.1</a>
<ul>
<li>
<a href="#">Вложение 1.2.1.1</a>
</li>
<li>
<a href="#">Вложение 1.2.1.2</a>
</li>
</ul>
</li>
</ul>
</li>

<li>
<a href="#">Вложение 1.3</a>
<ul>
<li>
<a href="#">Вложение 1.3.1</a>
<ul>
<li>
<a href="#">Вложение 1.3.1.1</a>
</li>
<li>
<a href="#">Вложение 1.3.1.2</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>

</li>

<a href="#">Пункт меню 2</a>
<ul>
<li>
<a href="#">Вложение 2.1</a>
<ul>
<li>
<a href="#">Вложение 2.1.1</a>
<ul>
<li>
<a href="#">Вложение 2.1.1.1</a>
</li>
</ul>
</li>
</ul>
</li>

<li>
<a href="#">Вложение 2.2</a>
<ul>
<li>
<a href="#">Вложение 2.2.1</a>
<ul>
<li>
<a href="#">Вложение 2.2.1.1</a>
</li>
<li>
<a href="#">Вложение 2.2.1.2</a>
</li>
</ul>
</li>
</ul>
</li>

<li>
<a href="#">Вложение 2.3</a>
<ul>
<li>
<a href="#">Вложение 2.3.1</a>
<ul>
<li>
<a href="#">Вложение 2.3.1.1</a>
</li>
<li>
<a href="#">Вложение 2.3.1.2</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>

</li>

<a href="#">Пункт меню 3</a>
<ul>
<li>
<a href="#">Вложение 3.1</a>
<ul>
<li>
<a href="#">Вложение 3.1.1</a>
<ul>
<li>
<a href="#">Вложение 3.1.1.1</a>
</li>
</ul>
</li>
</ul>
</li>

<li>
<a href="#">Вложение 3.2</a>
<ul>
<li>
<a href="#">Вложение 3.2.1</a>
<ul>
<li>
<a href="#">Вложение 3.2.1.1</a>
</li>
<li>
<a href="#">Вложение 3.2.1.2</a>
</li>
</ul>
</li>
</ul>
</li>

<li>
<a href="#">Вложение 3.3</a>
<ul>
<li>
<a href="#">Вложение 3.3.1</a>
<ul>
<li>
<a href="#">Вложение 3.3.1.1</a>
</li>
<li>
<a href="#">Вложение 3.3.1.2</a>
</li>
<li>
<a href="#">Вложение 3.3.1.3</a>
</li>
<li>
<a href="#">Вложение 3.3.1.4</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>

</li>

</ul>
</div>

</div>

<div class="col-md-6">
<h3 class="text-center">Параметры меню</h3>
<pre><code>
label 'Назад' Вкладка возврата

speed 300 Скорость анимации

resize true Изменение высоты блока меню
</code></pre>
</div>
</div>
</div>

BootstrapTema

Адаптивное блок меню 4 уровня Slinky

Скриншот

Подробнее

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

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

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