Сегодня хочу представить небольшой «рецепт» создания списка на 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.
Посмотреть в работе Скачать исходники
Если что-то непонятно или не получается — спрашивайте в комментариях или воспользуйтесь кнопкой «Отправить сообщение», она там —>
Удачного дня
класс, спасибо»!
Ок, сегодня уже другую статью готовлю — к среде, четвергу ждите по списку
скажите, а как сделать чтобы список раскрывался по клику, а не при наведении?
Если по клику — тут надо смотреть в сторону JS и события onClick. В рамках комментария не расскажу как сделать, довольно много информации. Если интересно — могу оформить в виде статьи
да, это было бы очень полезно
Тут да, согласен. Насчет IE6 — я помню вашу любовь к нему Ну что сказать — мне он не нравится, я часто с ним сталкиваюсь на основной работе. Хотя нельзя списывать со счетов и глючность провинциальных банк-клиентов
Интересная вещь, полезно. Только :hover предназначен для ссылок, а для div его поймут только особые продвинутые браузеры. .droplink:hover
Так что совсем кроссбраузерным не получится…
Не совсем так, ослик до IE6 включительно, понимает hover только для ссылок. Все остальные — нормально относятся к нему для других элементов, типа списка или блока.
IE6 я всегда сознательно игнорирую
Ну и пруф, конечно, дабы не быть голословным — http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes
Да, он устаревший, но чтобы совсем плохой — тоже не скажу. Просто у многих требования слишком завышены;) Буду ещё у себя делать обзоры браузеров, обязательно похвалю, а то не выдержит такой критики
Вот что 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.
Конечно лучше бы реализовать, но это уже воля и упрямство разработчиков