Как создать выпадающее навигационное меню при помощи HTML5, CSS3 и jQuery
Дата публикации: 2010-11-27
От автора:
В этом учебнике мы посмотрим, чего можно добиться при помощи HTML5 и CSS3, когда речь заходит об основе современных вебсайтов: простом выпадающем навигационном меню. Также мы воспользуемся jQuery для реализации эффектов и выполнения последних штрихов.
HTML5 вносит в спецификацию выделенный элемент <nav>, который следует использовать как контейнер для любой значительной навигационной структуры, такой как основные вертикальные или горизонтальные навигационные меню сайтов, или, например, внутристраничное оглавление. IE (Internet Explorer), к сожалению, пока не поддерживает этот новый элемент, но можно использовать простое решение проблемы, о котором, я уверен, вы все знаете.
Пользуясь CSS3, можно покончить с тем, что потребовало бы использования нескольких фоновых изображений и, возможно, дополнительного упаковочного контейнера или двух, и полагаться (почти) полностью на одно из новых свойств стилей, таких, как закругленные углы и отбрасывание тени, например, которые имеются в наличии у поддерживающих браузеров. К тому же, не все браузеры (опять IE!) поддерживают эти новые правила, но мы можем очень легко обеспечить альтернативные решения для тех из них, которые не могут справиться с нашими стилями.
Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Нам потребуется копия последнего на момент написания этой статьи релиза jQuery, версия 1.4.2, а также копия текущей версии (1.1) превосходной библиотеки Modernizr, которые мы применим вместе с используемой CSS3, сосредоточившись на поддерживающих браузерах.
Сделайте где-нибудь в своем компе папку проекта для файлов, которые мы будем создавать, и назовите ее nav, внутри нее сделайте три новых папки; одну с названием js, одну css и одну с именем fallback. Убедитесь, что копии как jQuery, так и Modernizr сохранены в папке js.
Шаг 2. Основная страница
Начните кодирование с создания в своем любимом кодовом редакторе следующей страницы:
XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5, CSS3 and jQuery Navigation menu</title>
<li><a href="#"title="Nav Link 1">Nav Link 1</a></li>
<li>
<a href="#"title="Nav Link 1">Nav Link 2
<ul>
<li><a href="#"title="Sub Nav Link 1">Sub Nav Link 1</a></li>
<li><a href="#"title="Sub Nav Link 2">Sub Nav Link 2</a></li>
<li><a href="#"title="Sub Nav Link 3">Sub Nav Link 3</a></li>
<li><a href="#"title="Sub Nav Link 4">Sub Nav Link 4</a></li>
<li class="last"><a href="#"title="Sub Nav Link 5">Sub Nav Link 5</a></li>
</ul>
</li>
<li><a href="#"title="Nav Link 1">Nav Link 3</a></li>
<li><a href="#"title="Nav Link 1">Nav Link 4</a></li>
<li><a href="#"title="Nav Link 1">Nav Link 5</a></li>
</ul>
</nav>
<script src="js/jquery.js"></script>
<script src="js/modernizr.js"></script>
</body>
</html>
Сохраните в папке 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* JS disabled styles */
.no-js nav li:hover ul {display:block;}
/* base nav styles */
nav {display:block;margin:0auto20px;border:1pxsolid#222;position:relative;background-color:#6a6a6a;font:16pxTahoma,Sans-serif;}
nav ul {padding:0;margin:0;}
nav li {position:relative;float:left;list-style-type:none;}
nav ul:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
nav li a {display:block;padding:10px20px;border-left:1pxsolid#999;border-right:1pxsolid#222;color:#eee;text-decoration:none;}
nav li a:focus {outline:none;text-decoration:underline;}
nav li:first-child a {border-left:none;}
nav li.last a {border-right:none;}
nav a span {display:block;float:right;margin-left:5px;}
nav ul ul {display:none;width:100%;position:absolute;left:0;background:#6a6a6a;}
nav ul ul li {float:none;}
nav ul ul a {padding:5px10px;border-left:none;border-right:none;font-size:14px;}
nav ul ul a:hover {background-color:#555;}
Сохраните этот файл в каталоге css как nav.css. Первое правило – исключительно для того, когда JavaScript отключен, оно позволяет скрытому подменю отображаться при проведении над ним мышью исключительно при помощи CSS. Остальной код определяет набор основных стилей, которые размечают меню
Комментарии (9)