Blog. Just Blog

Анимированное меню с вкладками на JavaScript

Версия для печати Добавить в Избранное Отправить на E-Mail | Категория: Web-мастеру и не только | Автор: ManHunter
Этот скрипт - небольшая доработка меню с вкладками, которое я описывал в одной из своих предыдущих статей. Я решил добавить в него эффект анимации: при наведении курсора на вкладку она плавно поднимается над строкой меню, а при выходе курсора за пределы вкладки плавно опускается обратно. Главная фишка, чтобы анимация работала параллельно и независимо для каждой вкладки. Начнем с разметки, она очень похожа на разметку из предыдущей статьи, но с одним дополнением - строка меню дополнительно обернута в контейнер фиксированной высоты, который имеет стиль overflow:hidden. В остальном все то же самое.
  1. <div id="over_menu">
  2.     <div id="menu">
  3.         <a href="#" class="viramaina" id="menu1">Information</a>
  4.         <a href="#" class="viramaina" id="menu2">Products</a>
  5.         <a href="#" class="viramaina" id="menu3">Do!</a>
  6.         <a href="#" class="viramaina" id="menu4">Payments</a>
  7.         <a href="#" class="viramaina" id="menu5">Exit</a>
  8.     </div>
  9. </div>
  10. <div id="content">
  11. lorem ipsum dolor sit amet
  12. </div>
Таблица стилей тоже похожа. Главное отличие в том, что вкладки спозиционированы относительно строки меню, имеют высоту больше высоты строки меню и изначально смещены вниз под обрез верхней границы строки меню. Такая верстка позволит смещать вкладки по вертикали, достигая нужного эффекта.
  1. #over_menu {
  2.     height50px;
  3.     overflowhidden;
  4. }
  5. #menu {
  6.     positionrelative;
  7.     height30px;
  8.     margin-top15px;
  9. }
  10. .viramaina {
  11.     positionrelative;
  12.     height45px;
  13.     border2px solid #909090;
  14.     background#E0E0E0;
  15.     color#000000;
  16.     floatleft;
  17.     padding5px 10px 0 10px;
  18.     border-radius16 16 0 0;
  19.     font-weightbold;
  20.     font-familyArial;
  21.     text-decorationnone;
  22. }
  23. a.viramaina:hover {
  24.     background#FFFFFF;
  25.     color#FF0000;
  26. }
  27. #content {
  28.     font-size16px;
  29.     border2px solid #909090;
  30.     padding20px;
  31.     border-radius0 16 16 16;
  32. }
Теперь немного теоретической части, как это меню должно работать. На каждую вкладку устанавливаются два обработчика событий - перемещение курсора над вкладкой и выход курсора за ее границы. При заходе курсора на вкладку устанавливается персональный таймер, по которому вкладка плавно перемещается вверх с шагом в 1 пиксел до определенного значения. При подъеме вкладки до нужной высоты таймер сбрасывается. При выходе курсора за пределы вкладки устанавливается новый таймер, по которой она смещается обратно в прежнее положение. Идентификатор таймера, сдвиг и направление сдвига хранятся как свойства элемента вкладки.

В принципе, можно обойтись и одним таймером, меняя только направление сдвига, но я решил добиться максимального эффекта. Подъем вкладки более быстрый, движение вкладки вниз более медленное. Если провести мышкой вдоль всего меню, то оно колыхнется как волна. В виде скрипта это выглядит следующим образом:
  1. // Максимальное значение сдвига
  2. var shift=-15;
  3.  
  4. // Инициализация скрипта и установка обработчиков на каждую вкладку
  5. function init(elem) {
  6.     // Обработать дочерние элементы меню
  7.     var els=elem.getElementsByTagName('*');
  8.     for (var i=0i<els.lengthi++) {
  9.         var el=els[i];
  10.         // Ищем элементы с определенным классом
  11.         var re=/\bviramaina\b/;
  12.         if (re.test(el.className)) {
  13.             el.timer=null;
  14.             el.step=0;
  15.             el.shift=0;
  16.             // Движение вкладки вверх
  17.             el.onmousemove=function() {
  18.                 // Если был установлен таймер опускания, то сбросить его
  19.                 if (this.step==-&& this.timer!=null) {
  20.                     clearInterval(this.timer);
  21.                     this.timer=null;
  22.                 }
  23.                 this.step=1;
  24.                 if (this.timer==null) {
  25.                     this.timer=setInterval('do_viramaina("'+this.id+'");',10);
  26.                 }
  27.             };
  28.             // Движение вкладки вниз
  29.             el.onmouseout=function() {
  30.                 // Если был установлен таймер подъема, то сбросить его
  31.                 if (this.step==&& this.timer!=null) {
  32.                     clearInterval(this.timer);
  33.                     this.timer=null;
  34.                 }
  35.                 this.step=-1;
  36.                 if (this.timer==null) {
  37.                     this.timer=setInterval('do_viramaina("'+this.id+'");',50);
  38.                 }
  39.             }
  40.         }
  41.     }
  42. }
  43.  
  44. // Функция смещения вкладки меню вверх или вниз
  45. function do_viramaina(id) {
  46.     var el=document.getElementById(id);
  47.     el.shift-=el.step;
  48.     if (el.shift>0) {
  49.         el.shift=0;
  50.         clearInterval(el.timer);
  51.         el.timer=null;
  52.         return false;
  53.     }
  54.     if (el.shift<shift) {
  55.         el.shift=shift;
  56.         clearInterval(el.timer);
  57.         el.timer=null;
  58.         return false;
  59.     }
  60.     el.style.top=el.shift+'px';
  61. }
С версткой закончили, со скриптами тоже. Осталось инициализировать анимацию и прицепить ее к HTML-разметке нашего меню.
  1. var tmp=document.getElementById('menu');
  2. init(tmp);
Таким же образом можно сделать и вертикальное меню с анимацией, для этого достаточно изменить таблицу стилей и поменять направление сдвига элементов меню. Рабочий пример анимированного меню, описанного в статье, вы можете посмотреть на демонстрационной странице.

Поделиться ссылкой ВКонтакте Поделиться ссылкой на Facebook Поделиться ссылкой на LiveJournal Поделиться ссылкой в Мой Круг Добавить в Мой мир Добавить на ЛиРу (Liveinternet) Добавить в закладки Memori Добавить в закладки Google
Просмотров: 4142 | Комментариев: 2

Внимание! Статья опубликована больше года назад, информация могла устареть!

Комментарии

Отзывы посетителей сайта о статье
Jeka (17.02.2014 в 02:43):
(Давно не заглядывал в блог)
Нынче модны реализации на css3 без примесей js
Вася (27.01.2014 в 15:55):
Интересная реализация на чистом js без сторонних библиотек (того же jQuery), что сейчас редко. Спасибо!

Добавить комментарий

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2018
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.1 сек. / MySQL: 2 (0.0055 сек.) / Память: 4.75 Mb
Наверх