РЕКЛАМА

  • Binary revolution
    Видео-тренинг

    VIP Бинарная революция Получение дохода
    за 5 минут
    ПОДРОБНЕЕ
  • Forex  - с нуля
    до результата
    Обучающий курс

    ПОДРОБНЕЕ
  • TOKYO GAP
    Торговый робот

    среднесрочный
    торговый робот
    ПОДРОБНЕЕ
  • Master Trend
    Прибыльная стратегия

    стабильно от 300 до 1000 п. в мес. ПОДРОБНЕЕ
  • 6000$
    в неделю

    Новейшая разработка
    Максимум прибыли
    ПОДРОБНЕЕ

НОВИНКА

РЕАЛЬНЫЙ
заработок в сети

Бесплатная
видеоинструкция
Не упусти шанс!!!

ПОДРОБНЕЕ

 

Вертикальный аккордеон на jQuery

Дата: 19.01.2014
Автор: Сергей
Источник: bulatlab.ru

Доброго времени  суток, друзья!

 

Продолжая тему вертикальных аккордеонных меню, затронутую в предыдущих статьях, сегодня я вновь хочу поделиться таким меню, но выполненном на более популярной javascript-библиотеке – jQuery. Данное меню очень простое, без использования навороченных плагинов, и основано на использовании стандартных эффектов анимации jQuery, а именно эффектов скольжения – slideDown и slideUp, которые посредством изменения высоты элементов плавно раскрывают и скрывают эти элементы (в нашем случае это список ссылок – подпунктов меню).

 

В разметке html-страницы, как обычно, ничего особенного нет. Сначала подключаем таблицу стилей, потом – jQuery, после этого следует небольшой скрипт для меню. В теле станицы – основная разметка. Это список пунктов, которые представлены тегами h3 и списки подпунктов – непосредственно ссылок на нужные страницы проекта. Единственное, на что хотелось бы обратить внимание, так это то, что для открытия необходимого пункта меню по умолчанию используется класс active. Данный класс может быть использован для сохранения информации об активном пункте меню в куке.

 

<!DOCTYPE html>
<html>
<head>
<title>Меню вертикальное на jQuery и CSS3</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="jquery-1.js"></script>
	<script>
			$(document).ready(function(){
				$("#accordion h3").click(function(){
					$("#accordion ul ul").slideUp('fast');
					if(!$(this).next().is(":visible")){
						$(this).next().slideDown('fast');
					}
				})
			})
	</script>
</head>
<body>
	<section class="main">
		<div id="accordion">
			<ul>
				<li>
					<h3>ПУНКТ №1</h3>
					<ul>
						<li><a href="#">Ссылка 1.1</a></li>
						<li><a href="#">Ссылка 1.2</a></li>
						<li><a href="#">Ссылка 1.3</a></li>
						<li><a href="#">Ссылка 1.4</a></li>
					</ul>
				</li>
				<!-- этот пункт будет открыт по умолчанию -->
				<li class="active">
					<h3>ПУНКТ №2</h3>
					<ul>
						<li><a href="#">Ссылка 2.1</a></li>
						<li><a href="#">Ссылка 2.2</a></li>
						<li><a href="#">Ссылка 2.3</a></li>
						<li><a href="#">Ссылка 2.4</a></li>
						<li><a href="#">Ссылка 2.5</a></li>
					</ul>
				</li>
				<li>
					<h3>ПУНКТ №3</h3>
					<ul>
						<li><a href="#">Ссылка 3.1</a></li>
						<li><a href="#">Ссылка 3.2</a></li>
						<li><a href="#">Ссылка 3.3</a></li>
						<li><a href="#">Ссылка 3.4</a></li>
						<li><a href="#">Ссылка 3.5</a></li>
						<li><a href="#">Ссылка 3.6</a></li>
						<li><a href="#">Ссылка 3.7</a></li>
						<li><a href="#">Ссылка 3.8</a></li>
					</ul>
				</li>
				<li>
					<h3>ПУНКТ №4</h3>
					<ul>
						<li><a href="#">Ссылка 4.1</a></li>
						<li><a href="#">Ссылка 4.2</a></li>
						<li><a href="#">Ссылка 4.3</a></li>
						<li><a href="#">Ссылка 4.4</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</section>
</body>
</html>

 

Стилизация элементов зависит от общего дизайна проекта, и приведена здесь только в качестве примера:

 

* {margin: 0; padding: 0;}
body {font-family: Nunito, arial, verdana;}
#accordion > ul >li >ul {	height:250px;}		
#accordion li {	list-style-type: none;}
#accordion ul ul {display: none;}
#accordion li.active ul {display: block;}

#accordion {
	background: #fff;
	width: 250px;
	margin: 100px auto 0 auto;
	border: 1px solid #ccc;
}

#accordion h3 {
	color: #567;
	font-size: 12px;
	line-height: 34px;
	padding: 0 10px;
	cursor: pointer;
	background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));
	background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );
}

#accordion h3:hover {
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
	-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
	-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
}

#accordion ul ul li a {
	color:#555;
	text-decoration: none;
	font-size: 11px;
	line-height: 27px;
	display: block;
	padding: 0 25px;
	transition: all 0.15s;
}

#accordion ul ul li a:hover {
	color:#55d;	
	background: #f6f6f6;
}

 

В итоге получаем простое меню-аккордеон.

 

 

 

Вот, собственно и всё! В следующей статье постараюсь рассказать о меню, выполненном только средствами JavaScript.

 

До встречи!

 

Оценить эту статью:   
Просмотров: 747
Комментариев: 0
Оценка: (0)


Добавить комментарий
Поделитесь этой страничкой в социальных сетях