|
Сообщение от рони
|
|
Вариант на основе темы
|
Рони, спасибо большое! В изучении пока не дошёл до анимации, поэтому пока не всё понятно в Вашем коде, но, как только дойду, обязательно подробно изучу каждую строку.
Кстати, пусть оффтоп, но: уже неоднократно на форуме сталкиваюсь в разл. темах с Вашими комментариями - и всегда с удовольствием их читаю. Честно, Вы круты!)
Насчёт задачи - кое-что таки наклепал сам:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>JS Bin</title>
<style>
html, body{
height:100%;
margin:0;
padding:0;
}
#right_menu, li{
margin:0;
padding:0;
display:block;
}
#right_menu{
position:absolute;
width:65px;
height:125px;
background-color:#cccccc;
border:2px solid;
border-color: #dddddd #bbbbbb #bbbbbb #dddddd;
padding-left:50px;
}
li{
width:60px;
height:25px;
margin:5px;
line-height:25px;
font-family:arial, sans-serif;
font-size:10pt;
text-indent:5px;
}
li:hover{
background-color:navy;
color:white;
}
#b{
position:absolute;
left:10px;
}
</style>
</head>
<body>
<ul id='right_menu'>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<input type='button' id='b' value = 'Click'>
<script>
//запишем ссылку на объект-кнопку в перем-ую
var button = document.getElementById('b');
//получим контейнер UL в перем-ую
var menu=document.getElementById('right_menu');
//меню скрыто при загрузке стр-цы
menu.style.display='none';
//расположим кнопку справа-вверху от меню (позиционируем меню)
if(window.getComputedStyle){
menu.style.left=parseInt(getComputedStyle(button).left)+'px';
menu.style.top=parseInt(getComputedStyle(button).top)+'px';
}else{ //для IE8
menu.style.left=parseInt(button.currentStyle.left)+'px';
menu.style.top=parseInt(button.currentStyle.top)+'px';
}
var flag = false;
//ф-ция отображ-я меню
function show(){
menu.style.display='block';
//при выезжании меню текста нет
var lis = document.querySelectorAll('li');
for(var i=0; i<lis.length;i++){
lis[i].innerHTML = '';
}
//ширина и высота меню
var width = 0;
var height = 0;
return function frame_show() { // функция для отрисовки
width++;
height += 2;
menu.style.width = width + 'px';
menu.style.height = height + 'px';
if (width == 65) {
clearInterval(timer_show); // завершить анимацию
//отразить текст в "гот." меню
setTimeout(function(){
var lis = document.querySelectorAll('li');
lis[0].innerHTML = 'Effect 1';
lis[1].innerHTML = 'Effect 2';
lis[2].innerHTML = 'Effect 3';
lis[3].innerHTML = 'Effect 4';
},50);
}
}
}
//ф-ция сокрытия меню
function hide(){
//при въезжании меню текста нет (чтоб не "маячил")
var lis = document.querySelectorAll('li');
for(var i=0; i<lis.length;i++){
lis[i].innerHTML = '';
}
if(window.getComputedStyle){
var width = parseInt(getComputedStyle(menu).width);
var height = parseInt(getComputedStyle(menu).height);
}else{ //для IE8
width = parseInt(menu.currentStyle.width);
height = parseInt(menu.currentStyle.height);
}
return function frame_hide() { // функция для отрисовки
width--;
height -= 2;
menu.style.width = width + 'px';
menu.style.height = height + 'px';
if (height == 0) {
clearInterval(timer_hide); // завершить анимацию
//тут же скрыть меню полностью
setTimeout(function(){
menu.style.display='none';
},60);
}
}
}
//переключать режим видимости контейнера (кликом по кнопке)
button.onclick=function(event){
if(flag == false){
timer_show = setInterval(show(),1);
flag = true;
}else{
timer_hide=setInterval(hide(),1);
flag=false;
}
}
//скрыть контейнер при наж-ии вне кнопки
button.onblur=function(event){
timer_hide=setInterval(hide(),1);
flag=false;
}
</script>
</body>
</html>