—»     —»   Разрабатываем меню-гармошку на чистом CSS3
  Раздел: Меню и Навигация   Комментариев: 5  

Разрабатываем меню-гармошку на чистом CSS3



Сегодня мы хотим рассказать вам о том, как сделать навигационное меню в виде гармошки, используя только чистый код CSS3. На создание данного меню разработчик вдохновился Futurico UI Pro от Владимира Кудинова. Так как мы будем работать с CSS, меню будет работать только на тех устройствах и в тех браузерах, где имеется поддержка селектора псевдо-классов :target.

Разрабатываем меню-гармошку на чистом CSS3

Сложность: средняя Необходимое время: 30 минут

Этап 1 – HTML-разметка

Создаем неупорядоченный список с анкорным тэгом и тэгом span. Каждому пункту списка приписываем индивидуальный id, и ссылаемся на этот id в анкорном тэге. Для того чтобы иметь возможность оформить и открыть гармошку при совершении клика по ней, нам необходимо использовать селектор :target. Этот селектор будет работать только в том случае, если у нас будет ссылка, указывающая на id, и при клике по этой ссылке id будет становиться целевым элементом. И таким образом мы можем раскрывать ссылки подменю.

<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>

Разрабатываем меню-гармошку на чистом CSS3

Этап 2 – Разметка меню и основные стили

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

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

.accordion li {
list-style: none;
}

Теперь давайте оформим ссылки в меню. Мы добавим CSS3-градацию, немного теней и основные стили для шрифта.

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

.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);
}

Разрабатываем меню-гармошку на чистом CSS3

Этап 3 – Иконки

Чтобы вставить иконки, мы воспользуемся селектором :before. Этот селектор вставляет контент перед выделенным элементом. Таким образом, у нас будет возможность вставить иконки и расположить их так, как нам нужно.

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

.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 -24px; }

Разрабатываем меню-гармошку на чистом CSS3

Этап 4 – Ссылки в подменю

HTML

Для того чтобы создать подменю, добавьте еще один неупорядоченный список с классом 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;
}

Разрабатываем меню-гармошку на чистом CSS3

Этап 5 – Активное состояние и состояние при наведении

Что касается этих двух состояний ссылки, то здесь мы изменим градацию на другую, зеленого цвета, а также изменим стили span-элемента на зеленые. Так как в Futurico UI в подобной ситуации используется текстура, то и здесь мы её использовали. Вы можете использовать что угодно в качестве текстуры зеленой градации на CSS3. Что касается состояния при наведении на подменю, то меняется лишь цвет фона, на более светлый.

.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; }

Разрабатываем меню-гармошку на чистом CSS3

Этап 6 – Отображаем и скрываем подменю

Подменю мы зададим 0 пикселей высоты для того, чтобы срыть его, а также добавим скользящий эффект перехода. Для того чтобы заставить эффект скольжения работать, нам нужно задать фиксированную высоту подменю. Так что, если вам понадобится добавить дополнительные ссылки в каждое подменю, то вам нужно будет добавить индивидуальный указатель высоты каждому подменю в зависимости от того, сколько у вас подпунктов. Так как у нас здесь всего лишь 3 ссылки, мы указали высоту в 98 пикселей, если вам нужно автоматизировать это, вы можете задать 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;
}

В завершение

Мы завершили наше меню в виде гармошки на чистом коде CSS3. Надеемся, что вам понравился данный урок, и вы не забудете указать ссылку на этот материал, при публикации данного руководства на собственном сайте.

* Смотреть демо
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 13138   |   Оставлено комментариев: 5
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 24 июля 2012 @ 11:59
Написал: Дмитрий — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Попробовал данное меню на сайте. Все устраивает: выпадающие вкладки скрываются при активации другого блока, гибкие настройки. Один вопрос: при выходе контента за рамки экрана при нажатии кнопки блока ссылок происходит смещение контента вверх, т.е. зона меню скрывается почти полностью, чтобы выбрать выпадшую вкладку приходится подниматься по странице вверх. Не могу понять в чем дело. В начале думал, мож я что накосячил, но при использовании исходника с прописанной высотой body (к прмеру 1800 px) происходит тоже самое. Возможно ли как-то решить данную проблему? Заранее спасибо. :)
Комментарий #2: 24 июля 2012 @ 12:14
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
Дмитрий, сдается мне, что виной этому селектор ":target". Но как решить эту проблему я не знаю. Не вникал. Может позже, как время появится, посмотрю ...
Комментарий #3: 25 июля 2012 @ 05:19
Написал: Дмитрий — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Design FactoRy, пытался разобраться с target, наткнулся на страницу, почти идентичную данной, там данная проблема не возникла, т.к. подключен к меню jQuery. Попробовал на сайте вроде помогло. Аккордеон работает отлично. wink А как решить описаную выше проблему с CSS найти не смог. sad Не было времени ознакомиться с правилами вашего сайта, поэтому даю ссылку на ту самую страницу на ваше усмотрение: http://www.rudebox.org.ua/jquery-accordion-menu/
Спасибо!

А если быть более точным с помощью этого скрипта:

<script type="text/javascript">
$(document).ready(function() {
var accordion_head = $('.accordion > li > a'),
accordion_body = $('.accordion li > .sub-menu');
accordion_head.on('click', function(event) {
event.preventDefault();
if ($(this).attr('class') != 'active'){
accordion_body.slideUp('normal');
$(this).next().stop(true,true).slideToggle('normal');
accordion_head.removeClass('active');
$(this).addClass('active');
}
});
});
</script>
Комментарий #4: 25 июля 2012 @ 11:42
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
Дмитрий, да, с jQuery работает.
Комментарий #5: 12 марта 2016 @ 16:58
Написал: Мой хозяин — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
1. Аккордеон слизан
2. Он дубовый
3. Происходят скачки если высота сайта больше размера экрана
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930