Красивое выпадающее меню. Полупрозрачное и с тенью.

веб-дизайнер, February 24, 2009

Вот такое:

Нравится?:-) Научить, как делать нечто подобное? Устраивайтесь поудобнее, мы начинаем.
Начать следует с того, что сейчас большинство выпадающих меню (как горизонтальных, так и вертикальных) делают из несортированных списков (тег <ul> (сокращение от unordered list)). В совокупности с свойствами display:none и display:block (последнее для псевдокласса :hover, хотя, можно сделать и так, чтобы пункты меню прятались при наведении на них курсора мыши, да) получаются красивые и динамичные менюшки.

В данном меню html код выглядит так:

<div id=”shad”>
<ul>
<li><a href=”#”>Главная</a></li>
<li><a href=”#”>О нас</a>
<div id=”shad2″>
<ul>
<li><a href=”#”>История</a></li>
<li><a href=”#”>Команда</a></li>
<li><a href=”#”>Офис</a></li>
</ul>
</div>
</li>
<li><a href=”#”>Услуги</a>
<div id=”shad1″>
<ul>
<li><a href=”#”>Веб-дизайн</a></li>
<li><a href=”#”>Интернет</a></li>
<li><a href=”#”>Хостинг</a></li>
<li><a href=”#”>Доменные имена</a></li>
</ul>
</div>
</li>
<li><a href=”#”>Контакты</a>
<div id=”shad3″>
<ul>
<li><a href=”#”>Телефон</a></li>
<li><a href=”#”>E-mail</a></li>
<li><a href=”#”>Почта</a></li>
</ul>
</div>
</li>
</ul>
</div>

Если посмотреть внимательно, то мы увидим, что основой меню является ненумерованный список (как я и говорил). В отдельные пунты меню вложены другие списки (это субменюшки, которые будут распахиваться при наведении курсора мыши). Оборачивающие <div id=”shade#”> нам нужны для размещения теней от меню. Тут я использовал совсем простое визуальное оформление, просто чтобы донести идею. Естественно, ваша фантазия может быть безграничной:-)

Итак, после того, как мы сделаем само меню, нам необходимо запустить страницу в браузере и замерить высоту всех блоков экранной линейкой (скачать можно тут) – это пригодится нам для построения “теней”, так как надо будет делать тень четко под размер блока.

Теперь откроем Photoshop и создадим новый файл высотой в 1 пиксель, а шириной равной ширине блоков нашего меню. Зальем его цветом и настроим прозрачность. А затем сохраним как png24 (с альфа-каналом). Это будет бэкграунд всех наших пунктов меню. Теперь создадим файлы по количеству блоков, а по ширине и высоте равные соответствующим блокам (вы ведь замерили высоту блоков?:-) ). Зальем их желаемым цветом, настроим прозрачность и мягкой стеркой дадим растушевку на краях, чтобы получились мягкие переходы. У меня вышло вот так:
bg_s
Тени тоже готовы. Теперь нам осталось задать css-стили:

#shad {
background: url(./bg_s.png) bottom right no-repeat;
padding: 0;
width: 157px;
height: 107px;
}

#shad1 {
background: url(./bg_s.png) bottom right no-repeat;
padding: 0;
width: 157px;
height: 107px;
}

#shad2 {
background: url(./bg_s1.png) bottom right no-repeat;
padding: 0;
width: 157px;
height: 83px;
}

#shad3 {
background: url(./bg_s1.png) bottom right no-repeat;
padding: 0;
width: 157px;
height: 83px;
}

ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 1px solid #00ff3c;
}

ul li {
position: relative;
}

li ul {
position: absolute;
left: 0px;
top: 0;
display: none;
}

li div {
position: absolute;
left: 149px;
top: 0;
display: none;
}

ul li a {
display: block;
text-decoration: none;
color: #229922;
font-weight: bold;
background: url(./bg.png);
padding: 5px;
border: 1px solid #00ff3c;
border-bottom: 0;
}

li:hover div {
display: block;
}

li:hover ul {
display: block;
}

Итак, по пунктам. В моей стилевой таблице для начала заданы контейнеры, которые будут вмещать тени. Потом, мы сбрасываем на всех ненумерованных списках внешние и внутренние отступы, буллеты, задаем нижнюю границу нужного цвета. Далее, мы даем всем элементам списка position:relative, чтобы список вложенный в пункт вышестоящего списка наследовал его позицию в пространстве. Затем, спискам, вложенным в вышестоящий элемент списка даюм абсолютную позицию, чтобы они не раздвигали список-родитель, и задаем им позицию относительно вмещающего элемента списка. А также скрываем их пока от любопытных глаз:-) Следующим шагом мы задаем позиционирование контейнерам div, вложенным в вышестоящий пункт списка, и тоже скрываем их (мы ведь не хотим, чтобы тени ото всех подменю постоянно мозолили нам глаза?:-) ). Настраиваем стиль ссылок. Даем отступы, границы и прописываем наш полупрозрачный фон. И, наконец, говорим браузеру, что при наведении курсора мыши на элемент списка нам хотелось бы увидеть все вложенные контейнеры. И, вуаля. Наше меню работает.

Готовый пример можно скачать, и поковырять самостоятельно. Успехов!

UPD:
А вот еще по просьбам трудящихся выкладываю вариант этой же менюшки, но горизонтального расположения. Подменю выпадают вниз.

В тему:

9комментариев

Спасибо огромное. Мне, как далёкому от HTML человеку, очень помогло. Довольно-таки просто.

kemo, May 17, 2009 10:34 pm Reply

в ie6 данный код нифига не работает =)

velther, October 6, 2009 10:36 pm Reply

velther, разумеется. В шестом осле псевдокласс hover работает только для ссылок. Учите матчасть:-)

Anonimous, October 7, 2009 12:12 pm Reply

Я все проще делаю и кода выходит меньше…

rassola, July 23, 2010 6:07 am Reply

Если заметили, кода здесь вообще нет. Ибо нет и программирования. И подход этот годится для непрограммистов, так как здесь только HTML+CSS. Но будет здорово, если Вы приведете свой вариант решения, чтобы было о чем говорить. 🙂

admin, July 24, 2010 10:05 am Reply

В каких браузерах работает это меню? а то тестить не хочется, мот кто делал?

dmitry, August 27, 2010 3:04 pm Reply

Должно во всех работать. По крайней мере, когда статья выкладывалась, работало в IE, FF, Opera, Chrome

admin, August 28, 2010 4:38 pm Reply

а можете сделать пример для горизонтального меню и чтобы подменю выезжали вниз (для совсем тупых)

Alex, June 10, 2011 4:02 pm Reply

Вариант с горизонтальным расположением прикрепил в конце статьи. Там нужно только таблицу стилей поменять – сама разметка остается прежней. На ваше усмотрение оставил изменение тени под горизонтальной менюшкой – там надо бы картинку bg_s.png поменять – она по форме должна соответствовать горизонтальному меню.

Вячеслав Гринин, June 14, 2011 9:09 am Reply
Ваше имя
Ваш email*
Ваш сайт
Текст вашего комментария:

Поиск по блогу:
Подписаться:
Популярные:
Облако тегов:
Разное:
Счетчик: