Выдвигающееся меню

Решил заморочиться и сделать выдвигающееся меню . выдвигаться оно будет сверху.

HTML

Код (Text):

1.  
2.  
3. <div id="menu" style="position:absolute; background-color:blue; height:100px;width:100%;top:-100px;"></div>
4. <div id="button" style="background-color:black;width:40px;height:40px;position:absolute;"></div>

JS

Код (Text):

1.  
2.  
3. window.onload=function () {
4.    
5.     var button=document.getElementById('button'),
6.    
7.      menu=document.getElementById('menu');
8.    
9.         button.onclick= function () {
10.        
11.         menu.style.top='0';
12.            
13.        
14.        
15.        
16.        
17.        
18.        
19.         }
20.    
21.    
22.     }

1) Так как js изучаю совсем недолго не могу понять как сделать чтобы при втором щелчке оно обратно задвигалось.

2) Как реализовать плавное выдвижение (css3 не хочу использовать).

3) Почему

Код (Text):

1. document.getElementsByTagName('body').style.top='200';

является неправильным??? Cannot set property 'top'
Просьба сам код не выкладывать а натолкнуть на мысль ...

 

Код (Text):

1.  
2.  
3.     window.onload=function () {
4.    
5.     var button=document.getElementById('button'),
6.    
7.         menu=document.getElementById('menu');
8.    
9.         button.onclick= function () {
10.        
11.         if button.hasClass('closed'){
12.         menu.style.top='0';
13.         this.removeClass('closed').addClass('open');
14.         }
15.        
16.         else if button.hasClass('open'){
17.         menu.style.top='-100';
18.        
19.        
20.        
21.         }
22.        
23.            
24.         }
25.    
26.    
27.     }

Я правильно понял?? или несовсем?? Этой функцией я хочу сказать следующее: Если кнопка с id 'button' имеет класс 'closed' тогда menu top='0' удаляем класс 'closed' добавляем 'open', если кнопка имеет класс 'open' menu top='100' ;

 

да это я подглядел в код который на JQery, я так понимаю hasClass , addClass removeClass должны быть на чистом js

 

понял. Тогда получается вся эта заваруха с классами неправильный подход. куда копать?

 

На данный момент пытаюсь изучить чистый js в Jquery лезть не хочу (покачто), addClass, removeClass, использовал потомучто не знал что они с кода написанного на Jquery.

В общем я понял что мне нужно Условие если true то выполняется top='0', если false = '-100' , только вот какое условие написать я не пойму((((

 

К сожалению не могу понять этот вот код ... что это за условие зачем оно?

Код (Text):

1. // функция кроссбраузерной установки обработчиков событий
2. function addEvent(elem, type, handler){
3.   if(elem.addEventListener){
4.     elem.addEventListener(type, handler, false);
5.   } else {
6.     elem.attachEvent('on'+type, handler);
7.   }
8.   return false;
9. }

менюшку реализовал через такое условие

Код (Text):

1. if (menu.style.top == '0px') {
2.     menu.style.top = '-100px';
3. } else {
4.     menu.style.top = '0px';
5. }

 

Deonis спасибо за помощь

 

Подскажите пожалуйста как реализовать плавное выдвижение через SetInterval или setTimeout, я пробовал вставить один из методов в функцию отвечающее за появление блока , только вот установив setTimeout я всеголишь указываю что функция выполняется (например) через 3с, и блок появляется через 3с (лочично))))). но как плавно реализовать не доходит(((

Код (Text):

1.  button.onclick=  function top() {
2.        
3.         menu.style.top=(flag ? '-100px' : '-90px');
4.        
5.         flag=!flag;
6.        
7.         //return false;
8.         setInterval (top,3000);
9.            
10.         }

 

Deonis я тут обверрнул это всё дело в функцию 'go()' и подключил событие onclick к диву, только вот теперь хочу чтобы по второму клику менюшка обратно заезжала. решил делать через flag, только вот с выражением (pos++)+'px' у меня проблемы(((( http://jsfiddle.net/62U2F/3/

 

Deonis, http://www.lol.domstroi69.ru нажмите на черный квадрат, выйдет менюшка, но проблема в том что она тормозит (хром и опера) в ИЕ всё норм, убрал css свойство background-size:cover; в хроме норм стало, есть идеи??? можно ли bg-size:cover заменить скриптом?? так как ие 8ой его не понимает(( , или может быть мой js на выезжающий блок слегка кривой?

JS

Код (Text):

1. var flag = true,
2.     pos = -150,
3.     position = 0,
4. pozner = 0;
5.  
6. function go() {
7.  
8.     var el = document.getElementById('myblock'),
9.         knopka = document.getElementById('button'),
10.         block = document.getElementById('bg'),
11.         timer = setInterval(function () {
12.             el.style.top = (flag ? pos++ : pos--) + 'px';
13.        
14.             knopka.style.top = (flag ? position++ : position--) + 'px';
15.          
16.             block.style.top = (flag ? pozner++ : pozner--) + 'px';
17.          
18.             if (pos >= 0 || pos < -150) {
19.                 clearInterval(timer);
20.                
21.                 flag = !flag;
22.             }
23.  
24.         }, 5);
25.        
26. }
27. //document.getElementById('button').addEventListener('click', go, false);

2)кстати браузер выдает ошибку на .addEventListener. (( пришлось в html на кнопку ставить...

3) для ускорения менюшки ставил значение setInterval на '1' но чтото не очень быстро както (во всех браузерах по разному), а вот когда в скрипт дублируешь строки

Код (Text):

1. knopka.style.top = (flag ? position++ : position--) + 'px';
2.          
3.             block.style.top = (flag ? pozner++ : pozner--) + 'px';

то помогает...

Есть варианты как исправить торможение это??