Выпадающий список на 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.

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

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

Удачного дня

, ,

Комментариев: 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.
        Конечно лучше бы реализовать, но это уже воля и упрямство разработчиков

        Ответить