—»     —»   50 примеров выпадающих меню в веб-дизайне
  Раздел: Меню и Навигация   Комментариев: 1  

50 примеров выпадающих меню в веб-дизайне



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

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

01. Pure Grips

50 примеров выпадающих меню в веб-дизайне

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

02. Porsche

50 примеров выпадающих меню в веб-дизайне

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

03. B&Q

50 примеров выпадающих меню в веб-дизайне

На сайте B&Q мы видим чистое и привлекательное выпадающее меню, которое отображает нам колонки с товарами.

04. Red Brick Health

50 примеров выпадающих меню в веб-дизайне

Данное меню навигации идеально подпадает под дизайн, а розовый цвет при наведении создает определенный эффект.

05. Carreras Con Futuro

50 примеров выпадающих меню в веб-дизайне

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

06. Galaico Folia

50 примеров выпадающих меню в веб-дизайне

Это выпадающее субменю оснащено прекрасным эффектом анимации.

07. Callaway Golf

50 примеров выпадающих меню в веб-дизайне

В этом превосходном выпадающем меню применили интересный эффект оранжевого цвета при наведении.

08. Converse

50 примеров выпадающих меню в веб-дизайне

На сайте Converse мы видим интересное выпадающее меню в гранджевом стиле с применением текстуры одежды.

09. Puma

50 примеров выпадающих меню в веб-дизайне

Это темное выпадающее меню на самом деле хорошо выделяется на фоне дизайна сайта.

10. Sunglass Hut

50 примеров выпадающих меню в веб-дизайне

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

11. Nettuts+

50 примеров выпадающих меню в веб-дизайне

На сайте Netttuts+ мы видим чистое выпадающее меню, которое вполне привлекательно за счет использованных цветов в заголовках.

12. Tennessee Trails & Byways

50 примеров выпадающих меню в веб-дизайне

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

13. Gateway

50 примеров выпадающих меню в веб-дизайне

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

14. Bern

50 примеров выпадающих меню в веб-дизайне

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

15. Ski Alpine

50 примеров выпадающих меню в веб-дизайне

Это выпадающее меню заостряет внимание на мелких деталях дизайна.

16. Guitar Hero

50 примеров выпадающих меню в веб-дизайне

Это простенькое выпадающее меню вполне практично и не отвлекает от основных областей разметки веб-сайта.

17. Mac Appstorm

50 примеров выпадающих меню в веб-дизайне

Здесь мы видим чистое выпадающее меню, которое идеально вписывается в общий дизайн сайта.

18. Noizi Kidz

50 примеров выпадающих меню в веб-дизайне

Это навигационное меню очень светлое и имеет необычную форму.

19. Audi

50 примеров выпадающих меню в веб-дизайне

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

20. Famous Cookies

50 примеров выпадающих меню в веб-дизайне

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

21. Duchy of Cornwall Nursery

50 примеров выпадающих меню в веб-дизайне

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

22. EA

50 примеров выпадающих меню в веб-дизайне

На сайте Electronic Arts есть очень задорное выпадающее меню.

23. Bonfire Snowboarding

50 примеров выпадающих меню в веб-дизайне

На сайте Bonfire Snowboarding реализовано великолепное выпадающее меню, состоящее из трех колонок, которое можно увидеть, если навести на вкладку «Товары» («Products»), расположенную в основном меню.

24. Facebook

50 примеров выпадающих меню в веб-дизайне

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

25. Nick Ad

50 примеров выпадающих меню в веб-дизайне

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

26. TN Vacation

50 примеров выпадающих меню в веб-дизайне

Это темно-синее навигационное меню действительно выделяется.

27. MTV UK

50 примеров выпадающих меню в веб-дизайне

Веб-сайт представляет чистое и стандартное навигационное меню.

28. DC Shoes

50 примеров выпадающих меню в веб-дизайне

Красный и белые текст на полупрозрачном черном фоне создают некий шарм.

29. Envato Marketplaces

50 примеров выпадающих меню в веб-дизайне

Действительно красивое выпадающее меню.

30. Tennessee Theatre

50 примеров выпадающих меню в веб-дизайне

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

31. Boden

50 примеров выпадающих меню в веб-дизайне

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

32. White House

50 примеров выпадающих меню в веб-дизайне

Белый фон, синий текст и красные границы верхушки и подвала символизируют цвета флага США.

33. Navigant Consulting

50 примеров выпадающих меню в веб-дизайне

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

34. Officers Club

50 примеров выпадающих меню в веб-дизайне

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

35. Fall For Tennessee

50 примеров выпадающих меню в веб-дизайне

На сайте Fall for Tennessee есть горизонтальное выпадающее меню, которое скользит в правую сторону. Пункты меню, в которых есть субменю, оснащены небольшой стрелочкой, чтобы пользователь мог понять, что пункт может быть развернут.

36. Sony

50 примеров выпадающих меню в веб-дизайне

На сайте Sony есть широкое и простенькое выпадающее меню. На официальной британской версии сайта.

37. Project Vino

50 примеров выпадающих меню в веб-дизайне

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

38. Media Temple

50 примеров выпадающих меню в веб-дизайне

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

39. Mozilla

50 примеров выпадающих меню в веб-дизайне

На сайте Mozilla мы также можем видеть простенький, но очень удачный вариант выпадающего меню.

40. August

50 примеров выпадающих меню в веб-дизайне

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

41. Henleys Clothing

50 примеров выпадающих меню в веб-дизайне

Основной цвет навигации хорошо сочетается с субменю выпадающих пунктов.

42. Digg

50 примеров выпадающих меню в веб-дизайне

Классические субменю выпадающей навигации Digg отлично взаимодействует с дизайном в целом.

43. Action Envelope

50 примеров выпадающих меню в веб-дизайне

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

44. Very

50 примеров выпадающих меню в веб-дизайне

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

45. Incase

50 примеров выпадающих меню в веб-дизайне

Выпадающее меню на сайте Incase немного светлее основного фона меню, и это отлично взаимодействует с общим внешним видом веб-сайта.

46. American Eagle

50 примеров выпадающих меню в веб-дизайне

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

47. Mayflower Brewing

50 примеров выпадающих меню в веб-дизайне

Цвета, использованные в этом выпадающем меню (и сайте, в целом) очень яркие.

48. Select Clothing

50 примеров выпадающих меню в веб-дизайне

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

49. Bird Malaysia

50 примеров выпадающих меню в веб-дизайне

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

50. The Web Squeeze

50 примеров выпадающих меню в веб-дизайне

На сайте Web Squeeze в выпадающее меню интегрировали jQuery, что позволило реализовать некоторые интересные эффекты при наведении курсора мыши.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Опубликовал Mysterious Master   Прочитано (раз): 78341   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 4 октября 2012 @ 23:28
Написал: Ираида — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Красиво! Только майл.ру не даёт ничего подобного сделать. Ни флэш, ни CSS, ни ява. Один голый HTML и то не все теги работают.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Здесь
Разработка, производство и внедрение портативных твердомеров
fela-nk.ru
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930