Веб-дизайнеру
Веб-разработчику
Дополнительно
Горизонтальное выпадающее меню на CSS3
Скачать
Демо
Сегодня мы узнаем как сделать красивое css меню. Подобное меню мы создавали в статье “Красивое выпадающее меню на CSS3 и JQuery”, но все же некоторые отличия у них есть. Меню будет включать в себя подменю, которые будут скользить при наведении мышью на их родителя – заголовок меню. Оно выполнено без использования JavaScripts – только чистый CSS. При его создании использовались последние новшества CSS3 – отображение в браузерах Firefox, Chrome и Safari (возможно последняя Opera тоже будет поддерживать его). И насколько я знаю, IE10 тоже будет нормально его отображать.
Теперь приступим непосредственно к программированию.
Шаг 1 – HTML:
Как обычно, мы начнем с HTML. Вот HTML код нашего меню.
|
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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <link rel="stylesheet" href="/web-developer/css/css/style.css" type="text/css" media="all"> <title>Горизонтальное выпадающее меню на CSS3</title> </head> <body> <div class="example"> <ul id="nav"> <li><a href="#">Главная</a></li> <li><a href="#">Обучение</a> <div> <ul> <li><a href="#">HTML / CSS</a></li> <li><a href="#">JS / jQuery</a></li> <li><a href="#">PHP</a></li> <li><a href="#">MySQL</a></li> <li><a href="#">XSLT</a></li> <li><a href="#">Ajax</a></li> </ul> </div> </li> <li><a href="#">Ресурсы</a> <div> <ul> <li><a href="#">PHP</a></li> <li><a href="#">MySQL</a></li> <li><a href="#">XSLT</a></li> <li><a href="#">Ajax</a></li> </ul> </div> </li> <li><a href="#">Страницы</a> <div> <ul> <li><a href="#">Страница 1</a></li> <li><a href="#">Страница 2</a></li> <li><a href="#">Страница 3</a></li> <li><a href="#">Страница 4</a></li> <li><a href="#">Страница 5</a></li> </ul> </div> </li> <li><a href="#">О нас</a></li> <li><a href="#">Каталог</a></li> <li><a href="#">Контакты</a></li> <li class="pad"></li> </ul> </div> </body> </html> |
Шаг 2 – CSS:
Рассмотрим использование CSS стилей. Первые два абзаца стилей (вы можете пропустить их) принадлежат к нашей демонстрационной странице. Все остальные – принадлежат к меню.
|
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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 |
/* demo page styles */ body { background:#eee; margin:0; padding:0; } .example { position:relative; background:#fff url(../images/background.jpg); width:670px; height:470px; border:1px #000 solid; margin:20px auto; padding:15px; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; } /* main menu styles */ #nav,#nav ul { font-family:verdana; list-style:none; margin:0; padding:0; position:relative; } #nav { height:50px; left:0; overflow:hidden; top:0; } #nav li { float:left; position:relative; z-index:10; } #nav li a { background:url(../images/bg-menu.png) no-repeat center top; color:#fff; display:block; float:left; font-size:14px; height:51px; line-height:40px; padding:0 10px; position:relative; text-decoration:none; z-index:20; } #nav li:first-child a { background:url(../images/bg-menu.png) no-repeat left top; padding-left:35px; } #nav li ul li:first-child a { background-image:none; padding-left:10px; } #nav li.pad { background:url(../images/bg-menu.png) no-repeat right top; display:block; height:51px; width:35px; } #nav ul { background:#009900; height:auto; padding:10px 0; position:absolute; top:-115px; width:180px; z-index:1; border-radius:8px; /*some css3*/ -moz-border-radius:8px; -webkit-border-radius:8px; transition:0.8s ease-in-out; box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5); -moz-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5); -webkit-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5); -moz-transition:0.8s ease-in-out; -o-transition:0.8s ease-in-out; -webkit-transition:all 0.8s ease-in-out; } #nav ul li { width:180px; } #nav ul li a { background:transparent; height:20px; line-height:20px; width:160px; } #nav:hover { height:200px; } #nav li:hover ul { -moz-transform:translate(0,161px); /*some css3*/ -o-transform:translate(0,161px); -webkit-transform:translate(0,161px); } #nav a:hover,#nav li:hover > a { color:#99ff33; } |
Шаг 3 – Изображения:
Для того, чтобы создать горизонтальное выпадающее css меню мы используем только одно изображение, как background нашего меню. Второе изображение – только фон для нашего меню. Вы же можете использовать любое свое, исходя из дизайна вашего сайта.
Заключение:
Надеюсь Вам понравился данный урок. Как видите сделать выпадающее меню совсем не сложно. Если есть вопросы – задаем их в комментариях ниже!
Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока:
Перевел: Владислав Бондаренко
