Большой обзор красивых многоуровневых меню с codepen / mr. Gefest corporate blog / Habr

Хабр, привет!

На Сodepen появляется много хороших решений от разных специалистов, и я считаю, что лучшие из них нужно собирать в одном месте. Поэтому 2 года назад начал сохранять у себя на компьютере интересные скрипты по разным тематикам.

Раньше я их выкладывал в группе продукта облачной IDE mr. Gefest, это были сборки из 5-8 решений. Но теперь у меня стало скапливаться по 15-30 скриптов в разных тематиках (кнопки, меню, подсказки и так далее).

Такие большие наборы следует показывать большему числу специалистов. Поэтому выкладываю их на Хабр. Надеюсь они будут Вам полезны.

В этом обзоре мы рассмотрим многоуровневые меню.

Flat Horizontal Navigation

Красивая навигационная панель с плавно появляющимся подменю. Код хорошо структурирован, используется js. Судя по использованным возможностям, работает в ie8+.
http://codepen.io/andytran/pen/kmAEy

Material Nav Header w/ Aligned Dropdowns

Адаптивная панель ссылок с двухколонным подменю. Все сделано на css и html. Применены css3 селекторы, которые не поддерживаются в ie8.
http://codepen.io/colewaldrip/pen/KpRwgQ
 
Smooth Accordion Dropdown Menu

Стильное вертикальное меню с плавно раскрывающимися элементами. Используется transition, transform js-код.
http://codepen.io/fainder/pen/AydHJ
 
Pure CSS Dark Inline Navigation Menu

Темная вертикальная навигационная панель с иконками из ionicons. Применяется javascript. В ie8 скорее всего будет работать без анимации.
http://codepen.io/3lv3n_snip3r/pen/XbddOO
 
Pure CSS3 Mega Dropdown Menu With Animation

Стильное меню с двумя форматами вывода: горизонтальным и вертикальным. Используются иконки и css3-анимация. В ie8 точно будет ужасно выглядеть, но зато в других браузерах все круто.
Ссылка на вертикальную: http://codepen.io/rizky_k_r/full/sqcAn/
Ссылка на горизонтальную: http://codepen.io/rizky_k_r/pen/xFjqs
 
CSS3 Dropdown Menu

Горизонтальное меню с большими элементами и выпадающим списком ссылок. Чистый и минималистичный код без js.
http://codepen.io/ojbravo/pen/tIacg
 
Simple Pure CSS Dropdown Menu

Простое, но стильное горизонтальное меню. Используется font-awesome. Все работает на css и html, без js. В ie8 будет работать.

http://codepen.io/Responsive/pen/raNrEW
 
Bootstrap 3 mega-dropdown menu

Отличное решение для интернет-магазинов. Отображает несколько уровней категорий и большие изображения (например, товар по акции). В его основе лежит boostrap 3.
http://codepen.io/organizedchaos/full/rwlhd/
 
Flat Navigation

Стильная навигационная панель с плавным подменю. В старых браузерах отобразится с проблемами.
http://codepen.io/andytran/pen/YPvQQN
 
3D nested navigation

Горизонтальное меню с очень крутой анимацией без js!

http://codepen.io/devilishalchemist/pen/wBGVor
 
Responsive Mega Menu — Navigation

Горизонтальное адаптивное меню.  Выглядит неплохо, но мобильная версия немного «хромает». Используется css, html и js.
http://codepen.io/samiralley/pen/xvFdc
 
Pure Css3 Menu

Оригинальное меню. С простым и чистым кодом без js. Применяйте для «вау» эффектов.
http://codepen.io/Sonick/pen/xJagi
 
Full CSS3 Dropdown Menu

Красочное выпадающее меню с одним уровнем вложенности. Используются иконки из font-awesome, html и css.
http://codepen.io/daniesy/pen/pfxFi

 
Css3 only dropdown menu

Достаточно неплохое горизонтальное меню с тремя уровнями вложенности. Работает без js.
http://codepen.io/riogrande/pen/ahBrb
 
Dropdown Menus

Минималистичное меню с оригинальным эффектом появления вложенного списка элементов. Радует, что это решение тоже без javascript.
http://codepen.io/kkrueger/pen/qfoLa
 
Pure CSS DropDown Menu

Примитивное, но эффективное решение. Только css и html.
http://codepen.io/andornagy/pen/xhiJH
 
Pull Menu — Menu Interaction Concept

Интересный концепт меню для мобильного телефона. Я такого ещё не видел. Используется html, css и javascript.

http://codepen.io/fbrz/pen/bNdMwZ
 
Make Simple Dropdown Menu

Чистый и простой код, без js. В ie8 точно работать будет.
http://codepen.io/nyekrip/pen/pJoYgb
 
Pure CSS dropdown [work for mobile touch screen]

Решение неплохое, но слишком уж много используется классов. Радует, что нет js.
http://codepen.io/jonathlee/pen/mJMzgR
 
Dropdown Menu

Симпатичное вертикальное меню с минимальным javascript-кодом. JQuery не используется!
http://codepen.io/MeredithU/pen/GAinq
 
CSS 3 Dropdown Menu

Горизонтальное меню с дополнительными подписями может хорошо украсить Ваш сайт. Код простой и понятный. Javascript не применяется.
http://codepen.io/ibeeback/pen/qdEZjR
 
KVdKQJ (автор очень долго думал над названием)

Красивое решение с большим количеством кода (html, css и js). Придумано 3 формата подменю. Для интернет-магазинов решение хорошо подходит.
http://codepen.io/martinridgway/pen/KVdKQJ
 
CSS3 Menu Dropdowns (особенное решение)!

Темное горизонтальное меню с тринадцатью (13) вариантами анимации! Обязательно советую ознакомиться, пригодится в быту.
http://codepen.io/cmcg/pen/ofFiz

 
П.С.
Надеюсь, Вам понравилась сборка из 23 решений. Если хотите и дальше их читать, то пройдите снизу опрос.
Всем приятной работы.

habr.com

Меню многоуровневое горизонтальное и вертикальное CSS

Приведённый код позволяет создавать неограниченное количество выплывающих вложений не изменяя стилей и легко трансформируется из горизонтального в вертикальное.

Для того чтоб переделать вертикальное меню в горизонтальное, достаточно изменить лишь одно значение в стилях. О чём я укажу в комментариях в коде.

Я даю только эскиз меню. Оформлять и наводить красоту, каждый будет по своему вкусу.

1. Вертикальное

 

 

2. Горизонтальное

 

Код:

HTML


<div>
<ul>
<li><a href="">Meny1</a>
<ul>
<li><a href="">Meny 1-2</a>
<ul>
<li><a href="">Meny 1-2-1</a></li>
<li><a href="">Meny 1-2-2</a></li>
</ul>
</li>
<li><a href="">Meny 1-3</a>
<ul>
<li><a href="">Meny 1-3-1</a></li>
<li><a href="">Meny 1-3-2</a></li>
</ul>
</li>
</ul>

</li>
<li><a href="">Meny 2</a>
<ul>
<li><a href="">Meny 2-1</a>
<ul>
<li><a href="">Meny 2-1-1</a></li>
<li><a href="">Meny 2-1-2</a></li>
</ul>
</li>
<li><a href="">Meny 2-2</a>
<ul>
<li><a href="">Meny 2-2-1</a></li>
<li><a href="">Meny 2-2-2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

Чтоб не выкладывать огромную портянку, я сделал только два блока с двумя уровнями, но вы можете простым копированием добавлять в этот код столько блоков сколько надо и делать столько уровней в каждом блоке, сколько вам потребуется.

Стили для всех блоков, имеющихся и добавленных, будут одинаковыми.

CSS


