РЕКЛАМА

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

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

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

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

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

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

НОВИНКА

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

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

ПОДРОБНЕЕ

 

Очень простой аккордеон на JavaScript

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

 

Приветствую Вас, дорогие Друзья!

 

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

 

Итак, вот непосредственно сам код:

 

<!DOCTYPE html>
<html>
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript">
function acc_menu(id){
	for(var i=1;i<5;i++){
		var menu = document.getElementById('menu_' + i).style;
		menu.display = 'none';
		if (i==id){menu.display = 'block';}
	}
}
</script>
</head>
<body>
	<ul class ='ac_menu'>
		<h3 onmouseover="javascript:acc_menu('1')">ПУНКТ №1</h3>
		<ul id="menu_1" style="display:none;">
			<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>
		<h3 onmouseover="javascript:acc_menu('2')">ПУНКТ №2</h3>
		<ul id="menu_2" style="display:block;">
			<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>
			<li><a href="#">Полдункт 2.6</a></li>
		</ul>
		<h3 onmouseover="javascript:acc_menu('3')">ПУНКТ №3</h3>
		<ul id="menu_3" style="display:none;">
			<li><a href="#">Полдункт 3.1</a></li>
			<li><a href="#">Полдункт 3.2</a></li>
			<li><a href="#">Полдункт 3.3</a></li>
		</ul>	
		<h3 onmouseover="javascript:acc_menu('4')">ПУНКТ №4</h3>
		<ul id="menu_4" style="display:none;">
			<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>
			<li><a href="#">Полдункт 4.5</a></li>
		</ul>	
	</ul>
</body>
</html>

 

Видим, что меню это обычный список, в который входят пункты меню (теги h3) и соответствующие эти пунктам списки подпунктов (ссылок). Для раскрытия и сворачивания соответствующего пункта при наведении мышки используется свойство display. Скрипт, выполняющий данную операцию, достаточно короткий и представляет собой функцию, в которую передаётся номер текущего выбранного пункта (id). В теле функции в цикле происходит сброс свойства display всех пунктов и установка (а значит и раскрытие) текущего пункта. При этом необходимо следить за соответствием количества пунктов меню и максимальным значением переменной i в цикле.

 

 Таблица стилей может выглядеть следующим образом:

.ac_menu{
	padding:0px;
	margin:5px; 
	cursor:pointer; 
	color: #567;
	list-style:none; 
	width:250px;
	border:1px solid #bbb; 
}
.ac_menu > h3{
	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 );
	font-size: 14px;
	margin:0;
	padding:5px;
}
.ac_menu > 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;
}
.ac_menu > ul{
	background:#fdfdfd;
	padding:0px;
	margin:0px;
	list-style:none; 
	height:300px;
}
.ac_menu > ul > li >a{
	color:#555;
	text-decoration: none;
	font-size: 14px;
	line-height: 20px;
	padding-left:20px;
	display: block;
}
.ac_menu > ul > li >a:hover{
	color:#55d;	
	background: #f6f6f6;
}

 

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

 

 

 

До встречи! И спасибо, что читаете мои статьи!

 

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


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