Выезжающая панель для сайта на 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
Просмотров: 81473
Правила перепечатки

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

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

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

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

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

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

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

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

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

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

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

^ Наверх ^