Создаем «аккордеон»-меню на css3

27 февраля 2013 | Опубликовано в css | 10 Комментариев »

В этом уроке мы будем создавать «аккордеон»-меню. По сколько мы будем создавать меню на чистом css, оно будет работать в браузерах, которые поддерживают селектор псевдо-класса :target.

Демо

Шаг 1 — HTML разметка

Создаем маркированный список с якорями и тегами span. Добавляем id для каждого элемента списка и ссылки для этих id. Для того, чтобы применить стили и сделать раскрывающийся список в виде аккордеона, нужно использовать селектор :target. Селектор будет работать, если у нас будет ссылка, которая указывает на id. В такой способ мы сможем сделать sub-menu видимым.

<ul class="accordion">

    <li id="one" class="files"><a href="#one">My Files<span>495</span></a></li>

    <li id="two" class="mail"><a href="#two">Mail<span>26</span></a></li>

    <li id="three" class="cloud"><a href="#three">Cloud<span>58</span></a></li>

    <li id="four" class="sign"><a href="#four">Sign Out</a></li>
</ul>

Шаг 2 — Расположение меню и основные стили

Прежде всего, мы добавим некоторые стили, чтобы очистить margins, paddings и другие.

.accordion,
.accordion ul,
.accordion li,
.accordion a,
.accordion span {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}
.accordion li {
    list-style: none;
}

Теперь добавляем CSS3 градиент, тени и основные стили для текста.

Меню не будет иметь фиксированную ширину. Оно займет всю ширину своего родителя, поэтому если вы хотите, задать для него ширину 300px просто создайте див и задайте ему нужную ширину. Мы зададим минимальную ширину 160px (110 пикселей ширина + 50px отступ).

