Показать сообщение отдельно
  #8 (permalink)  
Старый 03.02.2014, 13:51
Аватар для Boolean_Type
Аспирант
Отправить личное сообщение для Boolean_Type Посмотреть профиль Найти все сообщения от Boolean_Type
 
Регистрация: 02.02.2014
Сообщений: 48

Сообщение от рони
Вариант на основе темы
Рони, спасибо большое! В изучении пока не дошёл до анимации, поэтому пока не всё понятно в Вашем коде, но, как только дойду, обязательно подробно изучу каждую строку.
Кстати, пусть оффтоп, но: уже неоднократно на форуме сталкиваюсь в разл. темах с Вашими комментариями - и всегда с удовольствием их читаю. Честно, Вы круты!)
Насчёт задачи - кое-что таки наклепал сам:
<!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>

Последний раз редактировалось Boolean_Type, 03.02.2014 в 15:56.
Ответить с цитированием