Выезжающая панель для сайта на Mootools

Здравствуйте. Изучив этот урок, Вы научитесь делать компактную выплывающую панель для сайта. Разрабатывать ее мы будем с помощью Mootools, ну и конечно же не обойдемся и без CSS-стилей, которые будут играть здесь роль дизайнинга панели. Для начала, я предлагаю Вам просмотреть демонстрацию получившегося эффекта, а затем уже приступить к ее разработке:

demosourse

Шаг 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>:


<link rel="stylesheet" type="text/css" media="screen, print" href="slickmap.css" />

Шаг 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:#555555;
  }
  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:#FFFFFF;
  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:#000000;} .face{border:solid 2px #a6c34e; margin-left:10px; float:right;} </style>

Шаг 4. Основной JavaScript

Ну, и наконец в последнем пункте нашей работы необходимо вставить нижеприведенный Java-скрипт, прямо перед закрытием тега 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>

Заключение.

Ну вот, собственно, и вся выплывающая панель. Если будут какие-нибудь вопросы по поводу создания панели, задавайте их в комментариях! ;-) До новых встреч!

С искренним уважением, Максим Курочкин

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: woork.blogspot.com
Перевел: Максим Курочкин
Урок создан: 12 Июля 2009
Просмотров: 75902
Правила перепечатки


