Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.06.2011, 12:45
Аспирант
Отправить личное сообщение для igsavenko Посмотреть профиль Найти все сообщения от igsavenko
 
Регистрация: 15.01.2010
Сообщений: 83

Плавное перемещение выделения меню

Здравствуйте, подскажите как сделать следующее. Есть такое меню. Например я нажимаю на сертификаты, выделение плавно опускается вниз, а потом только осуществляется переход по ссылке. Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 22.06.2011, 13:04
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,156

Сообщение от igsavenko
выделение плавно опускается вниз, а потом только осуществляется переход по ссылке
Сайт для слабовидящих и тормознутых?
Ответить с цитированием
  #3 (permalink)  
Старый 22.06.2011, 13:07
Аспирант
Отправить личное сообщение для igsavenko Посмотреть профиль Найти все сообщения от igsavenko
 
Регистрация: 15.01.2010
Сообщений: 83

Просто хотелось бы динамику внести.
Ответить с цитированием
  #4 (permalink)  
Старый 22.06.2011, 13:58
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,156

Сообщение от igsavenko
хотелось бы динамику внести
Ну какая-никакая, а динамика...

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
#container {
	position: relative;
	width: 100px;
	height: 120px;
	background-color: blue;
}
ul {
	position: absolute;
	color: #ffffff;
	list-style: none;
}
li {
	height: 30px;
	cursor: pointer;
}
#line {
	position: absolute;
	width: 100%;
	height: 30px;
	background-color: red;
}
</style>
<script type="text/javascript">
function Go(Obj) {
	var y=+document.getElementById('line').offsetTop
	var ys=+Obj.offsetTop
	var inc=(ys-y>0)? 1: -1
	setTimeout(function(){IncLine(y,ys,inc)},1)
}
function IncLine(Y,Ys,Inc) {
	var inc=Inc*2
	document.getElementById('line').style.top=Y+'px'
	if (Y==Ys) {
		// Переход куда нужно или запуск чего-то
		return
	}
	Y=(Inc==1 && Y+inc>Ys)? Ys: Y+inc
	Y=(Inc==-1 && Y+inc<Ys)? Ys: Y+inc
	setTimeout(function(){IncLine(Y,Ys,Inc)},1)
}
</script>
</head>
<body>
<div id='container'>
	<div id='line'></div>
	<ul>
		<li onclick='Go(this)'>Item 1</li>
		<li onclick='Go(this)'>Item 2</li>
		<li onclick='Go(this)'>Item 3</li>
		<li onclick='Go(this)'>Item 4</li>
	</ul>
</div>
</body>
</html>


Набросал в ИЕ7... Т.ч. просто как идея.

Последний раз редактировалось ksa, 22.06.2011 в 14:03.
Ответить с цитированием
  #5 (permalink)  
Старый 22.06.2011, 15:08
Аспирант
Отправить личное сообщение для bayrach Посмотреть профиль Найти все сообщения от bayrach
 
Регистрация: 16.01.2011
Сообщений: 71

В опера 11.10 работает с багами
Ответить с цитированием
  #6 (permalink)  
Старый 22.06.2011, 15:16
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,156

bayrach, ну то уже детали...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Находится ли мышка над дивом ? (выпадающее меню) advsm jQuery 31 24.09.2014 17:50
Ищу jQuery плагин для создания меню Zeboton jQuery 9 15.09.2014 15:31
Grid - roweditor плавное перемещение Jevgeny ExtJS 2 26.10.2010 14:43
Как "переключать" картинки в меню навигации? KirTer Элементы интерфейса 1 22.06.2009 11:49
Событие mouseout при наведении мыши на пункт меню WalterScott Events/DOM/Window 2 12.05.2009 22:05