Навигация на jquery и css - горизонтальные меню

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

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

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

Начнём.


1. Solid Block Menu - горизонтальное меню




Простое, но красивое меню, написанное на CSS.

Исходник и инструкции, Демонстрационная версия


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




Пример, похожий на предыдущий. В исходнике даётся урок. Усвоив его, вы сможете с лёгкостью создавать подобные CSS-меню со своими цветами и размерами.

Исходник и инструкции, Демонстрационная версия


3. Горизонтальное меню с выделением пункта при наведении мышки




Смотрится довольно симпатично.

Исходник и инструкции, Демонстрационная версия


4. Несколько горизонтальных меню в виде вкладок




Несколько вариантов, выглядят очень красиво. Чтобы посмотреть исходный код, откройте страницу демо и нажмите Ctrl+U.

Скачать исходник, Демонстрационная версия


5. Несколько горизонтальных CSS меню




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

Исходник и инструкции, Демонстрационная версия


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




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

Исходник и инструкции, Демонстрационная версия




7. Ещё одно CSS-меню




При наведении меняется картинка - подчёркивается пункт. Выглядит неплохо.

Исходник и инструкции, Демонстрационная версия


8. Анимированное горизонтальное меню




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

Исходник и инструкции, Демонстрационная версия


9. Горизонтальное меню с использованием библиотеки jquery




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

Исходник и инструкции, Демонстрационная версия


10. jQuery - выпадающее горизонтальное меню на сером фоне




Простой пример. Зная CSS, несложно изменить цвета на нужные. Если у пункта есть подпункты, они выпадают при наведении курсора без нажатия кнопки мышки.

Исходник и инструкции, Демонстрационная версия


11. jQuery - ещё одно выпадающее меню (Simple Drop-Down Menu Plugin)




Выглядит получше предыдущего.

Исходник и инструкции, Демонстрационная версия


12. Выпадающее меню Simple Drop-Down Menu v2.0




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

http://javascript-array.com/scripts/simple_drop_down_menu (Исходник и инструкции), Демонстрационная версия - http://javascript-array.com/scripts/simple_drop_down_menu/


13. Выпадающее меню (только CSS)




Простая реализация горизонтального меню, выполненного на чистом CSS. Очень лёгкая, а поэтому и скоростная версия.

Исходник и инструкции, Демонстрационная версия


14. droppy - выпадающее горизонтальное меню




При наведении курсора подкатегории как бы выезжают вниз.

Исходник и инструкции, Демонстрационная версия





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




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

Исходник и инструкции, Демонстрационная версия


16. Красивое выпадающее CSS меню




Дёшево и сердито, я бы так сказал. Простая и красивая реализация меню.

Исходник и инструкции, Демонстрационная версия


17. Выпадающее меню в стиле DOS




Этот пример мне почему-то напомнил DOS-овские менюшки.
Работает во всех браузерах. Очень информативное и функциональное.

Исходник и инструкции, Демонстрационная версия


18. CSS + Java = выпадающее меню




Размер скрипта 1,8 Кб. Автор Michael Leigeber.

Исходник и инструкции, Демонстрационная версия


19. Pure CSS Drop Down Menu




Ширина выпадающих подпунктов позволяет использовать довольно длинные названия и фразы.

Исходник и инструкции, Демонстрационная версия


20. Симпатичное меню от kwLabs




Два великолепных примера выпадающих меню - и горизонтальный, и вертикальный варианты.

Исходник и инструкции, Демонстрационная версия


21. Flickr Horizontal Menu




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

Исходник и инструкции, Демонстрационная версия


22. Анимационное выпадающее меню




Реализовано отлично. Используется jQuery и различные эффекты.

Исходник и инструкции, Демонстрационная версия



На этом пока всё, этот пост будет обновляться по мере нахождения новых скриптов, а в следующем я сделаю обзор таких же, но уже вертикальных меню.

Если у вас есть красивые примеры скриптов, оставляйте их в комментариях.