Выдвигающаяся панель

26 08/08
33

Сегодняшний урок описывает создание простой выдвигающейся панели, используя CSS и Mootools.

HTML код выглядит очень просто:

1
2
3
4
5
6

<div id="toppanel">
    <div id="slidepanel">
        <!-- Содержимое панели -->
    </div>
    <a href="#" id="toggle">Показать панель</a>
</div>

Мы имеем внешний контейнер <div id="toppanel">, который содержит саму панель <div id="slidepanel"> и кнопку показывающую и скрывающую эту панель.

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

*{
    margin:0;
    padding:0;
}
#toppanel{
    position:absolute;
    left:0;
    top:0;
    width:100%
}
#slidepanel{
    background:#E8D7B7;
    border-bottom:3px solid #9C8B7B;
    text-align:right;
    width:100%
}
#toggle{
    font-size:0.75em;
    display:block;
    width:150px;
    height:25px;
    float:right;
    color:#fff;
    text-decoration:none;
    margin-right:30px;
    font-weight:bold;
    background:url(img/toggle.gif) no-repeat left top;
    padding-top:5px;
    text-align:center
}

Как и всегда, стили отвечающие за визуальное оформление вы можете менять как угодно.

Javascript:

Добавьте этот код в секцию <head> страницы.

1
2
3
4
5
6
7
8

window.addEvent('domready', function() {
    var myVerticalSlide = new Fx.Slide('slidepanel');
    myVerticalSlide.hide();
    $('toggle').addEvent('click', function(e){
        e.stop();
        myVerticalSlide.toggle();
    });
});

… и не забудьте добавить сам фреймворк также в секцию <head>:

1

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

Оригинал статьи Sliding top panel using mootools, но там пример в IE работает немного некорректно и панель не располагается над основным содержимым страницы.

Теги: •