Горизонтальное выпадающего меню на CSS3 | Vladmaxi.net
ГлавнаяВеб-разработчикуCSSГоризонтальное выпадающее меню на CSS3
Дата: 20.03.2013 в 18:37 | Просмотров: 7405

Горизонтальное выпадающее меню на CSS3

Меню для сайта
Скачатьбесплатно с сервера
Демодемонстрация

Сегодня мы узнаем как сделать красивое css меню. Подобное меню мы создавали в статье “Красивое выпадающее меню на CSS3 и JQuery”, но все же некоторые отличия у них есть. Меню будет включать в себя подменю, которые будут скользить при наведении мышью на их родителя – заголовок меню. Оно выполнено без использования JavaScripts – только чистый CSS. При его создании использовались последние новшества CSS3 – отображение в браузерах Firefox, Chrome и Safari (возможно последняя Opera тоже будет поддерживать его). И насколько я знаю, IE10 тоже будет нормально его отображать.

Теперь приступим непосредственно к программированию.

Шаг 1 – HTML:

Как обычно, мы начнем с HTML. Вот HTML код  нашего меню.

Шаг 2 – CSS:

Рассмотрим использование CSS стилей. Первые два абзаца стилей (вы можете пропустить их) принадлежат к нашей демонстрационной странице. Все остальные – принадлежат к меню.

Шаг 3 – Изображения:

Для того, чтобы создать горизонтальное выпадающее css меню мы используем только одно изображение, как background нашего меню. Второе изображение – только фон для нашего меню. Вы же можете использовать любое свое, исходя из дизайна вашего сайта.

Горизонтальное выпадающее меню на CSS3
Горизонтальное выпадающее меню на CSS#

Заключение:

Надеюсь Вам понравился данный урок. Как видите сделать выпадающее меню совсем не сложно. Если есть вопросы – задаем их в комментариях ниже!

 

Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://www.script-tutorials.com/creating-css3-dropdown-menu-2/
Перевел: Владислав Бондаренко


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