Автор

Аккордеон с выпадающим списком на CSS3

Аккордеон с выпадающим списком на CSS3


 

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

 

ДЕМО
ИСХОДНИКИ

 

Кроме этого мы добавим небольшие иконки, которые скрасят общую картину выпадающего аккордеона. И так, давайте приступим.

Шаг 1. HTML

Для начала нам необходимо создать контейнер в котором будут размещаться классы, для главной мы добавим соответственно класс "home", для выпадающих подпунктов нам необходимо добавить div с классом "gallery-wrapper":

<div id="container">
 <nav>
 <ul>
 <li class="home"><a href="">Главная</a><span>3</span></li>
 <div class="gallery-wrapper">
 <li class="gallery"><a href="">Галерея</a></li>
 <ul>
 <li><a href="">Фото</a></li>
 <li><a href="">Картины</a></li>
 <li><a href="">Проекты</a></li>
 </ul>
 </div>
 <li class="logout"><a href="">Выйти</a></li>
 </ul>
 </nav>
 </div>

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

Шаг 2. CSS

Для начала в стили мы добавим общий параметр сброса, мы не стали приводить его в примере, он находится в исходниках. Мы определяем общие параметры контейнера, устанавливаем цветовой оттенок для текста, создаем градиентную заливку для списка, следует заметить, что мы добавили несколько градиентов для кроссбраузерности. Установим время для разворота списка на 3ms.

.clearfix:after{
 content: ".";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;
}
body{
 background:#fff;
 font:13px tahoma, arial, sans-serif;
}
#container{
 width:400px;
 height:270px;
 padding-top:30px;
 margin:0 auto;
}
nav{
 width:200px;
 margin:0 auto;
 border:1px solid #25272b;
 border-radius:3px;
 box-shadow:rgba(0,0,0,0.15) 0 0 5px, rgba(0,0,0,0.2) 0 1px 0;
}
nav ul li a{
 display:block;
 height:40px;
 line-height:40px;
 padding-left:40px;
 text-decoration:none;
 color:#d9ddea;
 text-shadow:rgba(0,0,0,0.25) 0 1px 0;
}
nav ul li{
 background: -webkit-linear-gradient(top, rgba(75,78,88,1) 0%,rgba(63,66,74,1) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, rgba(75,78,88,1) 0%,rgba(63,66,74,1) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, rgba(75,78,88,1) 0%,rgba(63,66,74,1) 100%); /* IE10+ */
 background: linear-gradient(to bottom, rgba(75,78,88,1) 0%,rgba(63,66,74,1) 100%); /* W3C */
 box-shadow:rgba(255,255,255,0.1) 1px 1px 0 inset;
 border-bottom:#292b30 1px solid;
}
.gallery{
 position:relative;
}
.gallery-wrapper{
 height:41px;
 overflow:hidden;
 -webkit-transition:height linear .3s;
 -moz-transition:height linear .3s;
 -o-transition:height linear .3s;
 transition:height linear .3s;
}
.gallery-wrapper:hover{
 height:164px;
}
.gallery-wrapper ul li{
 background:#32353b;
 box-shadow:#3a3c42 0 1px 0 inset;
}

.gallery-wrapper ul li:nth-of-type(1){ box-shadow:rgba(0,0,0,0.1) 0 2px 2px inset; } .gallery-wrapper ul li:nth-of-type(3){ box-shadow:rgba(0,0,0,0.1) 0 -2px 2px inset, #3a3c42 0 1px 0 inset; } .gallery-wrapper ul li:hover{ background: -webkit-linear-gradient(top, rgba(58,96,209,1) 0%,rgba(44,72,194,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(58,96,209,1) 0%,rgba(44,72,194,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(58,96,209,1) 0%,rgba(44,72,194,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(58,96,209,1) 0%,rgba(44,72,194,1) 100%); /* W3C */ box-shadow:#5173d5 1px 1px 0 inset; } .home a:hover{ background-position:-200px 0; } .home { position:relative; border-radius:3px 3px 0 0; } .home span{ position:absolute; right:23px; top:12px; color:#d9ddea; text-shadow:rgba(0,0,0,0.25) 0 1px 0; } .gallery>a{ background-position:0 -40px; } .gallery>a:hover{ background-position:-200px -40px; } .logout{ border-radius:0 0 3px 3px; } .logout a{ background-position:0 -120px; } .logout a:hover{ background-position:-200px -120px; } .gallery-wrapper ul li a{ background-position:0 -80px; } .gallery-wrapper ul li a:hover{ background-position:-200px -80px; }

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

Вот и все. Готово!

Автором является Max. Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеCSS3

Аккордеон с выпадающим списком на CSS3

В последнее время мы экспериментировали с анимацией SVG. Сегодняшний урок показывает вам, как анимировать сразу несколько путей SVG, чтобы создать стильный фоновый эффект для модального окна.


Аккордеон с выпадающим списком на CSS3

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


Аккордеон с выпадающим списком на CSS3

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


Аккордеон с выпадающим списком на CSS3

Множество вебмастеров и владельцев сайтов столкнулись с проблемой воровства контента и присваивания чужого материала. Вопрос стоит довольно жёстко, так как никто не хочет чтобы труд пропал даром и какой-то проныра просто присвоил статью или текст, на данный момент не существует 100 процентной защиты от плагиата, как правило 3 варианта защиты известны многим...


Раскрутка в соцсетях

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


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close