
Анимированное меню с вкладками на JavaScript
Этот скрипт - небольшая доработка меню с вкладками, которое я описывал в одной из своих предыдущих статей. Я решил добавить в него эффект анимации: при наведении курсора на вкладку она плавно поднимается над строкой меню, а при выходе курсора за пределы вкладки плавно опускается обратно. Главная фишка, чтобы анимация работала параллельно и независимо для каждой вкладки. Начнем с разметки, она очень похожа на разметку из предыдущей статьи, но с одним дополнением - строка меню дополнительно обернута в контейнер фиксированной высоты, который имеет стиль overflow:hidden. В остальном все то же самое.Code (HTML) : Убрать нумерацию
- <div id="over_menu">
- <div id="menu">
- <a href="#" class="viramaina" id="menu1">Information</a>
- <a href="#" class="viramaina" id="menu2">Products</a>
- <a href="#" class="viramaina" id="menu3">Do!</a>
- <a href="#" class="viramaina" id="menu4">Payments</a>
- <a href="#" class="viramaina" id="menu5">Exit</a>
- </div>
- </div>
- <div id="content">
- lorem ipsum dolor sit amet
- </div>
Code (HTML) : Убрать нумерацию
- #over_menu {
- height: 50px;
- overflow: hidden;
- }
- #menu {
- position: relative;
- height: 30px;
- margin-top: 15px;
- }
- .viramaina {
- position: relative;
- height: 45px;
- border: 2px solid #909090;
- background: #E0E0E0;
- color: #000000;
- float: left;
- padding: 5px 10px 0 10px;
- border-radius: 16 16 0 0;
- font-weight: bold;
- font-family: Arial;
- text-decoration: none;
- }
- a.viramaina:hover {
- background: #FFFFFF;
- color: #FF0000;
- }
- #content {
- font-size: 16px;
- border: 2px solid #909090;
- padding: 20px;
- border-radius: 0 16 16 16;
- }
В принципе, можно обойтись и одним таймером, меняя только направление сдвига, но я решил добиться максимального эффекта. Подъем вкладки более быстрый, движение вкладки вниз более медленное. Если провести мышкой вдоль всего меню, то оно колыхнется как волна. В виде скрипта это выглядит следующим образом:
Code (HTML) : Убрать нумерацию
- // Максимальное значение сдвига
- var shift=-15;
- // Инициализация скрипта и установка обработчиков на каждую вкладку
- function init(elem) {
- // Обработать дочерние элементы меню
- var els=elem.getElementsByTagName('*');
- for (var i=0; i<els.length; i++) {
- var el=els[i];
- // Ищем элементы с определенным классом
- var re=/\bviramaina\b/;
- if (re.test(el.className)) {
- el.timer=null;
- el.step=0;
- el.shift=0;
- // Движение вкладки вверх
- el.onmousemove=function() {
- // Если был установлен таймер опускания, то сбросить его
- if (this.step==-1 && this.timer!=null) {
- clearInterval(this.timer);
- this.timer=null;
- }
- this.step=1;
- if (this.timer==null) {
- this.timer=setInterval('do_viramaina("'+this.id+'");',10);
- }
- };
- // Движение вкладки вниз
- el.onmouseout=function() {
- // Если был установлен таймер подъема, то сбросить его
- if (this.step==1 && this.timer!=null) {
- clearInterval(this.timer);
- this.timer=null;
- }
- this.step=-1;
- if (this.timer==null) {
- this.timer=setInterval('do_viramaina("'+this.id+'");',50);
- }
- }
- }
- }
- }
- // Функция смещения вкладки меню вверх или вниз
- function do_viramaina(id) {
- var el=document.getElementById(id);
- el.shift-=el.step;
- if (el.shift>0) {
- el.shift=0;
- clearInterval(el.timer);
- el.timer=null;
- return false;
- }
- if (el.shift<shift) {
- el.shift=shift;
- clearInterval(el.timer);
- el.timer=null;
- return false;
- }
- el.style.top=el.shift+'px';
- }
Code (JavaScript) : Убрать нумерацию
- var tmp=document.getElementById('menu');
- init(tmp);
Просмотров: 5360 | Комментариев: 2

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

Вася
(27.01.2014 в 15:55):
Интересная реализация на чистом js без сторонних библиотек (того же jQuery), что сейчас редко. Спасибо!

Добавить комментарий
Заполните форму для добавления комментария

Нынче модны реализации на css3 без примесей js