РЕКЛАМА

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

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

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

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

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

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

НОВИНКА

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

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

ПОДРОБНЕЕ

 

Аккордеонное меню на MooTools 1.11

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

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

 

В сегодняшней статье (самой первой в данном разделе) пойдёт речь  о простом вертикальном меню типа аккордеон. Особенностью данного меню является то, что оно выполнено с помощью фреймворка MooTools версии 1.11. Несмотря на то, что данная версия уже считается устаревшей, тем не менее, в практике может возникнуть необходимость в таком меню. Тем более, что данная версия относительно легковесна и в принципе может обеспечить разработчика вполне приемлемым функционалом. Однако, при желании, вполне можно подкорректировать данное меню под более новую версию фреймворка.

 

Итак, для начала надо создать стандартную html-страничку, в которой присоединить к документу указанный фреймворк,  таблицу стилей( в нашем случае это файл 1.css) и наш скрипт (1.js).

 

<!DOCTYPE HTML>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="1.css" media="screen"/>
	<script src="mootools.js"></script>
	<script src="1.js"></script>
	
</head>
<body>
	<div class="ac_menu" id="accord_menu">
		<div class="moduletableclean">
			<h3>МЕНЮ</h3>
			<a class="mainlevel" href="javascript:void(0);">ПУНКТ №1</a> 
			<div class="list">
				<a href="">Ссылка 1</a>
				<a href="">Ссылка 2</a>
				<a href="">Ссылка 3</a>
				<a href="">Ссылка 4</a>
				<a href="">Ссылка 5</a>
				<a href="">Ссылка 6</a>
			</div>
			
			<a class="mainlevel" href="javascript:void(0);">ПУНКТ №2</a> 
			<div class="list">
				<a href="">Ссылка 1</a>
				<a href="">Ссылка 2</a>
				<a href="">Ссылка 3</a>
				<a href="">Ссылка 4</a>
			</div>
				
			<a class="mainlevel" href="javascript:void(0);">ПУНКТ №3</a> 
			<div class="list">
				<a href="">Ссылка 1</a>
				<a href="">Ссылка 2</a>
				<a href="">Ссылка 3</a>
				<a href="">Ссылка 4</a>
				<a href="">Ссылка 5</a>
				<a href="">Ссылка 6</a>
				<a href="">Ссылка 7</a>
				<a href="">Ссылка 8</a>
				<a href="">Ссылка 9</a>
				<a href="">Ссылка 10</a>
			</div>

			<a class="mainlevel last" href="javascript:void(0);">ПУНКТ №4</a> 
			<div class="list">
				<a href="">Ссылка 1</a>
				<a href="">Ссылка 2</a>
				<a href="">Ссылка 3</a>
			</div>
					
		</div>
	</div>
</body>
</html>

 

Как видно из представленного кода, меню представляет собой контейнер с заголовком всего меню(h3) и набором пунктов с подпунктами. В качестве пунктов выступают ссылки, относящиеся к классу mainlevel либо mainlevel last, а в качестве подпунктов –ссылки, входящие в другой внутренний контейнер div.  Класс mainlevel last необходим для реализации закругления последнего пункта меню.

 

Таблица стилей 1.css ничем особенным неотличается, за исключением того, что для стилизации элементов в данном случае используются картинки. При необходимости от них можно избавиться и заменить соответствующими CSS- свойствами.

 

.ac_menu{
margin:0px;
width:192px;
padding:0px;
position:absolute;
}
.moduletableclean{	
	background: #F5F5F5 url('module_c.gif') no-repeat bottom left;
}
.moduletableclean  h3{
	font-family:"Trebuchet MS";
	font-size:13px;
	background:url('module_i2.png') no-repeat top left;
	text-align:center;
	color:#468;
	padding:8px 0;
	margin:0;
}
.moduletableclean a{
	text-decoration: none;
	color: #567;
}
.moduletableclean a:hover{
	color:#28E;
}
.list{
height:200px;
}
.list a{
	display: block;
	color: #262626;
	padding-left:13px;
	border-bottom: 1px solid #e1e1ef;
	margin: 0px 2px;
	font-size: 12px;
}
.mainlevel{
	color: #262626;
	display: block;
	height: 26px;
	background: url('quick_ba.jpg') no-repeat top left;
	line-height: 26px;
	font-size: 13px;
	padding: 0px 6px;
}
.mainlevel.last{
	background: url('quick_la.jpg') no-repeat top left;
}
.mainlevel.active{
	background: url('quick_ac.jpg') no-repeat top left;
	color: #579;
}

.list a:hover{
	color:#28E;
	background:#fff;
}

 

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

 

// когда загрузились все элементы DOM
  window.addEvent('domready',	function(){
	//Формируем аккордионное меню
	var anchors = $$("a");
	var acc_height = 200;	// Высота
    	togs = $ES('#accord_menu a.mainlevel'); // пункт меню
	elms = $ES('#accord_menu div.list'); //  блок подпунктов меню
	var accord = new Accordion(togs, elms,{
	'onActive': function(tog, el) { tog.addClass('active'); },
	'onBackground': function(tog, el) { tog.removeClass('active'); },
	'fixedHeight': acc_height,
	'show': 1 // Номер bpyfxfkmyj отображаемого (раскрытого) пункта
});});	

 

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

 

 

 

 

На этом всё! :)

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

 

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


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