.accordion li > a {
    display: block;
    position: relative;
    min-width: 110px;
    padding: 0 10px 0 40px;

    color: #fdfdfd;
    font: bold 12px/32px Arial, sans-serif;
    text-decoration: none;
    text-shadow: 0px 1px 0px rgba(0,0,0, .35);

    background: #6c6e74;
    background: -moz-linear-gradient(top,  #6c6e74 0%, #4b4d51 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6e74), color-stop(100%,#4b4d51));
    background: -webkit-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
    background: -o-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
    background: -ms-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
    background: linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}

Для span, который будет содержать некоторые цифры, мы определим серый цвет фона, тени и закругленные углы.

.accordion li > a span {

    display: block;
    position: absolute;
    top: 7px;
    right: 0;
    padding: 0 10px;
    margin-right: 10px;

    font: normal bold 12px/18px Arial, sans-serif;
    background: #404247;

    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
    -moz-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
    box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
}

Шаг 3 — Иконки

Чтобы вставить иконки мы будем использовать селектор :before. Его нужно вставить перед заданным элементом. Таким образом мы можем вставить иконки. Иконки, которые мы будем использовать имеют ширину и высоту 24px на 24px. Мы будем размещать их в левом верхнем углу и задавать небольшие поля.

.accordion > li > a:before {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 24px;
    height: 24px;
    margin: 4px 8px;
    background-repeat: no-repeat;
    background-image: url(../img/icons.png);
    background-position: 0px 0px;
}

Создаем спрайт изображений, который будет содержать все иконки (нормальный вид и вид при наведении). Преимущество использования спрайтов в том, что мы можем загрузить все иконки одновременно при меньшем количестве запросов. И так как у нас есть только одно изображение, которое будет содержать все иконки, размер соответственно тоже будет меньше.

.accordion li.files > a:before { background-position: 0px 0px; }
.accordion li.files:hover > a:before,
.accordion li.files:target > a:before { background-position: 0px -24px; }

.accordion li.mail > a:before { background-position: -24px 0px; }
.accordion li.mail:hover > a:before,
.accordion li.mail:target > a:before { background-position: -24px -24px; }

.accordion li.cloud > a:before { background-position: -48px 0px; }
.accordion li.cloud:hover > a:before,
.accordion li.cloud:target > a:before { background-position: -48px -24px; }

.accordion li.sign > a:before { background-position: -72px 0px; }
.accordion li.sign:hover > a:before,
.accordion li.sign:target > a:before { background-position: -72px -24
 Шаг 4 - Sub-меню

HTML

Чтобы создать подменю добавить еще один неупорядоченный список с классом подменю внутри элемента списка, который вы хотите иметь подменю.

Шаг 4 – Sub-меню

Чтобы создать подменю, создаем еще один список с классом sub-menu, внутри которого будут элементы, которые нужно разместить в подменю.

<li id="one" class="files"><a href="#one">My Files<span>495</span></a>

    <ul class="sub-menu">

        <li><a href="#"><em>01</em>Dropbox<span>42</span></a></li>

        <li><a href="#"><em>02</em>Skydrive<span>87</span></a></li>

        <li><a href="#"><em>03</em>FTP Server<span>366</span></a></li>

    </ul>
</li>

CSS стили

Стили для ссылок подменю почти аналогичны. Только немного изменим цвета и тени. Также добавим “em” с некоторыми настройками.

.sub-menu li a {

    color: #797979;
    text-shadow: 1px 1px 0px rgba(255,255,255, .2);

    background: #e5e5e5;
    border-bottom: 1px solid #c9c9c9;

    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}

.sub-menu li:last-child a { border: none; }

.sub-menu li > a span {
    color: #797979;
    text-shadow: 1px 1px 0px rgba(255,255,255, .2);
    background: transparent;
    border: 1px solid #c9c9c9;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
.sub-menu em {
    position: absolute;
    top: 0;
    left: 0;
    margin-left: 14px;
    color: #a6a6a6;
    font: normal 10px/32px Arial, sans-serif;
}

Шаг 5 - Hover и Active

При наведение на элемент основного списка мы будем изменять цвет градиента и стиль span на зеленый.

.accordion > li:hover > a,
.accordion > li:target > a {
    color: #3e5706;
    text-shadow: 1px 1px 1px rgba(255,255,255, .2);

    /*background: url(../img/active.png) repeat-x;*/
    background: #a5cd4e;
    background: -moz-linear-gradient(top,  #a5cd4e 0%, #6b8f1a 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));
    background: -webkit-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
    background: -o-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
    background: -ms-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
    background: linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
}

.accordion > li:hover > a span,
.accordion > li:target > a span {
    color: #fdfdfd;
    text-shadow: 0px 1px 0px rgba(0,0,0, .35);
    background: #3e5706;
}
.sub-menu li:hover a { background: #efefef; }

Шаг 6 — Показать и скрыть подменю

Для подменю задаем высоту 0px, чтобы скрыть его и добавляем эффект перехода. Для того чтобы переход слайда работал, нам нужно задать фиксированную высоту подменю. Поэтому, если вы пожелаете в каждое подменю добавить разное количество ссылок, вы должны задать разную высоту каждого подменю в зависимости от количества ссылок. Поскольку в примере только три ссылки, задаем высоту 98px. Вы можете сделать высоту 100% , но в этом случае слайд работать не будет.

.accordion li > .sub-menu {
    height: 0;
    overflow: hidden;

    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.accordion li:target > .sub-menu {
    height: 98px;
}

Конечный результат

Демо

Автор - Valeriu Timbuc

Перевод — Дежурка

Опубликовано в css, февраля 27, 2013
Метки: css, css3, меню css, меню css3, уроки css

�

Ильяс
27 февраля 2013 в 12:52
+2

Интересно, спасибо =)
Angel0s
28 февраля 2013 в 8:26
+1

В IE выглядит как всегда плохо

vampireos Ответ:
мая 29, 2013 at 10:36 пп

0

..запомните ..IE — это загручик браузеров
и пользоваться им думая при этом что он браузер как минимум глупо)

vampireos Ответ:
мая 29, 2013 at 10:38 пп

+1

*загрузчик) ..вообщем прога для скачивания браузера с самоуничтожением посля))

Angel0s Ответ:
мая 30, 2013 at 8:23 дп

0

если ты веб-разработчик, то ie приходится учитывать всегда, каким бы плохим он ни был.

vampireos Ответ:
мая 30, 2013 at 1:39 пп

+4

да я девелопер. Нет я не учитываю IE пошёл он лесом за грибами со своей философией)) потому как сайты которые делую посещают нормальные люди, у которых нормальный браузер ^ ^

Андрей Ответ:
августа 24, 2013 at 10:22 пп

0

Полностью солидарен. Люди на ИЕ это секретарши или бабушки, которые не умеют в настоящий браузер. Соответственно они не пользуются интернет магазинами, классными сервисами и прочим. А читать рецепты творожной запеканки можно и на ИЕ.

Катерина Ответ:
февраля 24, 2014 at 2:25 дп

0

Вот с бабушками и секретаршами не соглашусь. У друга стоит IE, потому что у него аккаунт разработчика на windows8 и при установки каких либо браузеров, кроме IE, возникают проблемы с аккаунтом. Вот человек и страдает
Алексей
24 сентября 2013 в 21:17
0

Забавно, как в последнем пункте меню подтянуть до исходного положения?