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

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

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

МЕНЮ
ПУНКТ №1
Ссылка 1 Ссылка 2 Ссылка 3 Ссылка 4 Ссылка 5 Ссылка 6
ПУНКТ №2
Ссылка 1 Ссылка 2 Ссылка 3 Ссылка 4
ПУНКТ №3
Ссылка 1 Ссылка 2 Ссылка 3 Ссылка 4 Ссылка 5 Ссылка 6 Ссылка 7 Ссылка 8 Ссылка 9 Ссылка 10
ПУНКТ №4
Ссылка 1 Ссылка 2 Ссылка 3

Как видно из представленного кода, меню представляет собой контейнер с заголовком всего меню(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 отображаемого (раскрытого) пункта
});});	

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

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

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