В этом уроке я покажу как сделать плавно открывающуюся панель используя библиотеку MooTools.
Шаг 1: HTML код.
<h2><span><a href="#" id="toggle">Панель</a></span></h2> <div id="section"> <div> <!-- Содержимое панели --> </div> </div>
Как видите, код очень простой. Вложенный в заголовок <span>, а также <div> внутри открывающейся панели (id=”section”) нужны только для создания закругленных углов.
Шаг 2: CSS – устанавливаем стиль панели.
div.container{
margin:30px auto;
width:350px;
}
h2{
margin:0px;
padding:0px;
border:0px;
}
h2{
color:#FFFFFF;
font-size:13px;
display:block;
background:url(img/h2_bg.gif) top left no-repeat #9A9A9A;
}
h2 span{
padding:5px 10px;
background:url(img/h2_span_bg.gif) top right no-repeat;
display:block;
}
h2 a:link, h2 a:visited{
color:#FFFFFF;
text-decoration:none;
display:block;
}
#section {
background:url(img/section_bg_left.png) bottom left no-repeat #EEEEEE;
font-size:12px;
}
#section div{
background:url(img/section_bg_right.png) right bottom no-repeat;
padding:10px;
}
Шаг 3: добавляем эффект “toggle” из MooTools
Добавляем ссылку на библиотеку MooTools в раздел <head>…
<script type="text/javascript" src="mootools.svn.js"></script>
Затем добавляем следующий код…
<script type="text/javascript">
window.addEvent('domready', function(){
var mySlide = new Fx.Slide('section');
$('toggle').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
</script>
Таким образом, при каждом щелчке на заголовке, панель будет плавно появляться/исчезать.
Смотреть демо.
Скачать туториал.
Источник – woork.blogspot.com
