5 810 Сегодня вы увидите, как можно создать прикольное выпадающее многоуровневое навигационное меню, используя при этом чистый CSS со свойствами из CSS3, например, таких-как border-radius, box-shadow, text-shadow и linear gradient. Это меню будет выглядеть идеально в Firefox, Chrome и, конечно, Safari.
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 |
<div id="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Our Portfolio</a></li> <li><a href="#">One Dropdown</a> <ul> <li><a href="#">Level 2.1</a></li> <li><a href="#">Level 2.2</a></li> <li><a href="#">Level 2.3</a></li> <li><a href="#">Level 2.4</a></li> <li><a href="#">Level 2.5</a></li> </ul> </li> <li><a href="#">Three Levels</a> <ul> <li><a href="#">Level 2.1</a></li> <li><a href="#">Level 2.2</a></li> <li><a href="#">Level 2.3</a> <ul> <li><a href="#">Level 2.3.1</a></li> <li><a href="#">Level 2.3.2</a></li> <li><a href="#">Level 2.3.3</a></li> <li><a href="#">Level 2.3.4</a></li> <li><a href="#">Level 2.3.5</a></li> <li><a href="#">Level 2.3.6</a></li> <li><a href="#">Level 2.3.7</a></li> </ul> </li> <li><a href="#">Level 2.4</a></li> <li><a href="#">Level 2.5</a></li> </ul> </li> <li><a href="#">Services</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> |
Ниже вы видите чистый скелет этого меню без каких-либо стилей.
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 |
#nav { float: left; font: bold 12px Arial, Helvetica, Sans-serif; border: 1px solid #121314; border-top: 1px solid #2b2e30; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; overflow: hidden; } #nav ul { margin:0; padding:0; list-style:none; } #nav ul li { float:left; } #nav ul li a { float: left; color:#d4d4d4; padding: 10px 20px; text-decoration:none; background:#3C4042; background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) ); background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% ); background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% ); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset; border-left: 1px solid rgba(255, 255, 255, 0.05); border-right: 1px solid rgba(0,0,0,0.2); text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6); } #nav li ul { background:#3C4042; background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) ); background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% ); background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% ); border-radius: 0 0 10px 10px; -moz-border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px; left: -999em; margin: 35px 0 0; position: absolute; width: 160px; z-index: 9999; box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; border: 1px solid rgba(0, 0, 0, 0.5); } #nav li ul a { background: none; border: 0 none; margin-right: 0; width: 120px; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; border-bottom: 1px solid transparent; border-top: 1px solid transparent; } |
После того, как добавите этот стиль, вы увидите обычное меню без эффектов и выпадающих элементов.
После добавления следующего 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 |
#nav ul li a:hover, #nav ul li:hover > a { color: #252525; background:#3C4042; background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) ); background: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% ); background: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% ); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000; } #nav li ul a:hover, #nav ul li li:hover > a { color: #2c2c2c; background: #5C9ACD; background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61,111,177)), color-stop(0.51, rgb(80,136,199)), color-stop(1, rgb(92,154,205)) ); background: -moz-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% ); background: -o-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% ); border-bottom: 1px solid rgba(0,0,0,0.6); border-top: 1px solid #7BAED9; text-shadow: 0 1px rgba(255, 255, 255, 0.3); } #nav li:hover ul { left: auto; } #nav li li ul { margin: -1px 0 0 160px; -webkit-border-radius: 0 10px 10px 10px; -moz-border-radius: 0 10px 10px 10px; border-radius: 0 10px 10px 10px; visibility:hidden; } #nav li li:hover ul { visibility:visible; } |
Все почти идеально, кроме углов первой и последней ссылки. Исправляем.
|
1 2 3 4 5 6 7 8 9 10 11 |
#nav ul ul li:last-child > a { -moz-border-radius:0 0 10px 10px; -webkit-border-radius:0 0 10px 10px; border-radius:0 0 10px 10px; } #nav ul ul ul li:first-child > a { -moz-border-radius:0 10px 0 0; -webkit-border-radius:0 10px 0 0; border-radius:0 10px 0 0; } |
Теперь первое и последнее подменю выглядят так-как нужно.
Вот и все. Теперь вы можете еще раз посмотреть пример или скачать архив этого меню.
Не леквид, в IE ужасно гребёт... Подойдёт разьве что в узкоспециализированных проектах, например в какой-нибудь панели администратора для «самого себя». То есть, в тех проектах, где факт использования IE исключается. В остальных случаях — это будет полный провал...
в 9 IE работает идеально.
Вам показать статистику по браузерам?
Проходят времена, когда мы должны подстраиваться под IEшку. Именно благодаря упорному использованию в своих работах магии CSS3, зашевелились и разработчики IE. Учитывая как втюхиваются обновления в Windows, можно не особо переживать, 9й IE накроет большую часть своих сторонников, а этот «тпру-у-узер» довольно неплохо справляется с CSS3.
IE гавно ребята Opera ну максимум хром похулиганить и все ((((9
Как сделать таким же образом вертикальное меню? Как расположить основные рубрики по вертикали, и чтобы при наведении на них, подрубрики показывались не снизу, а слева? Спасибо.
Это не многоуровневое, а трехуровневое максимум. Как в примере.
Все уровни, начиная с 4-го, будут отображаться при наведении на 2-й