Здравствуйте. Изучив этот урок, Вы научитесь делать компактную выплывающую панель для сайта. Разрабатывать ее мы будем с помощью Mootools, ну и конечно же не обойдемся и без CSS-стилей, которые будут играть здесь роль дизайнинга панели. Для начала, я предлагаю Вам просмотреть демонстрацию получившегося эффекта, а затем уже приступить к ее разработке: 
Шаг 1. HTML-конструкция панели
Вместо содержимого панели, которое есть в демонстрации урока, я решил оставить пустое место и даже в коде указал Вам, где должно находиться Ваше содержимое. Думаю, вставить туда что-то свое не составит для Вас большого труда. Ниже я привожу код всей HTML-конструкции, который вы должны использовать в качестве шаблона панели:
Code
<div id="top-panel">
<!-- Содержимое панели -->
</div>
<div id="sub-panel">
<a href="#" id="toggle">
<span>Об авторе</span>
</a>
</div>
Шаг 2. Подключение библиотеки Mootools
Отлично, теперь нам нужно подключить библиотеку Mootools. Думаю, с этим Вы уже не раз встречались, однако для новичков объясняю, что нижеприведенный код нужно разместить между тегами <head> и </head>:
Code
<link rel="stylesheet" type="text/css" media="screen, print" href="slickmap.css" />
Шаг 3. Стилизация панели
Так, теперь нам нужно стилизовать нашу панель. Для этого просто вставьте между тегами <head> и </head> следующий код:
Code
<style type="text/css">
body{
border:0;
padding:0;
margin:0;
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#555555;
}
a:link, a:visited{color:#0066CC;}
#top-panel{
background:#e8f3c6;
border-bottom:3px solid #a6c34e;
padding:14px 20px;
text-align:right;
}
#sub-panel{
text-align:center;
}
#sub-panel a{
width:200px;
float:right;
color:#FFFFFF;
text-decoration:none;
margin-right:30px;
font-weight:bold;
background:url(img/sub-left.png) bottom left no-repeat #a6c34e;
}
#sub-panel a span{
padding:6px;
background:url(img/sub-right.png) right bottom no-repeat;
display:block;
}
strong{color:#000000;}
.face{border:solid 2px #a6c34e; margin-left:10px; float:right;}
</style>
Шаг 4. Основной JavaScript
Ну, и наконец в последнем пункте нашей работы необходимо вставить нижеприведенный Java-скрипт, прямо перед закрытием тега head::
Code
<script type="text/javascript">
window.addEvent('domready', function(){
var mySlide = new Fx.Slide('top-panel');
mySlide.hide();
$('toggle').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
});
});
</script>
