Автор

31 03.2013
Вертикальное меню в виде аккордеона

Вертикальное меню в виде аккордеона


 

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

 

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

 

Преимуществом такого аккордеона является то, что в нем выводится количество информации в цифровом обозначении. И так приступим. Для начала мы создадим неупорядоченный список для разметки HTML:

<div id="wrapper-250">

<ul class="accordion">
 <li id="one" class="files">

<a href="#" class="">Мои файлы<span>495</span></a>

<ul class="sub-menu" style="display: none; ">

<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 Сервер<span>366</span></a></li>

<li><a href="#"><em>04</em>Google Drive<span>1</span></a></li>

 <li><a href="#"><em>05</em>Skydrive<span>10</span></a></li>

</ul>

</li>

</ul>

 

Теперь рассмотрим стили CSS, данный код не является чем-то новым, мы будем использовать градиентную заливку и некоторые правила. Все достаточно просто, можете в этом сами убедиться:

.accordion > li:hover > a,
.accordion > li:target > a,
.accordion > li > a.active {
    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,
.accordion > li > a.active span {
    color: #fdfdfd;
    text-shadow: 0px 1px 0px rgba(0,0,0, .35);
    background: #3e5706;
}
.accordion li.files > a:before { background-position: 0px 0px; }
.accordion li.files:hover > a:before,
.accordion li.files:target > a:before,
.accordion li.files > a.active: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,
.accordion li.mail > a.active: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,
.accordion li.cloud > a.active: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,
.accordion li.sign > a.active:before { background-position: -72px -24px; }

 

Для очистки мы будем использовать height, overflow, etc., также для окрытия и закрытия мы будем использовать правила "display: none;”  и “display: block”.

.accordion li > .sub-menu {
	display: none;
}

.accordion li:target > .sub-menu {
	display: block;
}

 

Так как CSS3 поддерживают не все браузеры, мы будем использовать jQuery, еще, данный скрипт, поможет сделать данный аккордеон более привлекательным. Скрип jQuery мы будем подключать с репозитория Google.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">

	$(document).ready(function() {

		var accordion_head = $('.accordion > li > a'),
			accordion_body = $('.accordion li > .sub-menu');

accordion_head.first().addClass('active').next().slideDown('normal');

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

 

Далее мы задаем правила для хранения двух переменных, избегая скачков элементов:

var accordion_head = $('.accordion > li > a'),
			accordion_body = $('.accordion li > .sub-menu');

 

Эта строчка позволяет открыть первый пункт при загрузке:

var accordion_head = $('.accordion > li > a'),
			accordion_body = $('.accordion li > .sub-menu');

 

Теперь мы будем отключаем ссылки в аккордеоне, и задаем, что только подссылки меню будут работать.

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

vk.com/club.ssdru

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


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

20 07.2013
Вертикальное меню в виде аккордеона

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


02 01.2018
Вертикальное меню в виде аккордеона

Буквально перед новым годом задался целью автоматизировать свой сайт, а именно сделать так чтобы с 15 декабря до 15 января работал один стиль CSS, а в остальное время другой!


18 05.2013
Вертикальное меню в виде аккордеона

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


24 03.2013
Вертикальное меню в виде аккордеона

Очередная выдвижная панель с любым необходимым для вас контентом! В примерах 3 варианта: фиксированная, выезжающая с лева и третья выезжающая с права. В исходных файлах есть все варианты СSS. Мы рассмотрим один с фиксированной кнопкой и панелью.


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close