От автора: Обширные меню часто используются на сайтах электронной коммерции или просто на обширных порталах. «Мега» меню становятся все более и более популярны, потому что являются эффективным решением для отображения большого количества информации, не нарушая при этом разметку страницы. В этом уроке мы увидим, как построить удивительное, кроссбраузерное, выпадающее меню, используя только CSS, и придадим ему «товарный вид» с помощью CSS3.
Перед тем, как мы приступим к созданию выпадающего меню на CSS, я Вам рекомендую просмотреть демо-результат работы.
Также скачайте исходники себе на компьютер! Итак, начнем создавать выпадающее меню на css.
Шаг 1: Строим строку навигации
Давайте начнем с основного меню. Сделаем его при помощи ненумерованного списка и добавим немного CSS.
|
1 2 3 4 5 6 7 |
<ul id="menu"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> |
Создаем контейнер для меню
Теперь применим CSS. Контейнер для меню будет фиксированной ширины и отцентрирован, задав значения left:auto и right:auto свойству margin
|
1 2 3 4 5 6 7 |
#menu { list-style:none; width:940px; margin:30px auto 0px auto; height:43px; padding:0px 20px 0px 20px; } |
Сейчас посмотрим, как мы можем его улучшить, используя CSS 3. Мы должны использовать разный синтаксис для Webkit браузеров (таких как Safari) и для Mozilla браузеров (таких как Firefox).
Для закругления углов синтаксис будет такой:
|
1 2 3 |
-moz-border-radius: 10px -webkit-border-radius: 10px; border-radius: 10px; |
Чтобы сохранить согласованность при выборе цвета, можно воспользоваться сервисом Facade, он поможет выбрать более светлый или более темный цвет, чем цвет основного фона.
|
1 2 3 |
background: #014464; background: -moz-linear-gradient(top, #0272a7, #013953); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953)); |
В первый строке устанавливается обычный фоновый цвет для старых браузеров. Во второй и третьей строке используется градиент от верха страницы к низу используя переход цвета от #0272a7 к #013953.
Сейчас мы можем добавить более темную и изысканную границу, применив рамку и тень к нашему блоку меню. Синтаксис одинаковый для всех браузеров: первое значение – горизонтальное смещение; вторая – вертикальное смещение; третья – радиус размытия (маленькое значение делает его проще, в нашем примере он будет 1рх). Мы установили все смещения в 0, таким образом, значение размытия будет равномерным по всей границе.
|
1 2 3 |
-moz-box-shadow:inset 0px 0px 1px #edf9ff; -webkit-box-shadow:inset 0px 0px 1px #edf9ff; box-shadow:inset 0px 0px 1px #edf9ff; |
Вот полный CSS код контейнера #menu.
|
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 |
#menu { list-style:none; width:940px; margin:30px auto 0px auto; height:43px; padding:0px 20px 0px 20px; /* Rounded Corners */ -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; /* Background color and gradients */ background: #014464; background: -moz-linear-gradient(top, #0272a7, #013953); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953)); /* Borders */ border: 1px solid #002232; -moz-box-shadow:inset 0px 0px 1px #edf9ff; -webkit-box-shadow:inset 0px 0px 1px #edf9ff; box-shadow:inset 0px 0px 1px #edf9ff; } |
Добавляем стили к пунктам меню
Начнем со всех пунктов меню, выровненных по левому краю и с отступом между ними margin-right (padding будет необходим для наведенного состояния пункта меню):
|
1 2 3 4 5 6 7 8 9 10 |
#menu li { float:left; display:block; text-align:center; position:relative; padding: 4px 10px 4px 10px; margin-right:30px; margin-top:7px; border:none; } |
Для наведенного состояния и для выпадающих подпунктов я выбрал серый цвет.
Основной цвет будет светло-серый (#F4F4F4) и применим градиент сверху вниз от (#F4F4F4) до (#EEEEEE). Закругленные углы мы применим только сверху, так как выпадающий подпункт будет сразу под пунктом меню.
|
1 2 3 |
background: #F4F4F4; background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE)); |
Правый и левый padding будет немного меньше, потому в наведенном состоянии у пункта меню есть border в 1px. Если оставим прежний padding, то меню сдвинется на два пикселя вправо, потому что в наведенном состоянии у пункта меню присутствует border. Чтобы избежать этого мы удалим правый и левый border и он будет равен 9px вместо 10px.
|
1 2 |
border: 1px solid #777777; padding: 4px 9px 4px 9px; |
Теперь добавим закругленные углы только сверху, так как выпавший подпункт меню будет находиться сразу же под основным пунктом.
|
1 2 3 |
-moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px; |
Вот окончательный CSS пункта меню в наведенном состоянии:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
#menu li:hover { border: 1px solid #777777; padding: 4px 9px 4px 9px; /* Background color and gradients */ background: #F4F4F4; background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE)); /* Rounded corners */ -moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px; } |
К ссылкам мы применим тень от текста, используя простой синтаксис: первое и второе значение это вертикальный и горизонтальный отступы для тени (1рх например). Третье значение – размытие (то же 1 рх). Затем назначаем черный цвет для тени.
|
1 |
text-shadow: 1px 1px 1px #000; |
Вот окончательный CSS для ссылок:
|
1 2 3 4 5 6 7 8 9 |
#menu li a { font-family:Arial, Helvetica, sans-serif; font-size:14px; color: #EEEEEE; display:block; outline:0; text-decoration:none; text-shadow: 1px 1px 1px #000; } |
Для ссылок в наведенном состоянии, для которых фоновый цвет серый, мы будем использовать темный цвет (#161616) для ссылок и белый цвет для тени.
|
1 2 3 4 |
#menu li:hover a { color:#161616; text-shadow: 1px 1px 1px #FFFFFF; } |
Наконец, нам нужен индикатор того, что данный пункт меню содержит выпадающие подпункты. В качестве такого индикатора будем использовать фоновое изображение стрелки правее текста ссылки. Отпозиционируем его вправо, применим padding-right, и дадим небольшой отступ сверху. Отступ сверху в наведенном состоянии будет 7рх, а не 8рх, потому что у нас есть border в 1 рх вокруг наведенного пункта меню.
|
1 2 3 4 5 6 7 |
#menu li .drop { padding-right:21px; background:url("img/drop.png") no-repeat right 8px; } #menu li:hover .drop { background:url("img/drop.png") no-repeat right 7px; } |
Вот окончательный код для ссылок и контейнера меню. Только у пункта меню “home” нет выпадающих подпунктов.
Вот окончательный код для ссылок и контейнера меню. Только у пункта меню “home” нет выпадающих подпунктов.
|
1 2 3 4 5 6 7 |
<ul id="menu"> <li><a href="#">Home</a></li> <li><a href="#" class="drop">About</a></li> <li><a href="#" class="drop">Services</a></li> <li><a href="#" class="drop">Portfolio</a></li> <li><a href="#" class="drop">Contact</a></li> </ul> |
|
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 |
#menu { list-style:none; width:940px; margin:30px auto 0px auto; height:43px; padding:0px 20px 0px 20px; /* Rounded Corners */ -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; /* Background color and gradients */ background: #014464; background: -moz-linear-gradient(top, #0272a7, #013953); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953)); /* Borders */ border: 1px solid #002232; -moz-box-shadow:inset 0px 0px 1px #edf9ff; -webkit-box-shadow:inset 0px 0px 1px #edf9ff; box-shadow:inset 0px 0px 1px #edf9ff; } #menu li { float:left; display:block; text-align:center; position:relative; padding: 4px 10px 4px 10px; margin-right:30px; margin-top:7px; border:none; } #menu li:hover { border: 1px solid #777777; padding: 4px 9px 4px 9px; /* Background color and gradients */ background: #F4F4F4; background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE)); /* Rounded corners */ -moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px; } #menu li a { font-family:Arial, Helvetica, sans-serif; font-size:14px; color: #EEEEEE; display:block; outline:0; text-decoration:none; text-shadow: 1px 1px 1px #000; } #menu li:hover a { color:#161616; text-shadow: 1px 1px 1px #FFFFFF; } #menu li .drop { padding-right:21px; background:url("img/drop.png") no-repeat right 8px; } #menu li:hover .drop { background:url("img/drop.png") no-repeat right 7px; } |
Результат выглядит так:
ШАГ 2: Делаем выпадающие подпункты
Классическое выпадающее меню обычно состоит из вложенных списков и выглядит примерно так:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<ul id="menu"> <li><a href="#">Item 1</a>< <ul> <li><a href="#">Subitem 1</a></li> <li><a href="#">Subitem 2</a></li> <li><a href="#">Subitem 3</a></li> </ul> </li> <li><a href="#">Item 2</a>< <ul> <li><a href="#">Subitem 1</a></li> <li><a href="#">Subitem 2</a></li> </ul> </li> </ul> |
Основная структура
Для нашего «мега» меню вместо вложенных списков мы будем использовать div – ы, что будет работать как несколько вложенных списков.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<ul id="menu"> <li><a href="#">Item 1</a> <div> Drop down Content <div> </li> <li><a href="#">Item 2</a> <div> Drop down Content <div> </li> </ul> |
Это основная структура для выпадающих подпунктов. Идея основана на том, что мы можем включить некоторый контент в выпадающее подменю, такие как абзацы, картинки, другие списки, контактные формы и т.д.
Контейнеры выпадающих подпунктов
Ширина контейнеров зависит от его содержимого. Я выбираю имя тега в зависимости от числа столбцов, содержащихся в контейнере.
Чтобы скрыть выпадающий подпункт, мы будем использовать абсолютное позиционирование и отрицательный левый отступ.
|
1 2 |
position:absolute; left:-999em; |
Фоновый цвет у контейнера выпадающих подпунктов будет такой же как и у выбранного пункта меню. Современный браузеры показывают градиент от #ЕЕЕЕЕЕ (такой же как и у пункта меню) до #BBBBBB.
|
1 2 3 |
background:#F4F4F4; background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB)); |
Мы опять-таки будем использовать закругленные углы, кроме верхнего левого.
|
1 2 3 |
-moz-border-radius: 0px 5px 5px 5px; -webkit-border-radius: 0px 5px 5px 5px; border-radius: 0px 5px 5px 5px; |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.dropdown_1column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns, .dropdown_5columns { margin:4px auto; position:absolute; left:-999em; /* Hides the drop down */ text-align:left; padding:10px 5px 10px 5px; border:1px solid #777777; border-top:none; /* Gradient background */ background:#F4F4F4; background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB)); /* Rounded Corners */ -moz-border-radius: 0px 5px 5px 5px; -webkit-border-radius: 0px 5px 5px 5px; border-radius: 0px 5px 5px 5px; } |
Проиллюстрируем это. Посмотрите, как это выглядит, если оставить закругленный левый верхний угол:
А вот так выглядит у нас:
Как вы видите подпункт аккуратно приклеен в своему основному пункту меню.
Наша цель – совершенный выпадающий контейнер, и для этого нам нужна различная ширина для каждого из них.
|
1 2 3 4 5 |
.dropdown_1column {width: 140px;} .dropdown_2columns {width: 280px;} .dropdown_3columns {width: 420px;} .dropdown_4columns {width: 560px;} .dropdown_5columns {width: 700px;} |
И для того, что бы показывать выпадающий контейнер по наведению мыши мы просто используем следующий код:
|
1 2 3 4 5 6 7 |
#menu li:hover .dropdown_1column, #menu li:hover .dropdown_2columns, #menu li:hover .dropdown_3columns, #menu li:hover .dropdown_4columns, #menu li:hover .dropdown_5columns { left:-1px;top:auto; } |
Использование выпадающего контейнера
Наши классы готовы, чтобы включить их в меню. Мы используем каждый из них, начиная с пятого, и каждый около своего пункта меню:
|
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 |
<ul id="menu"> <li><a href="#">Home</a></li> <li><a href="#" class="drop">5 Columns</a> <div class="dropdown_5columns"> <p>5 Columns content</p> </div> </li> <li><a href="#" class="drop">4 Columns</a> <div class="dropdown_4columns"> <p>4 Columns content</p> </div> </li> <li><a href="#" class="drop">3 Columns</a> <div class="dropdown_3columns"> <p>3 Columns content</p> </div> </li> <li><a href="#" class="drop">2 Columns</a> <div class="dropdown_2columns"> <p>2 Columns content</p> </div> </li> <li><a href="#" class="drop">1 Column</a> <div class="dropdown_1column"> <p>1 Column content</p> </div> </li> </ul> |
То, что должно получиться, использовав вышеуказанный код.
ШАГ 3: Создание столбцов выпадающего контейнера
Сейчас у нас есть готовые контейнеры, и мы будем создавать столбцы увеличивающие размеры, используя принципы системы 960 grig.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.col_1, .col_2, .col_3, .col_4, .col_5 { display:inline; float: left; position: relative; margin-left: 5px; margin-right: 5px; } .col_1 {width:130px;} .col_2 {width:270px;} .col_3 {width:410px;} .col_4 {width:550px;} .col_5 {width:690px;} |
Использование столбцов
Вот пример выпадающих подпунктов, содержащих несколько столбцов. В этом примере у нас есть разные комбинации использования всех видов столбцов.
|
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 |
<ul id="menu"> <li><a href="#" class="drop">5 Columns</a> <div class="dropdown_5columns"> <div class="col_5"> <p>This is a 5 Columns content</p> </div> <div class="col_1"> <p>This is a 1 Column content</p> </div> <div class="col_1"> <p>This is a 1 Column content</p> </div> <div class="col_1"> <p>This is a 1 Column content</p> </div> <div class="col_1"> <p>This is a 1 Column content</p> </div> <div class="col_1"> <p>This is a 1 Column content</p> </div> <div class="col_4"> <p>This is a 4 Columns content</p> </div> <div class="col_1"> <p>This is a 1 Column content</p> </div> <div class="col_3"> <p>This is a 3 Columns content</p> </div> <div class="col_2"> <p>This is a 2 Columns content</p> </div> </div> </li> </ul> |
Выглядит это так:
ШАГ 4: Выравнивание вправо
Теперь давайте посмотрим, как мы можем выровнять наше меню и его подпункты в правую область навигационной панели, не только пункты меню, но и выпадающие контейнеры так же должны измениться.
Чтобы сделать это добавляем новый класс .menu_right в родительский список пунктов. Таким образом, мы переустановим right margin и float направо.
|
1 2 3 4 |
#menu .menu_right { float:right; margin-right:0px; } |
Далее взглянем на выпадающий контейнер. В предыдущем CSS коде мы применили для всех закругление, кроме верхнего левого. Теперь нам нужно выровнять контейнер по правому краю. Соответственно мы перепишем значение border-radius с новым классом .align_right и установим скругление правого верхнего ула в 0.
|
1 2 3 4 5 6 |
#menu li .align_right { /* Rounded Corners */ -moz-border-radius: 5px 0px 5px 5px; -webkit-border-radius: 5px 0px 5px 5px; border-radius: 5px 0px 5px 5px; } |
Мы хотим сделать так, чтобы наше меню появлялось справа, для этого мы используем наш новый класс и переустанавливаем левые значения на правые и наши подпункты становятся по правому краю.
|
1 2 3 4 5 |
#menu li:hover .align_right { left:auto; right:-1px; top:auto; } |
Теперь все готово для использования в меню.
|
1 2 3 4 5 6 7 |
<li class="menu_right"><a href="#" class="drop">Right</a> <div class="dropdown_1column align_right"> <div class="col_1"> <p>This is a 1 Column content</p> </div> </div> </li> |
Должно выглядеть так.
ШАГ5: Добавляем контент и стили к выпадающим пунктам
У нас есть полностью готовая структура. Теперь мы можем добавить какого угодно контента: текст, списки, изображения…
Основные стили
Давайте начнем с базовых стилей для абзацев и заголовков.
|
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 |
#menu p, #menu h2, #menu h3, #menu ul li { font-family:Arial, Helvetica, sans-serif; line-height:21px; font-size:12px; text-align:left; text-shadow: 1px 1px 1px #FFFFFF; } #menu h2 { font-size:21px; font-weight:400; letter-spacing:-1px; margin:7px 0 14px 0; padding-bottom:14px; border-bottom:1px solid #666666; } #menu h3 { font-size:14px; margin:7px 0 14px 0; padding-bottom:7px; border-bottom:1px solid #888888; } #menu p { line-height:18px; margin:0 0 10px 0; } .strong { font-weight:bold; } .italic { font-style:italic; } |
Мы можем применить приятный голубой цвет для ссылок выпадающего меню.
|
1 2 3 4 5 6 7 |
#menu li:hover div a { font-size:12px; color:#015b86; } #menu li:hover div a:hover { color:#029feb; } |
Стили для списков
Украсим наши списки. Мы хотим переопределить такие стили как фоновый цвет или границы списков, которые используются в основном меню (навигационной панели).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
#menu li ul { list-style:none; padding:0; margin:0 0 12px 0; } #menu li ul li { font-size:12px; line-height:24px; position:relative; text-shadow: 1px 1px 1px #ffffff; padding:0; margin:0; float:none; text-align:left; width:130px; } #menu li ul li:hover { background:none; border:none; padding:0; margin:0; } |
Стили для картинок
|
1 2 3 4 5 6 7 8 9 |
.imgshadow { background:#FFFFFF; padding:4px; border:1px solid #777777; margin-top:5px; -moz-box-shadow:0px 0px 5px #666666; -webkit-box-shadow:0px 0px 5px #666666; box-shadow:0px 0px 5px #666666; } |
И сделаем абзацы с изображениями слева
|
1 2 3 4 5 |
.img_left { width:auto; float:left; margin:5px 15px 5px 5px; } |
Текстовые блоки
Выделим некоторый контент, например темным блоком с закругленными углами и небольшой тенью.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
#menu li .black_box { background-color:#333333; color: #eeeeee; text-shadow: 1px 1px 1px #000; padding:4px 6px 4px 6px; /* Rounded Corners */ -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; /* Shadow */ -webkit-box-shadow:inset 0 0 3px #000000; -moz-box-shadow:inset 0 0 3px #000000; box-shadow:inset 0 0 3px #000000; } |
Переустанавливаем стили для списков
Наконец, воспользуемся другим путем для добавления стилей к спискам, используя опять-таки CSS 3.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
#menu li .greybox li { background:#F4F4F4; border:1px solid #bbbbbb; margin:0px 0px 4px 0px; padding:4px 6px 4px 6px; width:116px; /* Rounded Corners */ -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } #menu li .greybox li:hover { background:#ffffff; border:1px solid #aaaaaa; padding:4px 6px 4px 6px; margin:0px 0px 4px 0px; } |
ШАГ 6: Совместимость браузеров и IE 6
Все браузеры поддерживают наведенное состояние мыши на тегах не являющимися ссылками за исключением IE 6, поэтому наше «мега» меню не будет работать с этим старым браузером. Мы можем исправить эту проблему благодаря файлу, который поддерживает данный функционал. Вы можете найти его тут и использовать в условном комментарии только для IE 6. Подробное пояснение можно найти в этой статье.
Для полноценного IE используем следующий код:
|
1 2 3 4 5 |
<!--[if IE 6]> <style> body {behavior: url("csshover3.htc");} </style> <![endif]--> |
Я использовал несколько PNG файлов в данной статье, а каждый знает, что IE 6 не поддерживает прозрачности. Чтобы это исправить есть множество решений.
Использовать скрипт
Назначить фоновый цвет отличный от серого, например с TweakPNG
Из этих решений вы можете выбрать то, которое больше вам подходит.
Теперь давайте посмотрим на полный пример.
Окончательный код
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 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 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="//www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="menu.css" type="text/css" media="screen" /> <title>Mega Drop Down Menu</title> <!--[if IE 6]> <style> body {behavior: url("csshover3.htc");} #menu li .drop {background:url("img/drop.gif") no-repeat right 8px; </style> <![endif]--> </head> <body> <ul id="menu"> <li><a href="#" class="drop">Home</a><!-- Begin Home Item --> <div class="dropdown_2columns"><!-- Begin 2 columns container --> <div class="col_2"> <h2>Welcome !</h2> </div> <div class="col_2"> <p>Hi and welcome here ! This is a showcase of the possibilities of this awesome Mega Drop Down Menu.</p> <p>This item comes with a large range of prepared typographic stylings such as headings, lists, etc.</p> </div> <div class="col_2"> <h2>Cross Browser Support</h2> </div> <div class="col_1"> <img src="img/browsers.png" width="125" height="48" alt="" /> </div> <div class="col_1"> <p>This mega menu has been tested in all major browsers.</p> </div> </div><!-- End 2 columns container --> </li><!-- End Home Item --> <li><a href="#" class="drop">5 Columns</a><!-- Begin 5 columns Item --> <div class="dropdown_5columns"><!-- Begin 5 columns container --> <div class="col_5"> <h2>This is an example of a large container with 5 columns</h2> </div> <div class="col_1"> <p class="black_box">This is a dark grey box text. Fusce in metus at enim porta lacinia vitae a arcu. Sed sed lacus nulla mollis porta quis.</p> </div> <div class="col_1"> <p>Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.</p> </div> <div class="col_1"> <p class="italic">This is a sample of an italic text. Consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi porta quis sit amet.</p> </div> <div class="col_1"> <p>Curabitur euismod gravida ante nec commodo. Nunc dolor nulla, semper in ultricies vitae, vulputate porttitor neque.</p> </div> <div class="col_1"> <p class="strong">This is a sample of a bold text. Aliquam sodales nisi nec felis hendrerit ac eleifend lectus feugiat scelerisque.</p> </div> <div class="col_5"> <h2>Here is some content with side images</h2> </div> <div class="col_3"> <img src="img/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" /> <p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Sed in sem mauris. Aenean a commodo mi. Praesent augue lacus.<a href="#">Read more...</a></p> <img src="img/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" /> <p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Nunc in leo urna, eget varius metus. Aliquam sodales nisi.<a href="#">Read more...</a></p> </div> <div class="col_2"> <p class="black_box">This is a black box, you can use it to highligh some content. Sed sed lacus nulla, et lacinia risus. Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.Quisque vestibulum nisi non nunc blandit placerat. Mauris facilisis, risus ut lobortis posuere, diam lacus congue lorem, ut condimentum ligula est vel orci. Donec interdum lacus at velit varius gravida. Nulla ipsum risus.</p> </div> </div><!-- End 5 columns container --> </li><!-- End 5 columns Item --> <li><a href="#" class="drop">4 Columns</a><!-- Begin 4 columns Item --> <div class="dropdown_4columns"><!-- Begin 4 columns container --> <div class="col_4"> <h2>This is a heading title</h2> </div> <div class="col_1"> <h3>Some Links</h3> <ul> <li><a href="#">ThemeForest</a></li> <li><a href="#">GraphicRiver</a></li> <li><a href="#">ActiveDen</a></li> <li><a href="#">VideoHive</a></li> <li><a href="#">3DOcean</a></li> </ul> </div> <div class="col_1"> <h3>Useful Links</h3> <ul> <li><a href="#">NetTuts</a></li> <li><a href="#">VectorTuts</a></li> <li><a href="#">PsdTuts</a></li> <li><a href="#">PhotoTuts</a></li> <li><a href="#">ActiveTuts</a></li> </ul> </div> <div class="col_1"> <h3>Other Stuff</h3> <ul> <li><a href="#">FreelanceSwitch</a></li> <li><a href="#">Creattica</a></li> <li><a href="#">WorkAwesome</a></li> <li><a href="#">Mac Apps</a></li> <li><a href="#">Web Apps</a></li> </ul> </div> <div class="col_1"> <h3>Misc</h3> <ul> <li><a href="#">Design</a></li> <li><a href="#">Logo</a></li> <li><a href="#">Flash</a></li> <li><a href="#">Illustration</a></li> <li><a href="#">More...</a></li> </ul> </div> </div><!-- End 4 columns container --> </li><!-- End 4 columns Item --> <li class="menu_right"><a href="#" class="drop">1 Column</a> <div class="dropdown_1column align_right"> <div class="col_1"> <ul class="simple"> <li><a href="#">FreelanceSwitch</a></li> <li><a href="#">Creattica</a></li> <li><a href="#">WorkAwesome</a></li> <li><a href="#">Mac Apps</a></li> <li><a href="#">Web Apps</a></li> <li><a href="#">NetTuts</a></li> <li><a href="#">VectorTuts</a></li> <li><a href="#">PsdTuts</a></li> <li><a href="#">PhotoTuts</a></li> <li><a href="#">ActiveTuts</a></li> <li><a href="#">Design</a></li> <li><a href="#">Logo</a></li> <li><a href="#">Flash</a></li> <li><a href="#">Illustration</a></li> <li><a href="#">More...</a></li> </ul> </div> </div> </li> <li class="menu_right"><a href="#" class="drop">3 columns</a><!-- Begin 3 columns Item --> <div class="dropdown_3columns align_right"><!-- Begin 3 columns container --> <div class="col_3"> <h2>Lists in Boxes</h2> </div> <div class="col_1"> <ul class="greybox"> <li><a href="#">FreelanceSwitch</a></li> <li><a href="#">Creattica</a></li> <li><a href="#">WorkAwesome</a></li> <li><a href="#">Mac Apps</a></li> <li><a href="#">Web Apps</a></li> </ul> </div> <div class="col_1"> <ul class="greybox"> <li><a href="#">ThemeForest</a></li> <li><a href="#">GraphicRiver</a></li> <li><a href="#">ActiveDen</a></li> <li><a href="#">VideoHive</a></li> <li><a href="#">3DOcean</a></li> </ul> </div> <div class="col_1"> <ul class="greybox"> <li><a href="#">Design</a></li> <li><a href="#">Logo</a></li> <li><a href="#">Flash</a></li> <li><a href="#">Illustration</a></li> <li><a href="#">More...</a></li> </ul> </div> <div class="col_3"> <h2>Here are some image examples</h2> </div> <div class="col_3"> <img src="img/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" /> <p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Maecenas imperdiet, nibh vitae rutrum vulputate, lorem sem condimentum.<a href="#">Read more...</a></p> <img src="img/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" /> <p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Vestibulum tempor facilisis malesuada. <a href="#">Read more...</a></p> </div> </div><!-- End 3 columns container --> </li><!-- End 3 columns Item --> </ul> </body> </html> |
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 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 |
body, ul, li { font-size:14px; font-family:Arial, Helvetica, sans-serif; line-height:21px; text-align:left; } /* Navigation Bar */ #menu { list-style:none; width:940px; margin:30px auto 0px auto; height:43px; padding:0px 20px 0px 20px; /* Rounded Corners */ -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; /* Background color and gradients */ background: #014464; background: -moz-linear-gradient(top, #0272a7, #013953); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953)); /* Borders */ border: 1px solid #002232; -moz-box-shadow:inset 0px 0px 1px #edf9ff; -webkit-box-shadow:inset 0px 0px 1px #edf9ff; box-shadow:inset 0px 0px 1px #edf9ff; } #menu li { float:left; text-align:center; position:relative; padding: 4px 10px 4px 10px; margin-right:30px; margin-top:7px; border:none; } #menu li:hover { border: 1px solid #777777; padding: 4px 9px 4px 9px; /* Background color and gradients */ background: #F4F4F4; background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE)); /* Rounded corners */ -moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px; } #menu li a { font-family:Arial, Helvetica, sans-serif; font-size:14px; color: #EEEEEE; display:block; outline:0; text-decoration:none; text-shadow: 1px 1px 1px #000; } #menu li:hover a { color:#161616; text-shadow: 1px 1px 1px #FFFFFF; } #menu li .drop { padding-right:21px; background:url("img/drop.png") no-repeat right 8px; } #menu li:hover .drop { background:url("img/drop.png") no-repeat right 7px; } /* Drop Down */ .dropdown_1column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns, .dropdown_5columns { margin:4px auto; float:left; position:absolute; left:-999em; /* Hides the drop down */ text-align:left; padding:10px 5px 10px 5px; border:1px solid #777777; border-top:none; /* Gradient background */ background:#F4F4F4; background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB)); /* Rounded Corners */ -moz-border-radius: 0px 5px 5px 5px; -webkit-border-radius: 0px 5px 5px 5px; border-radius: 0px 5px 5px 5px; } .dropdown_1column {width: 140px;} .dropdown_2columns {width: 280px;} .dropdown_3columns {width: 420px;} .dropdown_4columns {width: 560px;} .dropdown_5columns {width: 700px;} #menu li:hover .dropdown_1column, #menu li:hover .dropdown_2columns, #menu li:hover .dropdown_3columns, #menu li:hover .dropdown_4columns, #menu li:hover .dropdown_5columns { left:-1px; top:auto; } /* Columns */ .col_1, .col_2, .col_3, .col_4, .col_5 { display:inline; float: left; position: relative; margin-left: 5px; margin-right: 5px; } .col_1 {width:130px;} .col_2 {width:270px;} .col_3 {width:410px;} .col_4 {width:550px;} .col_5 {width:690px;} /* Right alignment */ #menu .menu_right { float:right; margin-right:0px; } #menu li .align_right { /* Rounded Corners */ -moz-border-radius: 5px 0px 5px 5px; -webkit-border-radius: 5px 0px 5px 5px; border-radius: 5px 0px 5px 5px; } #menu li:hover .align_right { left:auto; right:-1px; top:auto; } /* Drop Down Content Stylings */ #menu p, #menu h2, #menu h3, #menu ul li { font-family:Arial, Helvetica, sans-serif; line-height:21px; font-size:12px; text-align:left; text-shadow: 1px 1px 1px #FFFFFF; } #menu h2 { font-size:21px; font-weight:400; letter-spacing:-1px; margin:7px 0 14px 0; padding-bottom:14px; border-bottom:1px solid #666666; } #menu h3 { font-size:14px; margin:7px 0 14px 0; padding-bottom:7px; border-bottom:1px solid #888888; } #menu p { line-height:18px; margin:0 0 10px 0; } #menu li:hover div a { font-size:12px; color:#015b86; } #menu li:hover div a:hover { color:#029feb; } .strong { font-weight:bold; } .italic { font-style:italic; } .imgshadow { background:#FFFFFF; padding:4px; border:1px solid #777777; margin-top:5px; -moz-box-shadow:0px 0px 5px #666666; -webkit-box-shadow:0px 0px 5px #666666; box-shadow:0px 0px 5px #666666; } .img_left { /* Image sticks to the left */ width:auto; float:left; margin:5px 15px 5px 5px; } #menu li .black_box { background-color:#333333; color: #eeeeee; text-shadow: 1px 1px 1px #000; padding:4px 6px 4px 6px; /* Rounded Corners */ -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; /* Shadow */ -webkit-box-shadow:inset 0 0 3px #000000; -moz-box-shadow:inset 0 0 3px #000000; box-shadow:inset 0 0 3px #000000; } #menu li ul { list-style:none; padding:0; margin:0 0 12px 0; } #menu li ul li { font-size:12px; line-height:24px; position:relative; text-shadow: 1px 1px 1px #ffffff; padding:0; margin:0; float:none; text-align:left; width:130px; } #menu li ul li:hover { background:none; border:none; padding:0; margin:0; } #menu li .greybox li { background:#F4F4F4; border:1px solid #bbbbbb; margin:0px 0px 4px 0px; padding:4px 6px 4px 6px; width:116px; /* Rounded Corners */ -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } #menu li .greybox li:hover { background:#ffffff; border:1px solid #aaaaaa; padding:4px 6px 4px 6px; margin:0px 0px 4px 0px; } |
Заключение
Надеюсь, урок по созданию выпадающего меню на CSS для сайта, вам понравился.
Автор: Guillaume Marty
Перевод и редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.
Источник: //net.tutsplus.com
E-mail: contact@webformyself.com
Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения
P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.
Комментарии (23)