Замечательная выдвигающаяся панель на MooTools. Такую панель можно использовать для контактной форма, формы входа, музыкального плеера, и т.д. и т.п.
1. CSS
*{
margin: 0;
padding: 0;
}
a:link, a:visited {
color: #0066CC;
}
#toppanel {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
#slidepanel {
background: #c8c4c0;
border-bottom: 3px solid #9C8B7B;
text-align: right;
font-size: 14px;
width: 100%;
}
#slidepanel p {
padding: 14px 90px 14px 0;
}
#slidepanel p strong{
text-transform: uppercase;
}
#toggle {
font-size: 14px;
display: block;
width: 150px;
height: 25px;
float: right;
color: #000;
text-decoration: none;
margin-right: 30px;
font-weight: bold;
background: #c8c4c0;
padding-top: 8px;
text-align: center;
border: 1px solid #9C8B7B;
text-transform: uppercase;
}
.cont {
font-size: 13px;
font-family: Georgia;
margin: 10px;
padding: 10px 10px 1px 10px;
background: #B9DAE9;
color: #333;
border: solid 2px #337FA1;
}
.cont p {
margin-bottom:10px;
}
2. Подключение MooTools
<script type="text/javascript" src="mootools.js"></script>
Код подключения MooTools нужно разместить в
Скачать MooTools можно здесь.
3. JavaScript
<script type="text/javascript">
window.addEvent('domready', function() {
var myVerticalSlide = new Fx.Slide('slidepanel');
myVerticalSlide.hide();
$('toggle').addEvent('click', function(e){
e.stop();
myVerticalSlide.toggle();
});
});
</script>
JS код размещаем перед закрывающим тегом
4 HTML
<div id="toppanel">
<div id="slidepanel">
<p><strong>» Выдвигающаяся панель на Mootools</strong><br />
</div>
<a href="#" id="toggle">Панель</a>
</div>
Post Scriptum
Данная панель может выдвигаться как над содержимым сайта, так и вместе с ним. Для того, чтобы панель сдвигалась вместе с содержимым сайта, нужно из HTML и CSS кода убрать все упоминания о блоке
Так же, панель может выдвигаться и убираться не при клике по кнопке, а при наведении на неё курсора мыши, для этого нужно заменить представленный выше JS код на нижеследующий
<script type="text/javascript">
window.addEvent('domready', function() {
var myVerticalSlide = new Fx.Slide('slidepanel');
myVerticalSlide.hide();
$('toggle').addEvents({
'mouseenter': function(){
myVerticalSlide.toggle();
},
'mouseleave': function(){
myVerticalSlide.toggle();
}
});
});
</script>
