Выезжающая панель на «Mootools»

Выезжающая панель на «Mootools»

Всплывающая подводная лодка и медведи рядом с ней

Здравствуйте, уважаемые читатели!

Данный урок мы посвятим созданию всплывающих панелей для сайта.

Нам потребуется малейшее представление о «Mootools» и, конечно же, знание CSS-стилей, необходимых для создания её дизайна.

Прежде чем начать, скачайте файл-архив с исходниками. Там же вы найдете пример получившейся панели (index.html).

Приступим к реализации...

Шаг 1. Пишем HTML-код панели

В готовую HTML-конструкцию, приведенную ниже, вместо «Содержимое панели» напишите свой текст.

<div id="top-panel">
<!-- Содержимое панели -->
</div>
<div id="sub-panel">
<a href="#" id="toggle">
<span>Об авторе</span>
</a>
</div>

Шаг 2. Подключаем библиотеку «Mootools»

Вторым этапом этого урока будет подключение библиотеки «Mootools»... Возможно, многие из вас не знают, как это делается, поэтому объясню — копируем нижеприведенный код и вставляем его между тегами <head> и </head>.

<script src="mootools.js" type="text/javascript" language="javascript"> </script>

Шаг 3. Создаем стиль для панели

Берем код, находящийся внизу и вставляем его также между тегами <head> и </head>:

<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: #555;
}

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: #fff;
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: #000;
}

.face {
border: solid 2px #a6c34e;
margin-left: 10px;
float: right;
}

Шаг 4. JavaScript

Вставляем приведенный ниже javascript-код перед тегом </head>:

<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>

На этом урок закончен. Проверяем результат проделанной работы и окончательно подстраиваем всплывающую панель под себя. Если будут вопросы, пишите в комментариях.

Дискуссия по теме