Сегодняшний урок описывает создание скрытой выдвигающейся панели, используя CSS и Mootools.
1 2 3 4 5 6 | <div id="toppanel"> <div id="slidepanel"> <!-- Содержимое панели --> </div> <a href="#" id="toggle">Показать панель</a> </div> |
Мы имеем внешний контейнер #toppanel, который содержит саму панель #slidepanel и кнопку показывающую и скрывающую эту панель.
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 } |
Стили отвечающие за визуальное оформление вы можете менять по своему вкусу.
Подключаем фреймворк:
1 | <script type="text/javascript" src="mootools.js"></script> |
И добавляем следующий JS код:
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(); }); }); |
А чтобы контент сдвигался под панель?
Если нужно чтобы контент двигался вместе с панелью, уберите внешний контейнер
<div id="toppanel">ну и стили для него.Здравствуйте, а как сделать так чтобы данная панель была расположена не по горизонтали а по вертикале. например от левого края страницы и выезжала соответственно по вертикале а не так как сейчас горизонтально сверху.
Что нужно переделать в скрипте помимо размещения меню для вертикального выезда.
Freedom,
такая панель реализуема не только этим JS-фреймворком.
мутулс вести 90 Кб
jQuery — 54 Кб
разница в 2 раза, удобство то же.
Cпасиб..может когда нибудь пригодится данный код!
Николай, есть сжатая версия 60Кб
а где можно скачать?
http://mootools.net/download
Приветствую.
Спасибо, весьма полезная статья, давно искал нечто подобное.
Вопрос: а как сделать так, что бы панель выезжала не по клику, а при наведении курсора. Соответственно, и сворачивалось, чтобы когда курсор убран.
Спасибо еще раз не только за эту статью, но и за большенство других!
Надеюсь, Вы и дальше будете писать/переводить так же «в точку».
ANTON, благодарю за пожелания. Постараюсь их оправдать.
Касаемо вопроса попробуйте следующее:
Привет, а подскажите как уменьшить высоту этой панели! нигде не могу найти!
ROLL, в этом примере высота зависит от содержимого.
Alex 26 августа, 2008 в 13:04
У меня такой вариант не прокатывает, панелька прячется, но тугл прыгает вниз и при дальнейших нажатиях на него ничего не происходит.
А как сделать, чтобы панель была ориентирована вертикально на всю высоту страницы и сдвигалась вправо-влево, как бы выезжая слева? Ну и чтобы ширина контента уменьшалась вместе с выездом панельки.
DANILA, кроме javascript кода, нужно также стили поменять. По поводу 100-й высоты контейнера уже написано достаточно статей, не поленитесь поискать.
А каким образом сменить стили не подскажете?
Danila, к сожалению я не знаю что вам нужно в итоге, поэтому не могу написать все стили. По высоте контейнер можно растянуть следующим способом:
html, body{height:100%}
div{min-height:100%}
Для IE6 прописать
div{height:100%}
Или поиграйтесь с позиционированием.
Постараюсь в ближайшем будущем, найти время и написать, как сделать вертикальную панель.
Спасибо большое, про растяжение по высоте загуглил уже. Отличная статья, буду ждать не менее хорошую про вертикальную панель!
здравствуйте подскажите пожалуйста как реализовать смену картинки в бакгроунде.
Например панель свернута — стрелка в положении «вниз», панель развернута — стрелка меняется на положение «вверх»
Сорь за беспокойство.
Очень полезная статья, вот решил использовать mootools при разработке своего сайта (для отладки выложу сдесь vistwork.narod.ru)
Вот только использую его, как выпадающее меню (пока картинка, после будет набор ссылок).
Вот толко столкнулся со следующей проблемой, при наведении на картинку снизу выплывает меню для этого подраздела сайта, но чтобы навести курсор на выпадающее меню нужно убрать курсор с самой картинки, поэтому пришлось убрать обработчик mouseleave для данной картинки. Теперь нужно сделать, чтобы при наведении на любой элемент главного меню подменю других разделов плавно уезжали (пока только просто hide). В коде прописан myVerticalSlide.toggle() как для выплавания, так и для скрытия меню, есть ли какие нибудь разные функции для скрытия и показа меню?
Спасибо я нашел открытие и закрытие myVerticalSlide.slideIn() и myVerticalSlide.slideOut() соответственно. Вот только возникают проблемы:
1. Если навести на первый объект myVerticalSlide1, то срабатывает myVerticalSlide.slideIn()
2. А потом резко перевести на объект myVerticalSlide2, то срабатывает myVerticalSlide1.slideOut() и не успевает сработать myVerticalSlide2.slideIn()
как можно побороть эту проблемму.
попробовал фреймворк jQuery куда удобнее и быстрее, начал ваять на нем никаких проблем…. все сразу получилось
А у меня панель отображается нормально только на страницах лежащих в корне, если переходим в раздел то она отображается в выдвинутом состояние и уже не убирается в чем может быть причина подскажите
Видимо скрипт не подключается. Проверьте путь.
Анимированное меню на Mootools работает, а Выдвигающаяся панель не хочет почему-то…
Может глянет кто, в чём косяк.http://demo.minzdravao.ru
Сам себе отвечаю: что бы панель работала в Joomla в папке media/system/js переименуйте файл mootools-uncompressed.js в mootools.js. Видаться на распаковывается само…
А какой параметр отвечает за то как глубоко меню будет спрятана за экран?? Что нужно поправить что бы она немного выглядывала сверху?
Сейчас так и есть. Сам внешний блок панели никуда не скрывается. Задайте ему оформление и отступ снизу.
Результат на http://astrafire.ru
Здравствуйте! А что надо дописать в коде, что бы можно было разместить несколько таких блоков на одной странице?
Спасибо Вам большое!!!