Автор

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

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

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


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

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


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

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


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close