99 техник создания меню для сайта CSS и jQuery


При разработке сайта у меня часто да и у любого веб-мастера (скорее всего) начинает болеть голова над тем: Какое меню для сайта сделать чтобы улучшить его юзабилити?

  1. Горизонтальное или вертикальное меню? По опыту обычно делают и то и то.
  2. Делать ли в меню выпадающие (многоуровневое меню), всплывающие, раскрывающиеся элементы?
  3. Использовать в навигации графические объекты: фон, иконки?
  4. И в конце концов как это все сделать и какую технологию использовать (скрипт для меню): просто HTML или делать CSS меню, либо что я редко использую в данных целях javascript или jQuery меню.

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

Данный обзор делал достаточно продолжительный период, хоть название и несет в себе “99 техник создания меню для сайта CSS и jQuery“, техник представлено конечно же больше:

1 CSS меню для начинающих | Демо версия

Креативное меню от Шевчука Антона. Как пишет сам Антон, меню само по себе не представляет особой сложности но зато очень привлекательно смотрится.

css-menu1

2 Графическое CSS-меню | Демо версия

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

image001

3 Горизонтальное меню (Solid Block Menu) | Демо версия

Меню с помощью CSS с использованием 2 градиентных картинок. Легко настраивается под любой дизайн.

solid-block-menu

4 Создание горизонтального меню | Демо версия

Еще одно похожее на то что выше горизонтальное меню.

menu-img2

5 Горизонтальное меню | Демо версия

32

6 Красивые вертикальные меню – 9 штук скачать | Демо версия

9 красивых вертикальных меню, встроены в одну HTML страницу, для того чтобы узнать код нужного вам меню просто раскройте исходный код. Кстати все эти меню взяты из программы CSS Tab Designer программа бесплатная поэтому смело можно ее скачать. В программе соответственно выбор этих меню больше есть и горизонтальные и вертикальные.

ex

7 Красивые горизонтальные меню – 11 штук скачать | Демо версия

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

css-techniques0002

8 CSS горизонтальное меню | Демо версия

Простое базовое CSS горизонтальное меню.

13-01_styles

9 41 простых но красивых CSS меню | Демо версия

Styled Menus предоставил 41 простых стильных менюшек для ваших сайтов, за что им большое спасибо, не хотите заморачиваться с кодом и дизайном, возьмите идею отсюда.

Для страховки выложил архив и на SHEBEKO.COM вот ссылка

mmenu

10 Стильные горизонтальные  CSS навигации | Демо версия

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

cssonly

11 CSS меню с использованием изображений в виде текста | Демо версия

Пример красивого горизонтального меню. Очень стильно даже по-моему.

nav1

12 Анимированное меню | Демо версия

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

menu4

13 Hover метод при наведении курсора | Демо версия

hover

14 Навигация на CSS & jQuery | Демо версия

jquery_menu4

15 Стильное навигационное меню с использованием jQuery | Демо версия

jquery_menu10

16 Простое jQuery выпадающее меню | Демо версия

jquery_menu11

17 Простое выпадающее меню на jQuery | Демо версия

Простой метод выпадающего меню на jQuery. Данный тип меню очень прост, одновременно это хорошее решение для любого интернет портала (магазина)

dd1

18 Выпадающее меню версия 2 | Демо версия

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

dd2

19 Выпадающее меню без Javascript | Демо версия

Источником сего примера являеться полезнейший ресурс CSSPlay.

menu5

20 Выпадающее меню без javascript версия 2 | Демо версия

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

menuddd

21 Простое вертикальное или горизонтальное меню на CSS | Демо версия

222

22 Выпадающее горизонтальное меню | Демо версия

jquery_menu1

23 Выпадающее меню XHTML+CSS+jQuery | Демо версия

Классный вариант от Dynamic Drive выпадающего меню с использование эффектов jQuery. Это многоуровневое меню, которое оформлено в виде многоуровневого HTML-списка и преобразованное в полноценное выпадающее меню с использованием чистого CSS и с применением эффектов jQuery.

1234

24 Выпадающее меню на CSS | Демо версия

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

exempl

25 Выпадающее меню на CSS | Демо версия

Александр Шабуневич перевел статью про выпадающие меню на CSS – Suckerfish Dropdowns. Данная статья предназначена для новичков в CSS, желающих научиться делать красивые меню без использования JavaScript, сохраняя при этом чистый код HTML-страниц.

111

26 Минималистское выпадающее меню | Демо версия

Меню строится с помощью сочетания css + javascript, противников использования javascript’а для таких нужд не мало, но все же это меню имеет право на свое существование.

menu_3

27 CSS Экспресс выпадающее горизонтальное меню | Демо версия

css-express

28 CSS Выпадающее горизонтальное меню | Демо версия

mywebstuff

29 Простое выпадающее горизонтальное меню| Демо версия

simple-menu

30 Бесплатная сборка из 8 выпадающих CSS меню | Демо версия

Очень красивые и интересные техники навигации, причем используемые на популярнейших ресурсах интернета. Можно все скачать на SHEBEKO.COM

menup

31 Flickr горизонтальное меню | Демо версия

Меню уже есть в сборнике выше. Меню с популярного сайта flikr

flickrmenu_demo

32 Простое jQuery выпадающее меню | Демо версия

dropdownspic

33 jQuery & CSS – выпадающее меню | Демо версия

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

menu

34 Выпадающее меню с использованием CSS and jQuery | Демо версия

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

imagedd

35 Выпадающее меню с анимацией jQuery | Демо версия

Отличный вариант для тех кто хочет выделить мало место под навигацию.

animated_drop_down

36 Дропдаун, выпадающее меню с эффектами на jQuery | Демо версия

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

dd5

37 Выпадающее меню на CSS | Демо версия

css-drop-down-menu-img

38 Выпадающее подменю на CSS и jQuery | Демо версия

horizontal-dropdown-submenu

39 Jquery выпадающее меню | Демо версия

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

jquery_menu2

40 Динамическое 2-х уровневое меню | Демо версия

Оригинальный урок опубликован в статье Pastel color menu with dynamic submenu using CSS. Алексей Ильин немного изменил HTML и CSS код, для того чтобы конечный результат стал более семантически корректным.

dynamic_menu2

41 Верхняя горизонтальная навигация | Демо версия

Очень стильная горизонтальная система навигации.

vd

42 2 выпадающих вертикальных CSS меню| Демо версия

Стильные навигации с разными эффектами.

moomenu

43 Креативное с движением вертикальное меню | Демо версия

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

elastic3

44 Меню с выпадающими кнопками на Mootools | Демо версия

Меню с выпадающими кнопками, с помощью Mootools. Результат будет выглядеть следующим образом:

sliding_buttons

45 Анимированная навигация | Демо версия

Это аналог fancy menu mootools но на jQuery. Навигация с различными эффектами добавляет на ваш сайт немного динамики, что визуально выглядет очень красиво.

ddd

46 Анимированное меню на Mootools | Демо версия

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

animated_menu

47 Перекрывающиеся кнопки в меню | Демо версия

Выглядит просто, но симпатично =)

overlapping_menu

48 Jquery горизонтальная слайд навигация | Демо версия

slidemenu

49 Jquery вертикальное слайд меню | Демо версия

slidemenu2

50 Меню «Гаражные двери» | Демо версия

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

garagemenuexample

51 Динамичное меню | Демо версия

Способ от Bedrich Rios, по созданию приятного и динамичного меню при помощи JavaScript библиотеки jQuery.

navigation

52 Анимация для меню при помощи спрайтов | Демо версия

Интересная реализация анимированного меню с помощью спрайтов.

spr

53 Красивое выпадающее меню | Демо версия

Очень красивое решение, при нехватки места на сайте очень помогает, по сути на основе этой JavaScript библиотеки, размером в 10 килобайт, можно реализовать множество оригинальных идей.

dock_menu

54 3-х уровневое горизонтальное меню (+Видео) | Демо версия

Очень красивое 3-х уровневое выпадающее горизонтальное меню, плюс видео на английском как все это делается =)

cocon

55 Меню в стиле ipod | Демо версия

Сам не знаю где его применить … наверно только сайтам посвященым ipod’ам =)

sdasd

56 Lava-Lamp стиль горизонтального меню (+Видео) | Демо версия

Великолепное горизонтальное меню навигации Lava-Lamp стиль, для креативных умов человечества =) и видео как это все делается.

screenshot

57 Затемнение кнопок в меню навигации с помощью jQuery | Демо версия

fade-example

58 Развижное горизонтальное меню | Демо версия

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

jquery-breadcrumb

59 Анимационная навигация с помощью CSS и jQuery | Демо версия

na

60 Анимационное меню из иконок | Демо версия

dock1-example

61 Выпадающее горизонтальное меню | Демо версия

JankoAtWarpSpeed сделал красивое меню. Которое можно использовать и доставлять себе удовольствие в использовании такой навигации.

vimeo-like-menu

62 Многоуровневое выпадающее меню | Демо версия

multi-level-drop-down-menu

63 Горизонтальное выпадающее меню | Демо версия

jquery-suckerfish-menu

64 MooTools выпадающее меню | Демо версия

Меню прекрасно подойдет для туристического сайта =)

mootools-dropdown-menu

65 Деревовидное меню: dTree | Демо версия

javascript-tree-menu

66 Простое выпадающее меню в окне | Демо версия

jquery-pop-plugin

67 Красивое MooTools анимационное меню | Демо версия

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

mootools-animated-menu

