Приветствую тебя, дорогой читатель, на страницах моего сайта!
Как я и обещал в предыдущей статье, сегодня рассмотрю вертикальное аккордеонное меню, выполненное посредством использования более новой версии фреймворка MooTools – 1.4.5. В общем-то, отличия кода от рассмотренного ранее (в предыдущей статье) - незначительные, и касаются в основном способа подключения фреймворка и некоторых изменений в разметке странички. Кроме того, скрипт создания аккордеона включен в тело самой страницы, хотя ничто не мешает вынести его в отдельный файл.
Итак, вот HTML-код:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="2.css" media="screen"/>
<script src="mootools-core-1.4.5-full-nocompat(1).js"></script>
<script src="mootools-more-1.4.0.1(1).js"></script>
<script>
// когда загрузились все элементы DOM
window.addEvent('domready', function(){
new Fx.Accordion($('accordion'), '#accordion h3', '#accordion .content',{
'onActive': function(tog, el) { tog.addClass('active'); },
'onBackground': function(tog, el) { tog.removeClass('active'); },
'fixedHeight': 200,
'show': 2});
});
</script>
</head>
<body>
<div id="accordion">
<h2>МЕНЮ</h2>
<h3 class="mainlevel">ПУНКТ №1</h3>
<div class="content">
<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>
<h3 class="mainlevel">ПУНКТ №2</h3>
<div class="content">
<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>
</div>
<h3 class="mainlevel">ПУНКТ №3</h3>
<div class="content">
<a href="">Ссылка 1</a>
<a href="">Ссылка 2</a>
<a href="">Ссылка 3</a>
<a href="">Ссылка 4</a>
<a href="">Ссылка 5</a>
</div>
<h3 class="mainlevel last">ПУНКТ №4</h3>
<div class="content">
<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>
</div>
</body>
</html>
Как видно из кода, сначала мы подключаем таблицу стилей, затем – ядро и расширение фреймворка. Именно в расширении находится плагин – аккордеон. Потом идёт наш скрипт и непосредственно разметка страницы. В качестве пунктов меню использованы заголовки h3, а в качестве подпунктов – уже непосредственно ссылки.
Далее представлен код таблицы стилей. Также как и в предыдущем случае, стилизация элементов осуществлена с помощью картинок. Это не самый эффективный способ, но его плюс в том, что нет необходимости задумываться об адекватном отображении меню во всех браузерах:
#accordion {
width: 192px;
background: #F5F5F5 url('module_c.gif') no-repeat bottom left;
}
#accordion h2{
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;
}
#accordion h3 {
cursor: pointer;
padding:0;
margin:0;
padding: 0px 6px;
font-weight:normal;
color: #567;
}
#accordion h3:hover{
color:#28E;
}
.mainlevel{
height: 26px;
background: url('quick_ba.jpg') no-repeat top left;
line-height: 26px;
font-size: 12px;
}
.mainlevel.last{
background: url('quick_la.jpg') no-repeat top left;
}
.mainlevel.active{
background: url('quick_ac.jpg') no-repeat top left;
color:#000;
}
#accordion .content {
height:200px;
}
#accordion .content a{
display:block;
text-decoration: none;
color: #262626;
padding-left:13px;
border-bottom: 1px solid #e1e1ef;
margin: 0px 2px;
font-size: 12px;
}
#accordion .content a:hover{
color:#28E;
background:#fff;
}
На этом пока всё! До встречи!
Конфиденциальность гарантирована