Отправляет email-рассылки с помощью сервиса Sendsay

Веб-разработка: пособие начинающим

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Левитас: Почему Ваш бизнес-сайт не работает?" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Март 2009   →
 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
Автор
Александр Левитас

Статистика

10.726 подписчиков
-23 за неделю
←   Все выпуски   →

Веб-разработка? Это просто! Красивое выпадающее меню. Полупрозрачное и с тенью.


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

Вот такое, как здесь. Нравится?:-) Научить, как делать нечто подобное? Устраивайтесь поудобнее, мы начинаем.

Начать следует с того, что сейчас большинство выпадающих меню (как горизонтальных, так и вертикальных) делают из несортированных списков (тег <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 (с альфа-каналом). Это будет бэкграунд всех наших пунктов меню. Теперь создадим файлы по количеству блоков, а по ширине и высоте равные соответствующим блокам (вы ведь замерили высоту блоков?:-) ). Зальем их желаемым цветом, настроим прозрачность и мягкой стеркой дадим растушевку на краях, чтобы получились мягкие переходы. У меня вышло вот так. Тени тоже готовы. Теперь нам осталось задать 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, вложенным в вышестоящий пункт списка, и тоже скрываем их (мы ведь не хотим, чтобы тени ото всех подменю постоянно мозолили нам глаза?:-) ). Настраиваем стиль ссылок. Даем отступы, границы и прописываем наш полупрозрачный фон. И, наконец, говорим браузеру, что при наведении курсора мыши на элемент списка нам хотелось бы увидеть все вложенные контейнеры. И, вуаля. Наше меню работает.

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