68 Верхнее слайд меню с помощью jQuery | Демо версия

Такие меню очень экономят место на сайте.

jquery-sliding-menu

69 Раздвижное JavaScript меню | Демо версия

accordion-javascript

70 Стикер навигация | Демо версия

jquery-menu-system

71 Создание меню при помощи CSS и JavaScript | Демо версия

menuuu

72 Многоуровневое меню для сайта CSS | Демо версия

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

css_multi_menu

73 CSS3 меню | Демо версия

Тут сказать нечего, технология новая =) … пробуйте, экспериментируйте …

css3-tutorial-step5

74 Графическое CSS горизонтальное меню | Демо версия

Очень интересная идея подхода в создании данного меню.

contact

75 CSS горизонтальное меню со спрайтами | Демо версия

Красивое меню отлично подойдет для детского сайта или сайта игрушек.

tab-1-300x74

76 Горизонтальное меню с описанием | Демо версия

При наведении на ссылку снизу появляется подсказка.

me88

77 Спрайт горизонтальное меню | Демо версия

CSS горизонтальное меню. Очень стильно выглядит, сам обязательно буду пользоваться и вам советую, лучше сами посмотрите:

56

78 Горизонтальное меню | Демо версия

men1

79 Выпадающее меню | Демо версия

Меню которое очень красиво и не броско смотрится.

Incredible-Drop-Down-Menu-With-CSS-Only

80 CSS вертикальная навигация| Демо версия

При наведении на ссылку появляется стильная подсказка.

da

81 Меню из изобразений | Демо версия

Горизонтальное меню с прокруткой и сменой изображений.

231

82 Меню на Javascript с использование слайдера | Демо версия

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

menu-jscss

83 CSS вертикальное меню Digg | Демо версия

Вам нравиться дизайн сайта Digg.com?Вы можете позаимствовать технику создания ихнего меню.

menu2

84 Раздвижные ссылки | Демо версия

col

85 Секси выпадающее меню на jQuery и CSS | Демо версия

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

image1

86 Анимационная горизонтальная навигация на CSS & jQuery | Демо версия

final

87 Меню с иконками на CSS и jQuery | Демо версия

Красивое меню для экономящих место на сайте.

SlideOutNav

88 Меню с иконками на CSS и jQuery 2 | Демо версия

Тоже самое что и выше тока с другой стороны =)

slideoutreloaded1

89 Горизонтальное выпадающее меню | Демо версия

final2

90 Горизонтальное меню на jQuery | Демо версия

Горизонтальное меню в стиле Apple.

22222

91 Слайд Jquery меню | Демо версия

Очень стильное выпадающее меню, оцените сами.

step1

92 Анимационное горизонтальное меню | Демо версия

Меню для не традиционного и креативного подхода.

22_jquery_nav

93 jQuery плагин: Вид дерева | Демо версия

35_jquery_nav

94 Скролл jQuery меню | Демо версия

Горизонтальное скролл меню на CSS и jQuery

ssss

95 Анимационное выпадающее меню | Демо версия

jquery-smooth-menu

96 Супер jQuery меню на CSS3 | Демо версия

Анимационное графическое меню на новом CSS3

24_jquery_nav

97 MooTools горизонтальное меню | Демо версия

Горизонтальное меню в стиле Макбука

mootools-dock-menu

98 MooTools выпадающее горизонтальное меню | Демо версия

Многоуровневое горизонтальное выпадающее меню.

5545

99 Создание меню с пояснениями | Демо версия

po

100 Меню «Лава лампа» на jQuery | Демо версия

jQuery версия скрипта, впервые написанного на mootools.

fancymenu

101 Slashdot меню от Dynamic Drive | Демо версия

9

102 Выезжающее меню — плагин к jQuery | Демо версия

Очень необычное меню, мне понравилось.

12

103 Меню FastFind | Демо версия

Скрипт позволяет создавать вложенные меню, использую при этом AJAX. К нему так же применимо перетаскивание (благодаря Interface для jQuery).

fastfind

104 Выезжающее меню | Демо версия

Доступнен вариант с mootools и script.aculo.us.

side-bar

105 Разворачивающееся меню | Демо версия

Меню разворачивается при нажатии на ссылку.

xaxa

106 Слайд горизонтальная навигация | Демо версия

При нажатии на ссылку выпадает подменю.

jquery_menu52

107 jQueryЛист меню | Демо версия

Отличное меню рубрикатор по алфавиту.

jquery_menu35

108 Kwicks на jQuery | Демо версия

Красивое раздвижное меню при наведении курсора мыши.

jquery_menu3

109 Фиксированное меню | Демо версия

Если вы желаете чтоб ваша навигация была постоянно у посетителя на виду, то этот вариант для вас.

jquery_menu22

110 mb.menu | Демо версия

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

