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

26 августа 2008, Написано в Javascript

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

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

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

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

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

CSS:

*{
    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> страницы.

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

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

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

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

27 комментариев к статье «Выдвигающаяся панель»:

  1. Имя:
    26 Авг 2008 в 10:46

    А чтобы контент сдвигался под панель?

    Ответить
  2. Alex:
    26 Авг 2008 в 10:56

    Если нужно чтобы контент двигался вместе с панелью, уберите внешний контейнер <div id="toppanel"> ну и стили для него.

    Ответить
  3. Freedom:
    26 Авг 2008 в 12:29

    Здравствуйте, а как сделать так чтобы данная панель была расположена не по горизонтали а по вертикале. например от левого края страницы и выезжала соответственно по вертикале а не так как сейчас горизонтально сверху.
    Что нужно переделать в скрипте помимо размещения меню для вертикального выезда.

    Ответить
  4. Alex:
    26 Авг 2008 в 13:04

    Freedom,

    window.addEvent('domready', function() {
    var myHorizontalSlide = new Fx.Slide('slidepanel', {mode: 'horizontal'});
    $('toggle').addEvent('click', function(e){
        e.stop();
        myHorizontalSlide.toggle();
    });
});
    Ответить
  5. Николай Громов (nicothin):
    26 Авг 2008 в 14:30

    такая панель реализуема не только этим JS-фреймворком.

    мутулс вести 90 Кб
    jQuery – 54 Кб

    разница в 2 раза, удобство то же.

    Ответить
  6. FanToM 0T F_1M:
    26 Авг 2008 в 14:44

    Cпасиб..может когда нибудь пригодится данный код!

    Ответить
  7. Alex:
    26 Авг 2008 в 14:57

    Николай, есть сжатая версия 60Кб

    Ответить
  8. Максим:
    26 Авг 2008 в 16:28

    а где можно скачать?

    Ответить
  9. Alex:
    26 Авг 2008 в 16:35

    http://mootools.net/download

    Ответить
  10. Anton:
    26 Авг 2008 в 20:55

    Приветствую.
    Спасибо, весьма полезная статья, давно искал нечто подобное.
    Вопрос: а как сделать так, что бы панель выезжала не по клику, а при наведении курсора. Соответственно, и сворачивалось, чтобы когда курсор убран.
    Спасибо еще раз не только за эту статью, но и за большенство других!
    Надеюсь, Вы и дальше будете писать/переводить так же «в точку».

    Ответить
  11. Alex:
    26 Авг 2008 в 21:23

    ANTON, благодарю за пожелания. Постараюсь их оправдать.
    Касаемо вопроса попробуйте следующее:

    window.addEvent('domready', function() {
    var myVerticalSlide = new Fx.Slide('slidepanel');
    myVerticalSlide.hide();
    $('toggle').addEvents({
        'mouseenter': function(){
            myVerticalSlide.toggle();
        },
        'mouseleave': function(){
            myVerticalSlide.toggle();
        }
    });
});
    Ответить
  12. Интересное для веб-мастеров (10.10.2008) » Как создать сайт бесплатно? Как сделать сайт? Журнал для веб-мастеров и блогеров от школы создания с:
    10 Окт 2008 в 19:34

    [...] Выдвигающаяся панель Сегодняшний урок описывает создание простой выдвигающейся панели, используя CSS и Mootools… Популярность публикации: 1% [...]

    Ответить
  13. Мир CSS» Blog Archive » Выдвжная панель:
    11 Окт 2008 в 20:17

    [...] Описание [...]

    Ответить
  14. Roll:
    23 Окт 2008 в 16:28

    Привет, а подскажите как уменьшить высоту этой панели! нигде не могу найти!

    Ответить
  15. Alex:
    23 Окт 2008 в 16:33

    ROLL, в этом примере высота зависит от содержимого.

    Ответить
  16. Danila:
    13 Ноя 2008 в 17:03

    Alex 26 августа, 2008 в 13:04
    У меня такой вариант не прокатывает, панелька прячется, но тугл прыгает вниз и при дальнейших нажатиях на него ничего не происходит.

    А как сделать, чтобы панель была ориентирована вертикально на всю высоту страницы и сдвигалась вправо-влево, как бы выезжая слева? Ну и чтобы ширина контента уменьшалась вместе с выездом панельки.

    Ответить
  17. Alex:
    13 Ноя 2008 в 17:38

    DANILA, кроме javascript кода, нужно также стили поменять. По поводу 100-й высоты контейнера уже написано достаточно статей, не поленитесь поискать.

    Ответить
  18. Danila:
    13 Ноя 2008 в 17:55

    А каким образом сменить стили не подскажете?

    Ответить
  19. Alex:
    13 Ноя 2008 в 18:19

    Danila, к сожалению я не знаю что вам нужно в итоге, поэтому не могу написать все стили. По высоте контейнер можно растянуть следующим способом:
    html, body{height:100%}
    div{min-height:100%}

    Для IE6 прописать
    div{height:100%}

    Или поиграйтесь с позиционированием.

    Постараюсь в ближайшем будущем, найти время и написать, как сделать вертикальную панель.

    Ответить
  20. Danila:
    13 Ноя 2008 в 18:24

    Спасибо большое, про растяжение по высоте загуглил уже. Отличная статья, буду ждать не менее хорошую про вертикальную панель! ;)

    Ответить
  21. Tony:
    10 Мар 2009 в 20:21

    здравствуйте подскажите пожалуйста как реализовать смену картинки в бакгроунде.
    Например панель свернута – стрелка в положении «вниз», панель развернута – стрелка меняется на положение «вверх»
    Сорь за беспокойство.

    Ответить
  22. ViST:
    15 Мар 2009 в 04:59

    Очень полезная статья, вот решил использовать mootools при разработке своего сайта (для отладки выложу сдесь vistwork.narod.ru)
    Вот только использую его, как выпадающее меню (пока картинка, после будет набор ссылок).
    Вот толко столкнулся со следующей проблемой, при наведении на картинку снизу выплывает меню для этого подраздела сайта, но чтобы навести курсор на выпадающее меню нужно убрать курсор с самой картинки, поэтому пришлось убрать обработчик mouseleave для данной картинки. Теперь нужно сделать, чтобы при наведении на любой элемент главного меню подменю других разделов плавно уезжали (пока только просто hide). В коде прописан myVerticalSlide.toggle() как для выплавания, так и для скрытия меню, есть ли какие нибудь разные функции для скрытия и показа меню?

    Ответить
  23. ViST:
    15 Мар 2009 в 09:17

    Спасибо я нашел открытие и закрытие myVerticalSlide.slideIn() и myVerticalSlide.slideOut() соответственно. Вот только возникают проблемы:
    1. Если навести на первый объект myVerticalSlide1, то срабатывает myVerticalSlide.slideIn()
    2. А потом резко перевести на объект myVerticalSlide2, то срабатывает myVerticalSlide1.slideOut() и не успевает сработать myVerticalSlide2.slideIn()

    как можно побороть эту проблемму.

    Ответить
  24. ViST:
    15 Мар 2009 в 16:40

    попробовал фреймворк jQuery куда удобнее и быстрее, начал ваять на нем никаких проблем…. все сразу получилось

    Ответить
  25. NIK:
    13 Июл 2009 в 09:09

    А у меня панель отображается нормально только на страницах лежащих в корне, если переходим в раздел то она отображается в выдвинутом состояние и уже не убирается в чем может быть причина подскажите

    Ответить
  26. shweew:
    17 мая 2010 в 22:36

    Анимированное меню на Mootools работает, а Выдвигающаяся панель не хочет почему-то…
    Может глянет кто, в чём косяк.http://demo.minzdravao.ru

    Ответить

Оставь комментарий: