Главная > Меню и Навигация > Вертикальные навигационные меню: Тенденции, варианты и лучшие образцы
Вертикальные навигационные меню: Тенденции, варианты и лучшие образцы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» меню навигации расположено с левой стороны логотипа. Нетрадиционный вариант расположения навигации, но здесь все выполнено просто прекрасно. Активный раздел выделяется белым фоном. Вернуться назад |