10 лучших вариантов реализации многоуровнего меню для навигации по ресурсу.

На сайте devsnippets.com была опубликована статья с примерами и исходниками вариантов создания многоуровневого меню. Перевод данного обзора и предлагается вашему вниманию.Кстати,картинки кликабельны. Веб-разработчики могут создавать горизонтальные или вертикальные меню с интуитивно понятной схемой навигации при помощи CSS. JavaScript позволяет создавать ещё более гибкие, интерактивные схемы навигации по сайту любого типа и рода. Сегодня мы хотим осветить в данной статье 10 лучших вариантов реализации меню навигации при помощи использования различных JavaScript библиотек, включая jQuery, Mootools, а также толики CSS волшебства. Что из этого получится, смотрите ниже. 1. Создание меню навигации по аналогии с Vimeo.com Данная схема навигации по сайту Vimeo.com, создана известным разработчиком Janko. Её главная особенность это выпадающее подменю, появляющееся при наведении курсора на форму поиска. Оно предлагает пользователю различные опции, которые можно выбрать, чтобы сузить поиск. Для примера мы использовали простое выпадающее CSS меню, основанное на неупорядоченном списке. Структура данного меню представлена на картинке ниже. Как вы можете видеть, UL состоит из четырёх элементов. Первый - это лого с выпадающим коротким подменю. Далее следует ссылка для авторизации, ссылка на хэлп с подменю, а также форма поиска, также обладающая подменю. Каждое меню показывается при наведении курсора на соответствующую линку. Демо Исходник 2. CSS фреймворк для создания выпадающих меню. Это кроссбраузерный фреймворк, который содержит набор настраиваемых шаблонов выпадающих меню. Определения CSS (CSS definitions) в нём классифицированы в структурные и тематические типы. Таким образом, для создания нового выпадающего CSS меню необходимо лишь только создать новую тему, в то время как сама структура постоянна. Меню можно изменять, просто переименовывая класс. На выбор предлагается несколько вариантов организации - горизонтальное, вертикальное слева-направо, вертикальное справа-налево, горизонтальное линейное, горизонтальное верхнее. Основные особенности: • Код и файлы прекрасно организованы. Есть возможность прикрутить фреймворк к CMS или другим тулам, также как и XHTML вебсайтам. • Трансформируется при помощи простого переименования класса • Существуют конфигурации для Internet Explorer 5 или позднее, Mozilla Firefox 1.5 и позднее, Opera 7 и позднее, Apple Safari 2 и позднее, Google Chrome 1 и т.д. • Минимум JavaScript кода (только для IE 6 и более ранних версий). Может использоваться с популярными библиотеками JQuery или Scriptaculous. Всё остальное – чистый CSS. Демо Исходник 3. Выпадающее многоуровневое JavaScript меню. Данный скрипт, используемый для организации многоуровневого выпадающего меню, весит всего 1,2 килобайта. Его отличает наличие анимации, а также лёгкость в установке и поддержка возможности использования сразу нескольких таких меню. Демо Исходник 4. MenuMatic MenuMatic – это класс библиотеки MooTools 1.2 посредством которого упорядоченный или неупорядоченный список ссылок превращается в динамическое выпадающее меню. Те пользователи, которые обделены поддержкой JavaScript увидят CSS меню – версию меню Suckerfish Dropdowns Патрика Гриффита и Дэна Уэба немного изменённое Мэттью Кэроллом с возможностью перехода по меню при помощи клавиатуры. Основные особенности: • Дружественен к поисковикам. • Навигация по меню может осуществляться с клавиатуры при помощи кнопок Tab и стрелок. • Гибкость – при отсутствии у пользователя поддержки JavaScript используется выпадающее CSS меню. Демо Исходник 5. Круговое меню с выпадающими подменю. Это симпатичное меню добавляет подуровень иконок для опций внутри основного круга меню. Также присутствует возможность добавлении к каждой иконке краткого описания. Протестировано на работу в IE6, IE7, Firefox, Opera, Safari (PC) and Google Chrome 6. Причудливое слайд-меню для MooTools В данном слад меню присутствует счётчик состояния – после того как пройдёт заданное время без движения мышки в окне, все подменю сворачиваются в изначальное состояние. Демо Исходник 7. Плавное меню навигации Данное мультиуровневое CSS меню на основе jQuery превращает навигацию по ресурсу в плавное и эстетичное занятие. Это хорошая способ подчёркнуть важность и улучшить удобство использования данного элемента на странице. Содержание меню может определяться разметкой страницы или же внешним файлом и прикручиваться Ajax'ом. Благодаря использованию jQuery подменю выпадает в виде слайда с затуханием, а глубину тени можно конфигурировать. 8. "Раскладывающееся" меню. Демо Исходник Это меню представляет собой часть туториала написанного Антонии Лупетте о повторном использовании кода в веб-проектах. В этом примере он организовал навигацию при помощи блоков, анимированно раскрывающихся при наведении на них мыши. 9. Аналог меню Digg.com Данное меню представляет собой реплику схемы навигации известного сайта Digg.com. Самые главные элементы – подписка, поиск и информация об аккаунте, располагаются в верхнем правом углу экрана, как раз там, где вы и ожидаете. Конфигурируемая ширина, выпадающие подменю, удобный поиск, простая смена цветов – классика жанра, одним словом. Демо Исходник 10. Браузер файлов на jQuery Данный браузер файлов на jQuery представляет собой настраиваемый AJAX плагин. С его помощью вы сможете создать структуру типа "файловое дерево" буквальной одной строчкой кода! На данный момент существуют server-side скрипты для PHP, ASP, ASP.NET, JSP, and Lasso. Что мне нравится в этом меню, так это возможность использовать разные иконки для обозначения различных типов файлов, что позволяет находить нужный файл буквально на лету. Кроме того можно настраивать скорость выпадения и исчезания списков подменю. Демо Исходник Источник Оригинал

Место солидарности беларусского ИТ-комьюнити

Далучайся!