Функциональное меню для вашего сайта Многие видели на масштабных сайтах огромные меню с выпадающими вкладками содержащими много информации как текстовой так и медиа материалом, такие меню становятся все более и более популярными, так как они предлагают эффективное решение для вывода объемного контента при сохранении шаблона. В этом уроке вы узнаете как можно сделать такое кросс-браузерное у себя на сайте, и так приступим.
Для начала нам надо создать контейнер меню, для контейнера меню мы определяем фиксированную ширину и центрируем его, устанавливая левое и правое поле в значение «auto», смотрим:
#menu { list-style:none; width:940px; margin:30px auto 0px auto; height:43px; padding:0px 20px 0px 20px; } 
Теперь улучшим его с помощью свойств CSS3. Нужно использовать различные префиксы для разных браузеров (для семейства WebKit и семейства Mozila). Для скругленных углов правила будут такие:
-moz-border-radius: 10px -webkit-border-radius: 10px; border-radius: 10px; Для фона мы будем использовать градиенты и цвета, для отображения фона в старых браузерах: background: #014464; background: -moz-linear-gradient(top, #0272a7, #013953); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953)); Первая строка устанавливает простой цвет фона (для старых браузеров), вторая и третья строки создают градиент по направлению сверху вниз с использованием двух цветов : #0272a7 и #013953. Теперь мы можем добавить темную границу и «заполировать» дизайн с помощью фальшивой вложенной рамки, созданной с помощью свойства “box-shadow”. Синтаксис одинаковый для всех совместимых браузеров: первое значение – горизонтальное смещение, второе – вертикальное смещение, третий – радиус размытия (маленькое значение делает тень более четкой; в нашем примере установлено значение 1 пиксель). Мы также устанавливаем все смещения в 0, так что размытие создает единообразную светлую рамку: -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 { list-style:none; width:940px; margin:30px auto 0px auto; height:43px; padding:0px 20px 0px 20px; /* Скругленные углы */ -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; /* Цвет фона и градиенты */ background: #014464; background: -moz-linear-gradient(top, #0272a7, #013953); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953)); /* Границы */ 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; } Теперь не менее важный шаг, нам нужно создать навигацию на нашем меню:
<ul id="menu"> <li><a href="#">Главная</a></li> <li><a href="#">Новости сайта</a></li> <li><a href="#">Партнерские ссылки</a></li> <li><a href="#">Метки сайта</a></li> <li><a href="#">Меню сайта</a></li> </ul> И так, начинается самое интересное, пожалуй, в нашем меню, это создание стилей для пунктов меню, выравниваем все пункты меню влево и оставляем пространство между ними с помощью свойства margin-right ( свойство padding нужно для состояния hover):
#menu li { float:left; display:block; text-align:center; position:relative; padding: 4px 10px 4px 10px; margin-right:30px; margin-top:7px; border:none; } Для состояний hover и выдвинутого меню используется серая цветовая схема для фона: основной цвет – светло серый (#F4F4F4), а градиент идет сверху вниз от цвета #F4F4F4 до (#EEEEEE). Скругленные углы применяются только сверху, так как выпадающая часть будет соединяться с пунктом меню.
background: #F4F4F4; background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE)); Левый и правый отступы здесь немного меньше, потому что у нас есть рамочка шириной 1 пиксель появляющаяся при изменении состояния пункта меню. border: 1px solid #777777; padding: 4px 9px 4px 9px; Затем нам надо округлить углы только сверху, делать это мы будем следующим образом:
-moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px; Вот так будет выглядеть полный набор CSS для пункта меню в состоянии hover: #menu li:hover { border: 1px solid #777777; padding: 4px 9px 4px 9px; /* Цвет фона и градиенты */ background: #F4F4F4; background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE)); /* Скругленные углы */ -moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px; } Для ссылок мы используем прелестные тени с помощью простого синтаксиса: первое и второе значение для горизонтального и вертикального смещения (в нашем случае 1 пиксель), для радиуса размытия (тоже 1 пиксель), а четвертое значение – цвет тени (черный): text-shadow: 1px 1px 1px #000; Затем набор правил CSS для ссылок:
#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; } В состоянии hover ссылки имеют серый фон, текст ссылок будет иметь более темный цвет (#161616) и белый цвет для теней текста:
#menu li:hover a { color:#161616; text-shadow: 1px 1px 1px #ffffff; } В завершении нам надо сделать индикацию того, что пункт меню имеет выпадающую часть. Для этого мы будем использовать маленькую стрелку, расположенную справа от пункта меню с установленными отступами и полями для выравнивания. В состоянии hover поля будут иметь значение 7 пикселей, а не 8, так как при наведении курсора мыши вокруг пункта меню появляется дополнительная рамка, которая сдвинет стрелку:
#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; } CSS, требуемый нами код имеет следующий вид:
#menu { list-style:none; width:940px; margin:30px auto 0px auto; height:43px; padding:0px 20px 0px 20px; /* Скругленные углы */ -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; /* Цвет фона и градиенты */ background: #014464; background: -moz-linear-gradient(top, #0272a7, #013953); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953)); /* Границы */ 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: #F4F4F4; background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE)); /* Скругленные углы */ -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; } Вот такой результат у нас должен получится: 
Если все вы делаете правильно, то далее вам стоит сделать кодировать выпадающее меню частично, “Классическое” выпадающее меню обычно содержит список вложенный в родительский элемент и выглядит следующим образом: <ul id="menu"> <li><a href="#">Пункт 1</a>< <ul> <li><a href="#">Подпункт 1</a></li> <li><a href="#">Подпункт 2</a></li> <li><a href="#">Подпункт 3</a></li> </ul> </li> <li><a href="#">Пункт 2</a>< <ul> <li><a href="#">Подпункт 1</a></li> <li><a href="#">Подпункт 2</a></li> </ul> </li> </ul> Общая структура для нашего меню вместо дерева списков мы будем использовать стандартные элементы div, который будут работать как вложенные списки:
<ul id="menu"> <li><a href="#">Пункт 1</a> <div> Выпадающий контент <div> </li> <li><a href="#">Пункт 2</a> <div> Выпадающий контент <div> </li> </ul> Это базовая структура выпадающего меню. Идея заключается в том, чтобы включать любой вид контента, например, параграфы, изображения, списки или контактные формы. При этом организовывать все это в колонки. Контейнеры с различными размерами будут содержать весь конетнт выпадающей части. Названия контейнеров соответсвует количеству колонок, которые они содержат. Для скрытия выпадающей части мы будем использовать абсолютное позиционирование с отрицательным значением левого поля:
position:absolute; left:-999em; Фоновый цвет такой же, как и у пунктов меню. Новые браузеры будут выводить градиент от цвета #EEEEEE наверху до цвета #BBBBBB внизу:
background:#F4F4F4; background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB)); Мы снова используем скругленные углы, за исключением левого верхнего угла: -moz-border-radius: 0px 5px 5px 5px; -webkit-border-radius: 0px 5px 5px 5px; border-radius: 0px 5px 5px 5px; Часть кода CSS для контейнеров выглядит так: .dropdown_1column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns, .dropdown_5columns { margin:4px auto; position:absolute; left:-999em; /* скрывает выпадающий пункт */ text-align:left; padding:10px 5px 10px 5px; border:1px solid #777777; border-top:none; /* Фон с градиентом */ background:#F4F4F4; background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB)); /* Скругленные углы */ -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; } Наступил момент когда будем использовать наши выпадающие контейнера, наши классы готовы для использования в меню. Мы будем использовать каждый из них начиная с 5-и колоночного и заканчивая одноколоночным:
<ul id="menu"> <li><a href="#">Главная</a></li> <li><a href="#">5 колонок</a> <div> <p>Контент в 5 колонок</p> </div> </li> <li><a href="#">4 колонки</a> <div> <p>Контент в 4 колонки</p> </div> </li> <li><a href="#">3 колонки</a> <div> <p>Контент в 3 колонки</p> </div> </li> <li><a href="#">2 колонки</a> <div> <p>Контент в 2 колонки</p> </div> </li> <li><a href="#">1 колонка</a> <div> <p>Контент в 1 колонку</p> </div> </li> </ul> А выглядеть оно будет так: 
Как бы не было печально, но это только половина созданного урока, и так мы создаем колонки для выпадающего меню:
.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;} Вот пример выпадающего контейнера с несколькими колонками. В данном примере мы используем различные комбинации всех видов колонок:
<ul id="menu"> <li><a href="#">5 колонок</a> <div> <div> <p>Контент в 5 колонок</p> </div> <div> <p>Это контент в 1 колонку</p> </div> <div> <p>Это контент в 1 колонку</p> </div> <div> <p>Это контент в 1 колонку</p> </div> <div> <p>Это контент в 1 колонку</p> </div> <div> <p>Это контент в 1 колонку</p> </div> <div> <p>Это контент в 4 колонки</p> </div> <div> <p>Это контент в 1 колонку</p> </div> <div> <p>Это контент в 3 колонки</p> </div> <div> <p>Это контент в 2 колонки</p> </div> </div> </li> </ul> А вот так он будет выглядеть: 
Теперь разберемся с тем, как нам выровнять пункты меню и выпадающие контейнеры по правой границе навигационной панели. Изменять надо и пункты меню и соответствующие им выпадающие контейнеры. Для выполнения поставленной задачи мы используем новый класс .menu_right для пунктов меню. Таким образом установим правое поле и смещение вправо:
#menu .menu_right { float:right; margin-right:0px; } Теперь посмотрим на выпадающий контейнер. В предыдущем коде CSS мы устанавливали скругление для всех углов за исключением левого верхнего для того, чтобы установить соответствие родительскому пункту меню. Теперь мы сделаем тоже самое для правой грани. Таким образом, мы создадим новый класс .align_right, в котором скругление для правого верхнего угла будет установлено в 0.
#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; } Теперь можно использовать установки для нашего меню:
<li><a href="#">Справа</a> <div> <div> <p>Это контент в 1 колонку</p> </div> </div> </li> Вот как будет выглядеть наш маленький пример:  Теперь начнем с базового стиля для параграфов и заголовков:
#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; } Будем использовать прелестный голубой цвет для ссылок в выпадающей части:
#menu li:hover div a { font-size:12px; color:#015b86; } #menu li:hover div a:hover { color:#029feb; } Теперь используем стиль для списков, возьмем за основу уже созданный стиль списков и подправим его: used in the navigation bar :
#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; } Используем теперь стиль для изображений:
.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 { 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; /* Скругленные углы */ -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; /* Тень */ -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 .greybox li { background:#F4F4F4; border:1px solid #bbbbbb; margin:0px 0px 4px 0px; padding:4px 6px 4px 6px; width:116px; /* Скругленные углы */ -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; } Internet Explorer, как известно, этот «интересный» браузер не воспринимает градиент и png, по этому вот маленькое решение данной проблемы:
<!--[if IE 6]> <style> body {behavior: url("csshover3.htc");} </style> <![endif]--> И ВОТ ОКОНЧАТЕЛЬНЫЙ ВИД НАШЕГО КОДА:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://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>Мега меню с выпадающими пунктами</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="#">Главная</a><!-- Начало пункта Главная --> <div><!-- Начало контейнера на 2 колонки --> <div> <h2>Здравствуйте!</h2> </div> <div> <p>Здравствуйте! Это демонстрация возможностей выпадающего Мега Меню.</p> <p>Оно имеет много подготовленной типографики: заголовки, списки и т.д.</p> </div> <div> <h2>Кросс-браузерная поддержка</h2> </div> <div> <img src="img/browsers.png" width="125" height="48" alt="" /> </div> <div> <p>Данное меню было проверено во всех основных браузерах.</p> </div> </div><!-- Конец контейнера на 2 колонки --> </li><!-- Конец пунтка Главная --> <li><a href="#">5 колонок</a><!-- Начало пунтка 5 колонок --> <div><!-- Начало контейнера на 5 колонок --> <div> <h2>Это пример большого контейнера с 5 колонками</h2> </div> <div> <p>Это текст в темно сером прямоугольнике. Fusce in metus at enim porta lacinia vitae a arcu. Sed sed lacus nulla mollis porta quis.</p> </div> <div> <p>Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.</p> </div> <div> <p>Пример текста, написанного курсивом. Consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi porta quis sit amet.</p> </div> <div> <p>Curabitur euismod gravida ante nec commodo. Nunc dolor nulla, semper in ultricies vitae, vulputate porttitor neque.</p> </div> <div> <p>Пример текста, написанного жирным шрифтом. Aliquam sodales nisi nec felis hendrerit ac eleifend lectus feugiat scelerisque.</p> </div> <div> <h2>Пример контента с изображением сбоку</h2> </div> <div> <img src="img/01.jpg" width="70" height="70" 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" 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> <p>Пример темного прямоугольника. Вы можете использовать его для выделения контента. 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><!-- Конец контейнера на 5 колонок --> </li><!-- Конец пункта 5 колонок --> <li><a href="#">4 колонки</a><!-- Начало пунтка 4 колонки --> <div><!-- Начало контейнера на 4 колонки --> <div> <h2>Пример заголовка</h2> </div> <div> <h3>Пример ссылок</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> <h3>Еще один пример ссылок</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> <h3>И еще один пример ссылок</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> <h3>Последний пример ссылок</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="#">Еще...</a></li> </ul> </div> </div><!-- Конец контейнера на 4 колонки --> </li><!-- Конец пункта на 4 колонки --> <li><a href="#">1 колонка</a> <div> <div> <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> <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="#">Еще...</a></li> </ul> </div> </div> </li> <li><a href="#">3 колонки</a><!-- Начало пункта 3 колонки --> <div><!-- Начало контейнера 3 колонки --> <div> <h2>Список в прямоугольнике</h2> </div> <div> <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> <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> <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="#">Еще...</a></li> </ul> </div> <div> <h2>Пример использования изображений</h2> </div> <div> <img src="img/02.jpg" width="70" height="70" 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" 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><!-- Конец контейнера на 3 колонки --> </li><!-- Конец пункта меню 3 колонки --> </ul> </body> </html>1</pre> <p style="text-align: justify;">И вот так выглядит стили<strong> CSS:</strong></p> 1body, ul, li { font-size:14px; font-family:Arial, Helvetica, sans-serif; line-height:21px; text-align:left; } #menu { list-style:none; width:940px; margin:30px auto 0px auto; height:43px; padding:0px 20px 0px 20px; /* Скругленные углы */ -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; /* Цвет фона и градиенты */ background: #014464; background: -moz-linear-gradient(top, #0272a7, #013953); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953)); /* Границы */ 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: #F4F4F4; background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE)); /* Скругленные углы */ -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; } .dropdown_1column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns, .dropdown_5columns { margin:4px auto; float:left; position:absolute; left:-999em; /* Скрываем выпадающие пункты */ text-align:left; padding:10px 5px 10px 5px; border:1px solid #777777; border-top:none; /* Фон с градиентом */ background:#F4F4F4; background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB)); /* Скругленные углы */ -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; } .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;} #menu .menu_right { float:right; margin-right:0px; } #menu li .align_right { /* Скругленные углы */ -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; } #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 { /* Изображения прижимаются влево */ 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; /* Скругленные углы */ -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; /* Тень */ -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; /* Скругленные углы */ -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-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; } Вот наконец-то готово наше меню, ниже можно просмотреть Demo и скачать исходники. Демо
Внимание! У вас нет прав для просмотра скрытого текста.
Комментарии к статьеЕсли Вам понравилась эта статья или не понравилась напишите об этом в комментариях
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации. |
