Выпадающий список на CSS

18.04.2012

Выпадающий список CSS

Сегодня хочу представить небольшой «рецепт» создания списка на CSS. Никакого JQuery, никакого CSS3 — только старый, добрый, кроссбраузерный CSS. Пример достаточно простой, поэтому опытным товарищам, возможно, будет неинтересно. Будем реализовывать выпадающий список с социальными кнопками.

Итак, не будем долго рассуждать, перейдем сразу к делу

HTML

<div class="droplink">
<h3><a href="#">Поделись записью</a></h3>
<ul>
<li class="facebook"><a href="#" target="_blank">Facebook</a></li>
<li class="twitter"><a href="#" target="_blank">Twitter</a></li>
<li class="gplus"><a href="#" target="_blank">Google Plus</a></li>
<li class="vk"><a href="#" target="_blank">ВКонтакте</a></li>
<li class="rss"><a href="#" target="_blank">RSS</a></li>
</ul>
</div>

Я сознательно опускаю общие моменты, вроде подключения стилей, чтобы код не разрастался. Внизу страницы я дам ссылку на исходники — там все есть.
Что у нас в HTML — обычный список и необычный заголовок. Его необычность в том, что сделан он гиперссылкой, которая позволяет отследить событие :hover, то есть наведение. Выпадающий список будет работать при наведении курсора на заголовок.

CSS

Для начала рассмотрим базовые стили выпадающего списка. Я старался комментировать каждую строку кода, чтобы было понятнее:

/*Сбросим отступы*/
.droplink ul,.droplink h3,.droplink h3 a{
padding:0;margin:0
}
/*Базовая обертка*/
.droplink {
width:200px;
position:absolute;
margin:10px 0 0 25px
}
/*Стиль блока при наведении*/
.droplink:hover{
height:auto;
background-color:#3E403D;
border:solid 1px #3A3C39
}
/*Заголовок в обычном состоянии*/
.droplink h3 a{
text-align:center;
width:100%;
display:block;
padding:12px 0px;
color:#999;
text-decoration:none
}
.droplink h3 a img{border:none}
/*Стиль для заголовка при наведении*/
.droplink:hover h3 a {
color:#FFF;
font-weight:bold;
position:absolute
}

Тут ничего особенного, указали размеры и стиль блока, стиль заголовка и для обеих элементов — их стили при наведении курсора. Идем дальше:

/*Скрываем список без наведения*/
.droplink ul{
list-style:none;
display:none
}
/*Отображаем список при наведении*/
.droplink:hover ul{
display:block;
margin-top:40px
}
.droplink li{display:block}

Этот код уже поинтереснее и показывает, как ведет себя выпадающий список при наведении курсора. В обычном состоянии стоит display:none, то есть он не отображается. При наведении — показываем его блоком. Вот и весь секрет. Теперь немного оформим элементы списка и вставим иконки:

/*Стиль элемента списка*/
.droplink li a{
padding:5px 12px 4px 34px;
margin:1px;
background-color:#484A47;
display:block;
color:#FFF;
text-decoration:none;
font-size:12px;
background-repeat:no-repeat;
background-position: 10px 3px
}
/*Стиль элемента при наведении*/
.droplink li a:hover{
background-color:#999
}
/*Иконки*/
.facebook a {background-image:url("icons/facebook.png")}
.twitter a {background-image:url("icons/twitter.png")}
.vk a {background-image:url("icons/vk.png")}
.rss a {background-image:url("icons/rss.png")}
.gplus a {background-image:url("icons/gplus.png")}

Вот, собственно, и все. Выпадающий список готов и смотрится достаточно симпатично. Можно оформить элементы на свое усмотрение, добавить закругленных углов и прочих «примочек».

Если необходимо, чтобы список «перекрывал» текст под ним при наведении — смотрите в сторону z-index.

Посмотреть в работе Скачать исходники

Если что-то непонятно или не получается — спрашивайте в комментариях или воспользуйтесь кнопкой «Отправить сообщение», она там —>

Удачного дня

follow us in feedly

, ,

Комментариев: 9

  1. GerinG

    Ок, сегодня уже другую статью готовлю — к среде, четвергу ждите по списку

    Ответить
  2. olkin

    скажите, а как сделать чтобы список раскрывался по клику, а не при наведении?

    Ответить
    • GerinG

      Если по клику — тут надо смотреть в сторону JS и события onClick. В рамках комментария не расскажу как сделать, довольно много информации. Если интересно — могу оформить в виде статьи

      Ответить
  3. GerinG

    Тут да, согласен. Насчет IE6 — я помню вашу любовь к нему Ну что сказать — мне он не нравится, я часто с ним сталкиваюсь на основной работе. Хотя нельзя списывать со счетов и глючность провинциальных банк-клиентов

    Ответить
  4. akkad

    Интересная вещь, полезно. Только :hover предназначен для ссылок, а для div его поймут только особые продвинутые браузеры. .droplink:hover
    Так что совсем кроссбраузерным не получится…

    Ответить
    • GerinG

      Не совсем так, ослик до IE6 включительно, понимает hover только для ссылок. Все остальные — нормально относятся к нему для других элементов, типа списка или блока.
      IE6 я всегда сознательно игнорирую
      Ну и пруф, конечно, дабы не быть голословным — http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes

      Ответить
      • akkad

        Да, он устаревший, но чтобы совсем плохой — тоже не скажу. Просто у многих требования слишком завышены;) Буду ещё у себя делать обзоры браузеров, обязательно похвалю, а то не выдержит такой критики
        Вот что w3 говорит:
        CSS does not define which elements may be in the above states, or how the states are entered and left.
        Т.е. он не обязан вводить такую поддержку для каждого элемента. А Микрософт так:
        Sets the style of the anchor when the user hovers the mouse over the links.
        Конечно лучше бы реализовать, но это уже воля и упрямство разработчиков

        Ответить