.nav {
background: white;
text-align: center;
}
.nav a {
text-decoration: none;
display: block;
transition: .5s linear;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.topmenu > li {
display: block;
/*Если вместо block задать inline-block,
меню будет горизонтальным*/
position: relative;
}
.topmenu > li > a {
font-weight: bold;
padding: 10px 30px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 2px;
color: #1c1c1c;
border: 1px solid #999;
}
.submenu {
position: absolute;
left: 10px;
z-index: 5;
width: 240px;
visibility: hidden;
opacity: 0;
transform: translateY(10px);
transition: .5s ease-in-out;
}
.submenu li {
position: relative;
border: 1px solid #999;
margin:2px;
}
.submenu a {
background: white;
color: #1c1c1c;
text-align: center;
font-size: 14px;
letter-spacing: 1px;
padding: 10px 20px;
}
.submenu .submenu {
position: absolute;
top: 0;
left: 200px;

}
.nav li:hover > .submenu {
visibility: visible;
opacity: 1;
transform: translateY(0px);
}

Желаю творческих успехов.

В раздел > > >

Рекомендую: Бесплатные HTML шаблоны на русском от TemplateMonster

Запись опубликована в рубрике CSS основы, HTML основы. Добавьте в закладки постоянную ссылку.

starper55plys.ru

Многоуровневое меню

<!—Основной контейнер —>

<div>

<!— кнопка раскрытия меню на мобильных устройствах —>

<button aria-label=»Open Menu»><span></span></button>

<!— Меню —>

<nav>

<!— Кнопка закрытия меню на мобильных устройствах —>

<button aria-label=»Close Menu»><span></span></button>

<div>

<ul data-menu=»main»>

<li><a data-submenu=»submenu-1″ href=»#»>Vegetables</a></li>

<li><a data-submenu=»submenu-2″ href=»#»>Fruits</a></li>

<li><a data-submenu=»submenu-3″ href=»#»>Grains</a></li>

<li><a data-submenu=»submenu-4″ href=»#»>Mylk & Drinks</a></li>

</ul>

<!— Подменю 1 —>

<ul data-menu=»submenu-1″>

<li><a href=»#»>Stalk Vegetables</a></li>

<li><a href=»#»>Roots & Seeds</a></li>

<li><a href=»#»>Cabbages</a></li>

<li><a href=»#»>Salad Greens</a></li>

<li><a href=»#»>Mushrooms</a></li>

<li><a data-submenu=»submenu-1-1″ href=»#»>Sale %</a></li>

</ul>

<!— Подменю 1-1 —>

<ul data-menu=»submenu-1-1″>

<li><a href=»#»>Fair Trade Roots</a></li>

<li><a href=»#»>Dried Veggies</a></li>

<li><a href=»#»>Our Brand</a></li>

<li><a href=»#»>Homemade</a></li>

</ul>

<!— Подменю 2 —>

<ul data-menu=»submenu-2″>

<li><a href=»#»>Citrus Fruits</a></li>

<li><a href=»#»>Berries</a></li>

<li><a data-submenu=»submenu-2-1″ href=»#»>Special Selection</a></li>

<li><a href=»#»>Tropical Fruits</a></li>

<li><a href=»#»>Melons</a></li>

</ul>

<!— Подменю 2-1 —>

<ul data-menu=»submenu-2-1″>

<li><a href=»#»>Exotic Mixes</a></li>

<li><a href=»#»>Wild Pick</a></li>

<li><a href=»#»>Vitamin Boosters</a></li>

</ul>

<!— Подменю 3 —>

<ul data-menu=»submenu-3″>

<li><a href=»#»>Buckwheat</a></li>

<li><a href=»#»>Millet</a></li>

<li><a href=»#»>Quinoa</a></li>

<li><a href=»#»>Wild Rice</a></li>

<li><a href=»#»>Durum Wheat</a></li>

<li><a data-submenu=»submenu-3-1″ href=»#»>Promo Packs</a></li>

</ul>

<!— Подменю 3-1 —>

<ul data-menu=»submenu-3-1″>

<li><a href=»#»>Starter Kit</a></li>

<li><a href=»#»>The Essential 8</a></li>

<li><a href=»#»>Bolivian Secrets</a></li>

<li><a href=»#»>Flour Packs</a></li>

</ul>

<!— Подменю 4 —>

<ul data-menu=»submenu-4″>

<li><a href=»#»>Grain Mylks</a></li>

<li><a href=»#»>Seed Mylks</a></li>

<li><a href=»#»>Nut Mylks</a></li>

<li><a href=»#»>Nutri Drinks</a></li>

<li><a data-submenu=»submenu-4-1″ href=»#»>Selection</a></li>

</ul>

<!— Подменю 4-1 —>

<ul data-menu=»submenu-4-1″>

<li><a href=»#»>Nut Mylk Packs</a></li>

<li><a href=»#»>Amino Acid Heaven</a></li>

<li><a href=»#»>Allergy Free</a></li>

</ul>

</div>

</nav>

<div>

<p>Please choose a category</p>

<!—контент, загруженный через Ajax —>

</div>

</div>

<!— /вид —>

<script src=»js/classie.js»></script>

<script src=»js/dummydata.js»></script>

<script src=»js/main.js»></script>

<script>

(function() {

var menuEl = document.getElementById(‘ml-menu’),

mlmenu = new MLMenu(menuEl, {

// breadcrumbsCtrl : true, // отображает хлебные крошки

// initialBreadcrumb : ‘all’, // инициализирует текст хлебных крошек

backCtrl : false, // отображает кнопку назад

// itemsDelayInterval : 60, // задержка между анимацией каждого пункта меню

onItemClick: loadDummyData // колбек: при клике по пункту без подменю — onItemClick([событие], [inner HTML кликнутого пункта меню])

});

 

// переключатель меню на мобильном устройстве

var openMenuCtrl = document.querySelector(‘.action—open’),

closeMenuCtrl = document.querySelector(‘.action—close’);

 

openMenuCtrl.addEventListener(‘click’, openMenu);

closeMenuCtrl.addEventListener(‘click’, closeMenu);

 

function openMenu() {

classie.add(menuEl, ‘menu—open’);

}

 

function closeMenu() {

classie.remove(menuEl, ‘menu—open’);

}

 

// симуляция загрузки сетки

var gridWrapper = document.querySelector(‘.content’);

 

function loadDummyData(ev, itemName) {

ev.preventDefault();

 

closeMenu();

gridWrapper.innerHTML = »;

classie.add(gridWrapper, ‘content—loading’);

setTimeout(function(

webformyself.com

Многоуровневое вертикальное меню HTML и CSS

18 Ноябрь, 2015     7 413     1

На днях быстро нужно было сделать простое многоуровневое меню при помощи только css и html. Потратил на поиски минут 15, чего то подходящего что б не переделывать так и не нашел. По этому решил быстрее написать новое чем чистить чужой код. Вот что получилось

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

ul{
	list-style: none;
	background-color: #484f61;
	width: 200px;
	border: 1px solid #2a323f;
	border-bottom: none;
	color: #fff;
}
ul li{
	border-bottom: 1px solid #2a323f;
	position: relative;
}
ul li:hover{
	background-color: #2a323f;
}
ul li:hover ul{
	display: block;
}
ul li:hover ul li ul{
	display: none;
}
ul li a{
	color: #fff;
	padding: 10px 20px;
	display: block;
	text-decoration: none;
	font-weight: bold;
}
ul li a:hover{
	background-color: #5d99cf;
	color: #fff;
}
ul li ul li:hover ul{
	display: block;
}
ul li ul{
	position: absolute;
	left: 200px;
	top: 0px;
	display: none;
}

ul{ list-style: none; background-color: #484f61; width: 200px; border: 1px solid #2a323f; border-bottom: none; color: #fff; } ul li{ border-bottom: 1px solid #2a323f; position: relative; } ul li:hover{ background-color: #2a323f; } ul li:hover ul{ display: block; } ul li:hover ul li ul{ display: none; } ul li a{ color: #fff; padding: 10px 20px; display: block; text-decoration: none; font-weight: bold; } ul li a:hover{ background-color: #5d99cf; color: #fff; } ul li ul li:hover ul{ display: block; } ul li ul{ position: absolute; left: 200px; top: 0px; display: none; }

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<ul>
	<li><a href="#">Главная</a></li>
	<li><a href="#">Новости</a></li>
	<li><a href="#">Прайс</a></li>
	<li><a href="#">Услуги</a>
		<ul>
			<li><a href="#">Услуга 1</a></li>
			<li><a href="#">Услуга 2</a></li>
			<li><a href="#">Услуга 3</a>
				<ul>
					<li><a href="#">Услуга 1</a></li>
					<li><a href="#">Услуга 2</a></li>
					<li><a href="#">Услуга 3</a></li>
					<li><a href="#">Услуга 4</a></li>
					<li><a href="#">Услуга 5</a></li>
				</ul>
			</li>
			<li><a href="#">Услуга 4</a></li>
			<li><a href="#">Услуга 5</a></li>
		</ul>
	</li>
	<li><a href="#">Контакты</a></li>
</ul>

<ul> <li><a href=»#»>Главная</a></li> <li><a href=»#»>Новости</a></li> <li><a href=»#»>Прайс</a></li> <li><a href=»#»>Услуги</a> <ul> <li><a href=»#»>Услуга 1</a></li> <li><a href=»#»>Услуга 2</a></li> <li><a href=»#»>Услуга 3</a> <ul> <li><a href=»#»>Услуга 1</a></li> <li><a href=»#»>Услуга 2</a></li> <li><a href=»#»>Услуга 3</a></li> <li><a href=»#»>Услуга 4</a></li> <li><a href=»#»>Услуга 5</a></li> </ul> </li> <li><a href=»#»>Услуга 4</a></li> <li><a href=»#»>Услуга 5</a></li> </ul> </li> <li><a href=»#»>Контакты</a></li> </ul>

Вам также может понравиться

php.in.ua

Обзор 30 лучших бесплатных jQuery меню навигации

В настоящее время jQuery меню навигации это больше, чем просто блоки текста со ссылками в них. В предыдущей статье я рассказал, как с помощью JQuery и CSS3 вы можете создать меню навигации, которое будет выглядеть очень круто.

С помощью возможностей JQuery мы можем превратить меню навигации в динамическое меню. Хотя сейчас для создания динамической навигации можно использовать только CSS3, JQuery делает меню еще более функциональным.

Помимо динамических функций, дизайн также играет немаловажную роль. Хотя бы потому, что это то, что посетители видят в первую очередь, когда заходят на ваш сайт.

Если меню будет непрезентабельным, это даст пользователям плохой опыт взаимодействия. Хороший дизайн меню в свою очередь увеличит качество вашего сайта, и даст лучший опыт взаимодействия пользователей.

Сегодня я представляю вам 30 отличных примеров JQuery меню навигации.


Pushy адаптивное, не привязанное к холсту меню навигации, использующее преобразования и переходы CSS. Оно отлично работает на мобильных устройствах. Обязательно посмотрите демо, и оно определенно вам понравится.

Демо | Скачать


Это еще одно отличное JQuery-меню для создания красивых прокручиваемых списков навигации. Его отличительной чертой является малый размер исходных файлов.

Демо | Скачать


Это простое адаптивное всплывающее меню с очень интересными функциями. При нажатии на иконку меню, всплывает окно меню с иконками элементов. Посмотрите демо.

Демо | Скачать


Slidebars — JQuery фреймворк для быстрой и простой реализации стилей приложения без привязки к холсту. Slidebars также обрабатывает изменения ориентации и изменение размеров.

Демо | Скачать


JQuery меню, которое выводит квадратное анимированное меню сайта с помощью JQuery и CSS3. Убедитесь в этом, посмотрев демо.

Демо | Скачать


Это jQuery меню навигации превращает страницу в 3D меню. Идея заключается в том, чтобы создать дизайн мобильного приложения, в котором при клике по иконке меню, содержимое страницы сдвигается в сторону, а меню выводится на передний план.

Демо | Скачать


Плагин для создания адаптивного мобильного jQuery меню с несколькими уровнями и гибкой, но простой настройкой. Совместим с разными браузерами, возможна навигация с помощью клавиатуры.

Демо | Скачать


jQuery меню для приложений с привязкой и без привязки к холсту с всплывающими подпунктами. Благодаря многочисленным опциях, адд-онам и расширениям, возможна очень гибкая настройка меню.

Демо | Скачать


jQuery плагин для создания меню и простого добавления адаптивных функций. С помощью Sidr вы сможете создавать различные элементы своего сайта, а также адаптивные меню.

Демо | Скачать


slimMenu — это небольшой jQuery плагин, который поможет вам в разработке адаптивных, многоуровневых меню навигации. Что самое классное в нем, так это то, что вы можете иметь несколько разных меню, и все они будут абсолютно адаптивны.

Демо | Скачать


jQuery меню навигации, позволяющее задать горизонтальное меню по всей ширине контейнера. С помощью этого плагина это делается очень просто. Кроме того можно реализовать поддержку для IE7.

Демо | Скачать


Это mobile-first пример использования медиа запросов и JavaScript для создания отличного многоуровневого меню с поддержкой сенсорных экранов, эффектов наведения и навигации с помощью клавиатуры.

Демо | Скачать


jQuery меню, которое запускает события при наведении курсора мыши на выпадающий элемент меню. Идеально подходит для создания адаптивных выпадающих меню, как на Amazon.

Демо | Скачать


Плагин jQuery меню, который предлагает простой и интуитивный способ вывода меню. Создает адаптивные списки меню. Работает на всех устройствах!

Демо | Скачать


Shifter — простой в использовании mobile-first jQuery плагин для создания слайд-меню, выезжающих с правой стороны при нажатии на кнопку переключения. Для настройки существует только одна опция maxWidth. Она позволяет настроить разрешение/ориентацию для мобильных устройств.

Демо | Скачать


Hamburger — это jQuery плагин для создания слайд-меню в стиле Android App, в котором по правому краю экрана размещается всплывающее меню. При раскрытии меню в полном размере, оно перекрывает область контента, но не панель действий.

Демо | Скачать


Focucss — jQuery меню навигации, с помощью которого создается не привязанное к холсту меню в сайдбаре с крутыми функциями размытости, с помощью которых вы можете обратить внимание пользователей на основные разделы сайта и сделать менее заметными не слишком полезные разделы.

Демо | Скачать


Drawer — jQuery плагин для создания адаптивного, анимированного меню, выезжающего при нажатии из боковой области экрана. Подобные функции вы могли видеть в Android-приложениях.

Демо | Скачать


Datmenu — премиум jQuery адаптивное меню с различными функциями CSS3 анимации. Что самое замечательное в этом плагине, так это возможность полной настройки с помощью js-опций.

Демо | Скачать


jPanelMenu — красивое и современное jQuery меню, позволяющее создавать панельное меню навигации с функциями переходов CSS3 анимации. Стиль jPanelMenu напоминает мобильные версии Facebook и Google. Плагин может использоваться для разнообразных мобильных приложений.

Демо | Скачать


Fly Side Menu — крутой плагин меню навигации, который использует CSS3 для создания бокового меню с 3D преобразованиями и переходами.

Демо | Скачать


PageScroll — настраиваемое мобильное jQuery-меню, рекомендованное для использования на любых веб-сайтах, а также целевых страницах.

Демо | Скачать


DD Icon Menu — это jQuery плагин, который позволяет создавать вертикальное меню иконок, расположенное на краю экрана с разворачивающимися при наведении подпунктами меню.

Демо | Скачать


jQuery меню, позволяющее осуществлять навигацию по датам в выбранном диапазоне (неделя, месяц или год). Идеально для запросов информации с помощью вызовов AJAX.

Демо | Скачать


jQuery плагин меню навигации, позволяющий очень просто создавать мобильные меню. Использует CSS переходы для установки позиции меню на мобильных устройствах.

Демо | Скачать

26. Multi-Level Push Menu


Multi-Level Push Menu — это Javascript библиотека, созданная MARY LOU из Codrops. Она создает многоуровневые меню, выезжающие с левой стороны экрана и сдвигающие контент вправо.

Демо | Скачать


Box Lid — простой jQuery плагин. позволяющий создавать боковое меню навигации с 3D-эффектами ‘Box Lid’, использующими переходы и преобразования CSS3.

Демо | Скачать


jQuery слайд-меню, внешне похожее на мобильные меню Facebook и Path.

Демо | Скачать


scrollNav — это jQuery плагин, который выводит существующий контент веб-страницы, разбивая его на логические разделы и создавая настраиваемый слайд сайдбар навигации.

Демо | Скачать


DoubleTapToGo — это jQuery плагин, который помогает создать удобное многоуровневое адаптивное выпадающее меню.

Демо | Скачать

Вот и все! Все эти jQueryплагины обеспечат крутой и приятный дизайн ваших меню. Вы можете использовать их в своих проектах, чтобы произвести впечатление на своих посетителей. Если вам известны другие отличные jQuery меню, напишите об этом в комментариях.

Данная публикация представляет собой перевод статьи «The Listed Voyage: 30 Free jQuery Navigation Menus» , подготовленной дружной командой проекта Интернет-технологии.ру

www.internet-technologies.ru

Многоуровневое вертикальное меню

<div>

    <ul>

        <li>

            <a href=»#»>Пункт меню 1</a>

            <input type=»checkbox» checked=»checked» />

            <label for=»1″></label>

            <ul>

                <li>

                    <a href=»#»>Пункт меню 1.1</a>

                    <input type=»checkbox» checked=»checked»/>

                    <label for=»1.1″></label>

                    <ul>

                        <li>

                            <a href=»#»>Пункт меню 1.1.1</a>

                        </li>

                        <li>

                            <a href=»#»>Пункт меню 1.1.2</a>

                        </li>

                        <li>

                            <a href=»#»>Пункт меню 1.1.3</a>

                        </li>

                    </ul>

                </li>

                <li>

                    <a href=»#»>Пункт меню 1.2</a>

                </li>

                <li>

                    <a href=»#»>Пункт меню 1.3</a>

                </li>

            </ul>

        </li>    

        <li>

            <a href=»#»>Пункт меню 2</a>

            <input type=»checkbox» />

            <label for=»2″></label>

            <ul>

                <li>

                    <a href=»#»>Пункт меню 2.1</a>

                </li>

                <li>

                    <a href=»#»>Пункт меню 2.2</a>

                </li>

                <li>

                    <a href=»#»>Пункт меню 2.3</a>

                </li>

                <li>

                    <a href=»#»>Пункт меню 2.4</a>

                </li>

            </ul>

        </li>

        <li>

            <a href=»#»>Пункт меню 3</a>

            <input type=»checkbox» />

            <label for=»3″></label>

            <ul>

                <li>

                    <a href=»#»>Пункт меню 3.1</a>

                </li>

                <li>

                    <a href=»#»>Пункт меню 3.2</a>

                </li>

            </ul>

        </li>

        <li>

            <a href=»#»>Пункт меню 4</a>

            <input type=»checkbox» />

            <label for=»4″></label>

            <ul>

                <li>

                    <a href=»#»>Пункт меню 4.1</a>

                </li>

                <li>

                    <a href=»#»>Пункт меню 4.2</a>

                </li>

                <li>

                    <a href=»#»>Пункт меню 4.3</a>

                </li>

            </ul>

        </li>

    </ul>

</div>

atuin.ru

Адаптивное многоуровневое мега-меню на jQuery

Меню сайта это несомненно один из самых важных элементов который стоит разрабатывать с особым усилием, правильный подход к навигации поможет посетителю найти нужную информацию, а вам привлечь еще клиентов на свой ресурс. Сегодня я вам расскажу как создать замечательное адаптивное, многоуровневое мега меню при помощи небольшого плагина jQuery, dmenu-это плагин jQuery для создания отзывчивого, многоуровневого и многостолбцового мега-меню, которое скрывает переполненные элементы навигации в вертикальном раскрывающемся списке с переключателем.

 

Если вы хотите скачать шаблон с уже готовой продуманной навигацией, тогда обратите внимание на предложения наших партнеров, там есть бесплатные шаблоны так и премиум с круглосуточной техподдержкой:

У нас будут семь различных примера навигации, кроме этого будет переключатель вида, он расположен внизу планшета, нажав на него вы измените размер и положение окна.

Шаг 1. HTML

Для начала работы включите необходимую библиотеку jQuery и JavaScript файлы плагинов меню в странице где будет находиться навигация:

<link rel=»stylesheet» href=»jquery.dmenu.css»>

<script src=»jquery-3.3.1.min.js»></script>

<script src=»jquery.dmenu.js»></script>

Мега-меню будет состоять из следующей структуры для навигации:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

<nav>

<ul>

<li>

<a href=»#»>Меню</a>

<ul>

<li>

<a href=»#»>Навигация сайта</a>

<ul>

<li>

<a href=»#»>Интересные</a>

<ul>

<li><a href=»#»>Описание ссылки</a></li>

<li><a href=»#»>Описание ссылки</a></li>

<li><a href=»#»>Описание ссылки</a></li>

</ul>

</li>

<li>

<div></div>

<a href=»#»>Уроки</a>

<ul>

<li><a href=»#»>Дизайна</a></li>

<li><a href=»#»>Пособие</a></li>

<li><a href=»#»>Инструкции</a></li>

</ul>

</li>

</ul>

</li>

<li>

<a href=»#»>Исходники</a>

<ul>

<li>

<a href=»#»>Уроки</a>

<ul>

<li><a href=»#»>Интересные</a></li>

<li><a href=»#»>Популярные</a></li>

<li><a href=»#»>Креативные</a></li>

</ul>

</li>

<li>

<a href=»#»>Демонстрации</a>

<ul>

<li><a href=»#»>Новые</a></li>

<li><a href=»#»>Интересные</a></li>

</ul>

</li>

<li>

<a href=»#»>Уроки</a>

<ul>

<li><a href=»#»>Описание</a></li>

<li><a href=»#»>Описание</a></li>

<li><a href=»#»>Описание</a></li>

</ul>

</li>

</ul>

</li>

<li>

<a href=»#»>Интересные новости</a>

<ul>

<li><a href=»#»>Описание</a></li>

<li><a href=»#»>Описание</a></li>

</ul>

</li>

<li>

<a href=»#»>Ссылка</a>

<ul>

<li><a href=»#»>Описание</a></li>

<li><a href=»#»>Описание</a></li>

<li><a href=»#»>Описание</a></li>

</ul>

</li>

</ul>

</li>

</ul>

</nav>

Для каждой навигации разметка будет немного отличаться, но не существенно, более детально просмотреть можете в исходниках.

Шаг 2. CSS

Стили для каждой навигации по своему уникальны, по этому приведем пример базовых классов, которые вы можете использовать для навигации:

  • Selected: Делает элемент (и все родительские элементы) «Selected».
  • AlignRight: Выравнивание основного элемента по правому краю.
  • IconHidden: Использует значок в качестве запасного варианта, когда меню слишком большое.
  • SubmenuAlignRight: Выравнивание подменю. Примечание: подменю автоматически выравниваются по размеру окна просмотра.
  • SubmenuFullwidth: Позволяет заполнить подменю по всей ширине меню.
  • SubmenuMega: Превращает подменю в мега-меню.
  • SubmenuTabs: Превращает подменю в меню вкладок.
  • SubmenuAlignRight: Выравнивание подменю. Примечание: субподменю выравниваются автоматически.
Шаг 3. JS

Нам необходимо инициализировать плагин, при этом стоит понимать, что для инициализации конкретного меню, вам потребуются соответствующие опции, вот некоторые из них:

  • menu.align: Выравнивает основные элементы по левому краю, по правому краю, по центру или по ширине.
  • menu.border: Добавляет границу (внизу) в нижней части меню.
  • menu.logo: Стиль логотипа в меню (если есть).
  • item.bg: Добавляет фон к основным элементам при наведении.
  • item.border: Добавляет границу (снизу) к основным элементам при наведении.
  • item.subindicator: Добавляет индикатор к основным элементам.
  • submenu: Требуется для подменю.
  • submenu.arrow: Добавляет стрелку, указывающую на главный элемент.
  • submenu.border: Добавляет границу (сверху) к подменю.
  • submenu.shadow: Добавляет тень к подменю.
  • subitem.bg: Добавляет фон к подэлементам onHover.
  • subitem.border: Добавляет границу между подэлементами.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

$(‘#menu’).dmenu({

menu : {

logo : true,

align : ‘right’

},

item : {

bg : true,

border : false,

subindicator : true,

 

fit : [

{

items : null,

fitter : ‘icon-hide’,

order : ‘all’

},

{

items : null,

fitter : ‘icon-only’,

order : ‘all’

},

{

items : ‘:not(.dm-item_align-right)’,

fitter : ‘submenu’,

order : ‘rtl’

},

{

items : ‘:not(.dm-item_align-right)’,

fitter : ‘hide’,

order : ‘rtl’

}

]

},

submenu : {

arrow : false,

border : false,

shadow : true

},

subitem : {

bg : true,

border : false

}

 

});

Думаю из семи вариантов, каждый найдет что-то для себя, а вы как считаете? оставляйте комментарии с вашими вопросами и пожеланиями.

Вот и все. Готово!

Читайте также:

www.rudebox.org.ua

No related posts.