5 последних уроков рубрики "Mootools"

  • Создание меню при помощи MenuMatic 0.68.3

    Создание горизонтального и вертикального меню при помощи MenuMatic 0.68.3

  • Анимированные закладки с использованием MooTools

    Один из возможных способов поместить много контента на одно небольшое место - это использование системы закладок. Данный урок покажет как создать систему анимированных закладок с использованием CSS, куки и анимированного переключения панелей.

  • Увеличение / Уменьшение текстовых полей с помощью MooTools

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

  • Multi-Select c помощью MooTools

    В этом уроке речь пойдет о переносе выбранных опций из одного multi-select в другой. Думаю, что подобный виджет вы уже видели. Обычно он применяется на сайтах объявлений и регистрации в каталогах, где ваше объявление (ваш сайт) подходит для размещения в нескольких рубриках. В этом уроке мы реализуем подобный виджет с помощью Mootools.

  • Автоматическая подпись изображений с помощью MooTools

    Этот урок расскажет Вам про то, как сделать автоматическую подпись под рисунком с помощью MooTools.

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 12 Июля 2009 22:31
    Dmitro
    прикОльнеНько ((= пасИба за урОк!
  • 13 Июля 2009 11:09
    Виталий
    Классная штука. Спасибо!
  • 14 Июля 2009 13:50
    positive
    токовая уже имеется)
  • 14 Июля 2009 20:27
    МаксимКурочкин
    positive, вряд ли на этом сайте есть такая панель, подобные есть, согласен, но это более легкий и полезный вариант,я думаю...
  • 15 Июля 2009 11:15
    Диман
    Спасибо, крнечно, но такими вещами лучше не увлекаться! Тогда это уже напичканный скриптами хлам, а не сайт.
  • 16 Июля 2009 18:59
    Pasha
    Сделал все как написано в статье, но у меня почему-то при открытии страницы панель выдвинута, а после клика она прячеться :( как сделать чтобы она сразу спрятаной была?:)
  • 20 Июля 2009 12:05
    frol
    Здраствуйте. Ради интереса создал такую же панель на JQuery, кода примерно столько же получилось. Вопрос на засыпку: что лучше использовать в таких случаях JQuery или Mootools? И еще, хотелось бы урок по Mootools...
  • 24 Июля 2009 11:59
    Lazyfriend
    Спасибо за урок, давно искал такое. Но панель, при выдвижении почему то толкает все содержимое сайта вниз. Если менять атрибут position, то она вовсе перестает работать. Как исправить это?
    • 6 Августа 2012 15:55
      ЯВладимир
      В части CSS пишете например: .topp{ position:absolute; top: 100px;} В части body задаёте класс: <p class='topp'>Выезжающая панель для сайта на Mootools</p>
  • 31 Июля 2009 15:51
    yurikus
    Спасибо за урок. Но очень хочется, что бы была возможности сделать одновременно, наприер, три таких панели на странице для разных целей. Если это можна сделать прошу дать ответ или если не трудно сделать дополнительний урок.
  • 9 Сентября 2009 16:26
    MaxZone
    У меня возник такой вопрос как сделать чтоб эта панель была "поверх всех" чтоб она не занимала определенную область сверху! а открывалась с наложением ???
  • 26 Сентября 2009 15:31
    neverfan
    <b>MaxZone</b> это можно реализовать на всех браузерах прописав position:fixed, кроме ие6, он не поддерживает fixed...
  • 6 Марта 2010 19:43
    MrFrost
    neverfan, нельзя! Уже пробовал и с fixed, и с absolute, и z-index пробовал ставить! Никак не накладывается! Помогите пожалуйста! Может кто-нибудь знает что можно сделать?
  • 14 Марта 2010 22:35
    bulls
    В ie-6 ,кнопка до конца не заезжает , остаётся отступ .А так панельку прикрутил к footer-у , смотриться отлично!
  • 5 Августа 2010 11:46
    ricco
    Здравствуйте подскажите пожалуйсто как сделать чтобы несколько панелий закрывалось, вот мой код <script type="text/javascript"> <!-- // ADD TIP FUNCTION window.addEvent('load', function() { var Tips1 = new Tips($$('.Tips1')); var mySlide = new Fx.Slide('top-panel'); $('toggle').addEvent('click', function(e){ e = new Event(e); mySlide.toggle(); e.stop(); }); }); //--> </script> не много изменен но ра ботает, мне нужно несколько панелий а открывается только одна уже все испробовал.
  • 2 Сентября 2010 19:39
    ArtemRezvetzov
    Круто, надо будет поставить. Спасибо ;)
  • 12 Сентября 2010 23:49
    Genetics
    Спасибо. Есть вопрос. Как сделать так, чтобы при загрузки страницы, панель не была открытой. Что-то типа display: block;
  • 19 Июля 2011 05:33
    Novosad
    Прятайте с помощью overflow: hidden. Место занимать будет (фактически), но будет спрятаной :)
  • 14 Августа 2011 05:05
    Roland
    А как ее расположить с лева или справа??? Подскажите как чайнику.. Спасибо!
  • 20 Сентября 2011 21:29
    altair_bergadler
    Как мне быть? На сайте уже подключен один муутулс, более старой версии, как их помирить? И можно ли подключить 2 раза?
  • 8 Октября 2011 19:21
    mkdmkd1
    Чтоб панель при выдвижении не толкала содержимое сайта вниз надо ставить position:absolute не для самой выдвижной панели а для блока в котором она находится, а для блока в которм лежит блок с position:absolute ставим position:relative и z-index . Работает даже в IE6. Если не понятно обьяснил то пишите на ICQ 640-752-241
    • 8 Октября 2011 23:50
      copyright
      Спасибо. Фуф, вроде заработало. Правда в Netscape маленько криво, но пойдет.
    • 9 Октября 2011 00:28
      copyright
      ааааааа...!!!! В IE то работает, то не работает! После удаления хроники в IE идет нормально, но в адрессной строке появляется "file:///I:/xxxx%20MyFiles/WWW/.....скипано..../index.html#" Т.е. в конце "#". Чего делать то?
  • 1 Ноября 2011 12:15
    qwerty32
    Панели не было бы цены, если бы при прокрутке она все время оставалась на месте. Скажем, внизу страницы торчал бы ярлычок. При клике выезжала панель. Понятно- накладываясь поверх на содержимое, а не сдвигая его. Как это сделать- ума не приложу.. На jquery подобное где-то пробегало. А в таком виде, как этот скрипт здесь реализован.. ну это мало что дает с точки зрения юзабилити. Кто-то знает ссылки на тему? Буду очень благодарен.. :) Про fixed- успокоиться..
  • 24 Октября 2012 13:14
    Anya_osa
    Подскажите пожалуйста как сделать чтобы она выезжала снизу вверх?
^ Наверх ^