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

веб-дизайнер, 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:
А вот еще по просьбам трудящихся выкладываю вариант этой же менюшки, но горизонтального расположения. Подменю выпадают вниз.

Еще несколько трюков веб-разработки

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

Как-то в статье Как реализовать кнопку, не используя, собственно, кнопку? я писал о том, как сделать кнопку в HTML не используя теги “input” и “button”. Метод хорош, но имеет один существенный недостаток: бэкграунд, вызываемый псевдоклассом :hover только по этому вызову и загружается. Поэтому, если мы используем достаточно большой бэкграунд, то при наведении мышки на див мы некоторое время будем видеть просто пустое место (так как старый бэкграунд исчез, а новый еще не загружен с сервера).
Чтобы этого избежать, в самом начале разметки мы создадим блок, в который поместим интересующий нас бэкграунд. Блоку этому дадим абсолютное позиционирование, и left:, скажем, -3000px, чтобы его точно никто не увидел. Теперь интересующая нас графика будет загружаться стопроцентно раньше любого действия пользователя со страницей.

Также можно сделать кнопку подобную стандартной кнопке виндоус вообще без графики:

BUTTON

Достигается это с помощью CSS:

a:link {
padding: 10px;
border-left: 2px solid #eee;
border-top: 2px solid #eee;
border-bottom: 2px solid #929292;
border-right: 2px solid #929292;
background: #ddd;
}

a:visited {
padding: 10px;
border-left: 2px solid #eee;
border-top: 2px solid #eee;
border-bottom: 2px solid #929292;
border-right: 2px solid #929292;
background: #ddd;
}

a:hover {
padding: 10px 8px 10px 12px;
border-right: 2px solid #eee;
border-bottom: 2px solid #eee;
border-top: 2px solid #929292;
border-left: 2px solid #929292;
background: #bbb;
}

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

————————————-

Трюк со ссылкой – показываем картинку.

веб-дизайнер, January 27, 2009

Достаточно часто в процессе веб-разработки дизайнеру приходится сталкиваться с ситуацией, когда необходимо “оживить” ссылку, на которую наводится курсор. Тому, как это сделать без помощи флеша и джава-скриптов посвящен сегодняшний рассказ.

Для начала – ссылки на сайты (c-action, Шаг за горизонт), где подобный метод реализован достаточно хорошо. Безо всякого Flash и  Java Script мы легко можем сделать интерфейс сайта более динамичным.

Суть метода заключается в следующем:  мы добавляем в ссылку тег <span></span>, содержащий нужную нам графику. И, до поры, до времен прячем его. А при наведении курсора на ссылку делаем видимым. Абсолютное позиционирование контейнера позволяет нам перемещать графику в любое место пространства. Если проявить фантазию, поле для деятельности – безгранично.

Подробный листинг (на примере “Шага за горизонт”):

HTML:

&lt;span id=”item1″>&lt;img src=”d1.jpg” alt=”” />&lt;/span>

CSS:

a span {
display: none;
}

a:hover span {
display: inline;
position: absolute;
}

а позиционирование элементов назначается отдельно, по id:

#item1 {
left: 495px;
top: 100px;
}

Все достаточно просто, не правда ли?;-)

————————————-

Еще порция простоты и изящества

веб-дизайнер, November 11, 2008

Простое и кроссбраузерное решение для создания резинового блока с фиксированными отступами:

<head>
<style>
body
{
padding:0;
margin: 0;
}
</style>
</head>
<body>
<div style=”position: absolute; left: 100px; right: 100px; height:100%; background:#f00; min-width: 300px; overflow: auto;”></div>
</body>

Прошу обратить внимание, что задание position:absolute; делает div потомком уже не body, а непосрдественно окна браузера.
—————————————————–

Хостинг изображений – radikal.ru

Знаете ли вы, что…

веб-дизайнер, October 23, 2008

  • Для корректного позиционирования блоков с помощью z-index в Internet Explorer необходимо, чтобы один блок был родителем (или потомком) другого (вот офигенный конструктор на ASP, который позволяет поработать с позиционированием весьма наглядно);
  • Для корректного отображения блока со свойством overflow:auto (скажем, вы внутри div’a собрались прокручивать какое-либо содержимое) в Internet Explorer необходимо задать блоку свойство position (relative, или absolute);
  • Для того, чтобы избавиться от надоедливой рамки из точек вокруг ссылки в фокусе (скажем, в Фаерфоксе) надо пользоваться конструкцией вида:
    a:focus {outline: none;} (via diGreez).

—————————————————–

Хостинг изображений – radikal.ru

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