jquery_menu23

111 Выпадающее меню | Демо версия

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

jquery_menu25

112 Слайд развигающее меню | Демо версия

jquery_menu31

113 Увеличениее объекта при наведении | Демо версия

jquery_menu33

114 jQuery файловое дерево | Демо версия

jquery_menu36

115 Создание фиксированного меню на jQuery и CSS | Демо версия

jquery_menu37

116 iPod-стиль меню | Демо версия

jquery_menu40

117 jQuery select меню | Демо версия

Красиывй эффект навигации для элемента HTML-select

jquery_menu43

118 Красивое слайд меню Mootools | Демо версия

drop-down-menu6

119 Стильное горизонтальное меню использует jQuery | Демо версия

29-01_garage_door

120 CSS меню| Демо версия

При наведении курсора выскакивает подменю.

13-28_css_hover_menu

121 CSS навигация с иконками | Демо версия

Это красивое CSS меню с использование иконок.

13-27_css_navigation_icon

122 CSS Hoverbox | Демо версия

Что то типа меню для сайта комиксов …

13-06_hover_menu

123 Двухуровневое горизонтальное меню на CSS | Демо версия

13-12_css_horizontal_vreel

124 CSS горизонтальное меню | Демо версия

13-20_mini_tab

125 Outlook навигация | Демо версия

Навигационная панель из Outlooka

outlook

126 Меню на jQuery и CSS3 | Демо версия

CSS3 дизайн меню … пробуйте, экспериментируйте.

css3

127 Слайд меню на JQuery и CSS | Демо версия

bg-rotate-slideup-nav-closed

128 Навигация на CSS и jQuery | Демо версия

Красивый эффект при наведении курсора.

mare2

129 CSS3 и jQuery выпадающее меню | Демо версия

Очень красивое выпадающее горизонтальное меню.

css3dropdown1

130 Выезжающее меню с помощью jQuery | Демо версия

bottomSlideOut

131 Горизонтальное меню | Демо версия

При наведении курсора, ссылка меняется на подменю.

menus

132 Графическое горизонтальное меню | Демо версия

Красивое анимационное меню, для например сайта по рисованию.

navigation-items

133 Горизонтальное меню под ваш размер на jQuery | Демо версия

menure

134 jDiv: jQuery выпадающее меню | Демо версия

jdiv

135 Супер меню на jQuery & CSS3 | Демо версия

Очень стильное и красивое меню. Оцените демо:

halftone

136 Fresh вертикальное меню | Демо версия

Стильная и креативная навигация … Фрешшш =)

fresh

137 Спрятанное выпадающее горизонтальное меню на jQuery | Демо версия

ee1

138 Lava Lamp простое меню | Демо версия

Простое но очень красивое меню …

queness

139 jQuery горизонтальное меню из иконок | Демо версия

Очень красивое горизонтальное меню из иконок, можно использовать на персональных страницах или в профилях.

name

140 Вертикальная навигация | Демо версия

Сбоку от ссылки появляется стильная подсказка.

sample1

141 jQuery мега меню| Демо версия

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

tech

142 Меню на CSS & jQuery | Демо версия

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

sample

143 Слайд меню на jQuery | Демо версия

Меню с иконками, при наведение меняется иконка и показывается подсказка, красиво смотрится.

jqueryslidingmenu

144 Слайд меню | Демо версия

img

145 Спрайт горизонтальное меню используется CSS и MooTools | Демо версия

Красивое горизонтальное меню. Подойдет для любого сайта.

sprites-blue-nav

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

Бизнес анекдот:

Вечер, пятница … сидит замученный Манагер на работе. Звонит ему жена:

-Ало =(  !?!?!

-Дорогой ты уже скоро?

-Понимаешь передо мной тут сейчас лежат 4 кубика …, на одном написано “ж”, на втором “о”, на третьем “п”, и на четвертом “а”…  И из этого всего мне нужно сложить слово “Счатье”. Пока не сложу домой не приду!

Метки: , ,

Понравиась статья? Можете добавить в:
Можете подписаться на мой фид и получайте будущие публикации по RSS.

  • Данил

    Удаление вирусов с сайтов на cms Joomla.
    Группа вк: vk.com/virus_joomla
    Цена: от 1500 рублей

  • Олег

    Онлайн сервис поможет сделать классное меню для вашего сайта.

    https://www.youtube.com/watch?feature=player_embedded&v=_QRiL5fBBU8

  • Данил

    Привет, я – HTML верстальщик.
    Кидайте макет – оценю.
    Отзывы и примеры тут – danil-html.ru

  • http://shebeko.com/ Шебеко Николай

    еще одна ссылочка для всех http://www.sothink.com/web-design-tools.htm

  • Михаил Семенович Де Петрушкин

    Ужасно! Я устал все смотреть! Разве можно так?!