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

создать меню

От автора:

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

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

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


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

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

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

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

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

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

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

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>HTML5, CSS3 and jQuery Navigation menu</title>
		<link rel="stylesheet" href="css/nav.css">
		<!--[if IE]>
			<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>
	<body class="no-js">
		<nav id="topNav">
	        	<ul>
       		     	<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. Основной дизайн

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

/* JS disabled styles */
.no-js nav li:hover ul { display:block; }

/* base nav styles */
nav { display:block; margin:0 auto 20px; border:1px solid #222; position:relative; background-color:#6a6a6a; font:16px Tahoma, 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:10px 20px; border-left:1px solid #999; border-right:1px solid #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:5px 10px; border-left:none; border-right:none; font-size:14px; }
nav ul ul a:hover { background-color:#555; }

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

Метки: , ,

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

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

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

  1. nsd

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

    • Виктор Рог

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

  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> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree