Главная > Меню и Навигация > Вертикальные навигационные меню: Тенденции, варианты и лучшие образцы

Вертикальные навигационные меню: Тенденции, варианты и лучшие образцы


9 мая 2010, 13:00. Разместил: Mysterious Master
Вертикальные навигационные меню: Тенденции, варианты и лучшие образцы

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

Меню навигации на любом из сайтов в основном представляются вам в двух вариантах: вертикальный вариант или горизонтальный. Горизонтальные меню навигации отображают разделы пункт за пунктом. В вертикальных меню пункты размещают пункт под пунктом. В этой статье мы постараемся выделить самые запоминающиеся вертикальные меню для вашего вдохновения.

Подборка красивых дизайнов с вертикальным меню навигации

01. Riot Industries

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

Вертикальные меню

02. Village Version

Здесь вы можете ознакомиться с одним из преимуществ вертикальных меню: они очень удобны своей структурой и их можно уместить практически в любую верстку. Меню размещается прямо под логотипом сайта, и посетитель может сразу его заметить (конечно, если он не из Израиля).

Вертикальные меню

03. Bruno Souza

На этом портфолио вы можете встретить очень чистый и простенький дизайн, который акцентирует внимание посетителей на содержимом справа.

Вертикальные меню

04. Cambrian House

Очень характерное и нестандартное навигационное меню с 5-ю разными шрифтами. Немного необычное меню для такого сообщества.

Вертикальные меню

05. Comfort Brothers

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

Вертикальные меню

06. Auberge de l’Ill

Вертикальное меню навигации достаточно уточенное и функциональное. Наведя на пункты меню, вы увидите скромную анимацию.

Вертикальные меню

07. The Hipstery!

Вертикальное меню навигации сидит где-то, как раз, в середине той области, на котором сконцентрировано внимание посетителя при первой загрузке страницы. Активные разделы помечаются пиктограммой в виде руки.

Вертикальные меню

08. Research at MICA

Дизайн сайта «Maryland Institute College of Arts» демонстрирует вам еще одно преимущество вертикальных меню навигации: здесь показана иерархия, за счет которой вам не придется каждый раз целиться в пункты меню, субкатегории которых отображаются только тогда, когда курсор мыши наведен на них.

Вертикальные меню

09. Power to the Poster

Вертикальная навигация этого сайта расположена прямо под логотипом веб-сайта, что гарантирует привлечение внимания, несмотря даже на огромный баннер в правом верхнем углу.

Вертикальные меню

10. From the Couch

Вертикальная навигация этого сайта отображает еще одно преимущество: есть возможность размещения большего числа разделов.

Вертикальные меню

11. Nick Jones

Портфолио арт-директора Ника Джонса тоже оснащено вертикальной навигацией. Меню включает в себя его работу, а также интерактивный компонент, который прокручивает меню вверх и вниз, в зависимости от движения мыши посетителя. Когда производится клик по разделу, меню отъезжает влево, освобождая пространство для содержимого.

Вертикальные меню

12. Noam Design

Это черное меню навигации для «Noam Design» сохраняет пункт контактов постоянно открытым.

Вертикальные меню

13. The Music Hall

Вертикальная навигация этого веб-сайта разгруппирована на две части, что позволяет посетителям быстрее найти нужный им раздел.

Вертикальные меню

14. ONETWENTYSIX

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

Вертикальные меню

15. Tailored pixels

Это простое меню навигации расположено прямо под логотипом веб-сайта, что гарантирует привлечение внимания посетителей. Темно-серый фон обозначает активные разделы в меню, а стрелка ведет к содержимому.

Вертикальные меню

16. Mellasat Vineyard

Вертикальная навигация на сайте «Mellasat Vineyard» представляет собой модулярный элемент дизайн, который также включает в себя логотип и название сайта. Меню здесь представляет собой основной элемент.

Вертикальные меню

17. SIMPLE LIFE

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

Вертикальные меню

18. Debbie Millman

Меню креативно «вплетается» в описание и направленность веб-сайта.

Вертикальные меню

19. Utah.travel

Интерактивное меню оснащено скользящими разделами, которые представляют под-ссылки и содержимое, когда посетитель наводит на основной пункт меню.

Вертикальные меню

20. Mathias Leihu

Несмотря на тусклые цвета этого меню, оно отлично привлекает внимание посетителей за счет своего расположения.

Вертикальные меню

21. Go Media Inc

Навигация на сайте «Go Media Inc» представляет собой гормошку, в которой спрятаны под-разделы. Кликая на основной раздел, вы активируете анимацию, которая откроет вам остальные скрытые разделы.

Вертикальные меню

22. Circa, the Prince

На этом сайте меню навигации также привлекает внимание из-за своего расположения на странице.

Вертикальные меню

23. Glass Tiger Surfboards

Сайт «Glass Tiger Surfboards» оснащен вертикальным меню с низким уровнем плотности, и травянистый фон немного просвечивает.

Вертикальные меню

24. Corey Arnold Photography

Меню на этом сайте-портфолио в стиле минимализма представляет собой красный прозрачный блок, так что фотография все равно видна, даже если вы раскроете меню.

Вертикальные меню

25. Uniquexport

Креативное меню прозрачно, так что фоновая текстура все равно видна вам.

Вертикальные меню

26. Yellowood store

Меню выполнено с темно-серым полупрозрачным фоном, так что фоновое изображение просвечивает его.

Вертикальные меню

27. Van de Weghe Fine Art

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

Вертикальные меню

28. TheyMakeApps.com

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

Вертикальные меню

29. Huis Oranje

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

Вертикальные меню

30. Washtenaw Community College

Меню здесь интересно, так как редко можно встретить меню в таком стиле на сайтах, связанных с системой образования.

Вертикальные меню

31. Brown Blog Films

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

Вертикальные меню

32. A J Miles

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

Вертикальные меню

33. RedVelvetart.com

В этом меню применили цветные шрифты в стиле рукописного текста, что очень дополняет общую тематику.

Вертикальные меню

34. R.I.P. Cube Club

Это вертикальное меню выровнено по центру разметки. В нем применили огромные шрифты с трехмерным эффектом.

Вертикальные меню

35. LEAF TEA SHOP & BAR

На этом сайте вы увидите то, как огромные шрифты могут зарезервировать вам больше места.

Вертикальные меню

36. Rick Monroe

Личный сайт Рика Монро оснащен навигационным ссылками поверх текстурного фона, прямо под логотипом сайта.

Вертикальные меню

37. Rich Brown

Этот большой шрифт очень подходит данному веб-сайту в стиле минимализма.

Вертикальные меню

38. Strip Turnhout

На этом сайте применили органические шрифты в рукописном стиле, которые соответствуют всей тематике.

Вертикальные меню

39. NATIONAL TELEVISION

Это меню предлагает вам интересное взаимодействие. Когда вы кликаете по пункту, меню отъезжает влево или вправо, что освобождает пространство для содержимого, а также привлекает внимание посетителей.

Вертикальные меню

40. Polargold

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

Вертикальные меню

41. Notorious Design

В этой навигационной системе основные ссылки расположены в вертикальном порядке. А подразделы расположены горизонтально.

Вертикальные меню

42. Light is Light

Простое текстовое меню привлекает внимание за счет расположения на странице.

Вертикальные меню

43. Gary’s real life

Пункты в этом меню напоминают полоски из бумаги, что дополняет рисованную тему оформления.

Вертикальные меню

44. Denise Chandler

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

Вертикальные меню

45. Envira Media Inc

Это нестандартно расположенное меню на самом деле дополняет «живой» внешний вид веб-сайта. Пиктограммы слева от каждого пункта помогают визуально отличить меню от остального дизайна.

Вертикальные меню

46. Mulletized

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

Вертикальные меню

47. Clearideaz

Навигационное меню этого сайта уникально – оно выглядит как маленькая плетеная корзинка. К тому же, оно выделятся, так как расположено в правом верхнем углу.

Вертикальные меню

48. The Gates Notes

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

Вертикальные меню

49. Ommwriter

Пункты меню отображены в виде полупрозрачных окружностей. При наведении, символы раскрывают пункт меню. Это меню наверняка вам запомнится.

Вертикальные меню

50. Gianni’s Steakhouse

Это меню слегка наклонено, и это наверняка привлечет внимание посетителей. Дизайн очень подходит для ресторанного веб-сайта.

Вертикальные меню

51. Aussie BBQ Legends

Смелое, яркое, привлекательное. Все эти прилагательные истинно описывают вертикальное меню на сайте «Aussie BBQ Legends». Меню играет огромную роль в построении общей тематики сайта.

Вертикальные меню

52. Sid Lee

Агентство «Sid Lee» применило интерактивное меню навигации с левой стороны страницы. Некоторые разделы меню имеют подразделы, которые отображены прямо за основным пунктом.

Вертикальные меню

53. Harmony Republic

На сайте «Harmony Republic» меню навигации расположено с левой стороны логотипа. Нетрадиционный вариант расположения навигации, но здесь все выполнено просто прекрасно. Активный раздел выделяется белым фоном.

Вертикальные меню

Вернуться назад