Как создать выпадающее навигационное меню при помощи HTML5, CSS3 и jQuery

создать меню

От автора:

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

HTML5 вносит в спецификацию выделенный элемент <nav>, который следует использовать как контейнер для любой значительной навигационной структуры, такой как основные вертикальные или горизонтальные навигационные меню сайтов, или, например, внутристраничное оглавление. IE (Internet Explorer), к сожалению, пока не поддерживает этот новый элемент, но можно использовать простое решение проблемы, о котором, я уверен, вы все знаете.

Пользуясь CSS3, можно покончить с тем, что потребовало бы использования нескольких фоновых изображений и, возможно, дополнительного упаковочного контейнера или двух, и полагаться (почти) полностью на одно из новых свойств стилей, таких, как закругленные углы и отбрасывание тени, например, которые имеются в наличии у поддерживающих браузеров. К тому же, не все браузеры (опять IE!) поддерживают эти новые правила, но мы можем очень легко обеспечить альтернативные решения для тех из них, которые не могут справиться с нашими стилями.

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

Также скачайте исходники себе на компьютер!

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Шаг 1. Начинаем

Нам потребуется копия последнего на момент написания этой статьи релиза jQuery, версия 1.4.2, а также копия текущей версии (1.1) превосходной библиотеки Modernizr, которые мы применим вместе с используемой CSS3, сосредоточившись на поддерживающих браузерах.

Сделайте где-нибудь в своем компе папку проекта для файлов, которые мы будем создавать, и назовите ее nav, внутри нее сделайте три новых папки; одну с названием js, одну css и одну с именем fallback. Убедитесь, что копии как jQuery, так и Modernizr сохранены в папке js.

Шаг 2. Основная страница

Начните кодирование с создания в своем любимом кодовом редакторе следующей страницы:

Сохраните в папке nav как nav.html. Мы начинаем с минимального объявления doctype’а для HTML5, который позволяет определить тип документа в участке кода, которым мы собираемся использовать. Также устанавливаем по умолчанию язык и кодировку символов; хотя документ останется корректным и без этих вещей, включать их — хорошая привычка, и страница будет выдавать предупреждения во время валидации, если по умолчанию не установлен язык. Затем связываем таблицу стилей (следующим шагом мы ее создадим) и используем условный комментарий, для того чтобы в случае использования IE, закачать прекрасный скрипт Remy Sharp html5.js.

Внутри тега body страницы у нас находится элемент <nav> в качестве контейнера обычного списка ссылок, и еще мы вставили подменю. Этот элемент не создаст для нас навигационное меню волшебным образом и не содержит в себе каких-либо новых элементов пунктов меню (menuitem) или еще чего-нибудь подобного, так что неупорядоченный список – подходящий выбор. Элемент <nav> — всего лишь семантический контейнер нашего меню, который описывает его функцию в документе, чтобы заменить обобщенный элемент <div>, который на странице, по сути, ничего не формулирует.

В конце тега body мы связываемся со своими файлами сценариев jQuery и Modernizr. Пользоваться jQuery мы будем немного позже, когда начнем добавлять функциональность своему меню, а Modernizr начнет работать сразу же, обнаруживая используемый тип браузера и добавляя соответствующую последовательность имен классов в элемент HTML, таким образом, что мы сможем использовать возможности CSS3 только в тех браузерах, где это действительно будет работать. Мы также добавили имя класса no-js в тэг <body> страницы; позднее мы удалим его, если JavaScript даст такую возможность, так что еще используем его для добавления стилей, в случае когда JavaScript отключен.

Шаг 3. Основной дизайн

Теперь давайте добавим немного основного дизайна; создайте следующую таблицу стилей:

Сохраните этот файл в каталоге css как nav.css. Первое правило – исключительно для того, когда JavaScript отключен, оно позволяет скрытому подменю отображаться при проведении над ним мышью исключительно при помощи CSS. Остальной код определяет набор основных стилей, которые размечают меню

Метки: , ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (9)

  1. nsd

    Также скачайте исходники себе на компьютер! — не качается!

    • RohViktor

      К сожалению есть такое дело. Связано с тем, что на сайте, с которого делался перевод, также не скачивается исходник.

  2. Дима

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

  3. Светлана

    пасибки за урок))) всё прекрасно работает)

  4. Елена

    Исходники не скачиваются, жаль…

  5. Koozdr

    Скажите пожалуйста, как полученные nav.html, nav.css ie.css и прочие файлы интегрировать на сайт на движке joomla (версия 1.7)

  6. AXONIC

    Пасиб-Пастараюсь всё усвоить

  7. Artur

    Нужно подключать modernizr и shiv или хватает modernizr ??

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree