jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

init

Browse source
This commit is contained in:
Ilya Kantor 2014-10-26 22:10:13 +03:00
parent 06f61d8ce8
commit f301cb744d
2271 changed files with 103162 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

1
02-ui/05-widgets/06-widget-tasks/05-menu-animated/solution/sliding-hover/.plnkr Executable file
View file

@ -0,0 +1 @@
{"name":"sliding-hover","plunk":"ZAUnVNXXC0GZpj2J48fB"}

117
02-ui/05-widgets/06-widget-tasks/05-menu-animated/solution/sliding-hover/index.html Executable file
View file

@ -0,0 +1,117 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery.min.js"></script>
<style>
.menu {
padding: 5px;
width: 250px;
border: 1px solid black;
}
.menu ul {
margin: 0;
padding-left: 20px;
margin-left: 10px;
height: 0;
list-style-position: outside;
overflow: hidden;
}
.menu .menu-title {
padding-left: 16px;
background: url(http://js.cx/clipart/arrow-right.png) left center no-repeat;
font-size: 18px;
cursor: pointer;
}
.menu-open .menu-title {
background: url(http://js.cx/clipart/arrow-down.png) left center no-repeat;
}
.menu-open ul {
display: block;
}
</style>
</head>
<body>
<div id="selected"></div>
<div id="sweeties" class="menu">
<span class="menu-title">Сладости (наведи курсор)!</span>
<ul>
<li><a href="#cake">Торт</a></li>
<li><a href="#donut">Пончик</a></li>
<li><a href="#cake-small">Пирожное</a></li>
<li><a href="#chokolate">Шоколадка</a></li>
<li><a href="#icecream">Мороженое</a></li>
<li><a href="#souflet">Суфле</a></li>
<li><a href="#rahatlukum">Рахат-Лукум</a></li>
</ul>
</div>
<script>
var menu = new SlidingMenu({
elem: $('#sweeties'),
duration: 1000
});
$(menu).on("select", function(e) {
$("#selected").html(e.value);
});
function SlidingMenu(options) {
var self = this;
var elem = options.elem;
var duration = options.duration || 100;
var titleElem = elem.find('.menu-title');
var listElem = elem.find('ul');
elem.hover(slideListShow, slideListHide);
elem.on('click', 'a', onItemClick);
function onItemClick(e) {
$(self).triggerHandler({
type: "select",
value: e.target.getAttribute('href').slice(1)
});
return false;
}
function slideListShow() {
// анимируем высоту от нуля до scrollHeight
// чтобы scrollHeight был верный - ставим overflow: hidden
// скрываем при помощи height: 0 вместо display: none, чтобы анимация могла определить высоту
listElem.stop().animate({
height: listElem.prop('scrollHeight')
}, {
// время на часть высоты, которую еще надо показать
duration: duration * (listElem.prop('scrollHeight') - listElem.height()) / listElem.prop('scrollHeight')
});
}
function slideListHide() {
listElem.stop().animate({
height: 0
}, {
duration: duration * (listElem.height() / listElem.prop('scrollHeight'))
});
}
}
</script>
</body>
</html>