<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Мульти меню</title>
<link rel='stylesheet' href='css/style.css'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
<script>
// DOM готов
$(function() {
$("#menu").css("overflow", "hidden").wrapInner("<div id='mover' />");
var $el,
speed = 13.5,
cur = -1,
items = $("#menu a"),
max = items.length - 1;
items
.each(function(i) {
$(this).attr("data-pos", i);
})
.hover(function() {
$el = $(this);
$el.addClass("hover");
$("#mover").css("top", -($el.data("pos") * speed - 40));
// 40 - верхний отсутп для затухания
cur = $el.data("pos");
}, function() {
$(this).removeClass("hover");
});
$(document).keydown(function(event) {
cur = $(".hover").attr("data-pos");
// Стрелка вниз
if (event.keyCode == 40) {
$("[data-pos=" + cur + "]").trigger("mouseleave");
if (cur != max) { cur++; }
$("[data-pos=" + cur + "]").trigger("mouseenter");
}
// Стрелка вверх
if (event.keyCode == 38) {
$("[data-pos=" + cur + "]").trigger("mouseleave");
if (cur > 0) { cur--; }
$("[data-pos=" + cur + "]").trigger("mouseenter");
}
});
});
</script>
</head>
<body>
<div id="page-wrap">
<div id="title">
<h1>Мульти меню</h1>
<p>Используйте мышь</p>
<p>или клавиши ВВЕРХ и ВНИЗ. </p>
</div>
<div id="menu">
<ul>
<li><a href="#">Природа </a></li>
<li><a href="#">Receivability </a></li>
<li><a href="#">Alone time </a></li>
<li><a href="#">Togetherness </a></li>
<li><a href="#">Imperfection </a></li>
<li><a href="#">Exercise </a></li>
<li><a href="#">Rest </a></li>
<li><a href="#">Бог </a></li>
<li><a href="#">Thankfulness </a></li>
<li><a href="#">Forgiveness </a></li>
<li><a href="#">Inner peace </a></li>
<li><a href="#">Тишина </a></li>
<li><a href="#">Trust </a></li>
<li><a href="#">Contentness </a></li>
<li><a href="#">Sustainable visions </a></li>
<li><a href="#">Reflection </a></li>
<li><a href="#">Prayer+meditation </a></li>
<li><a href="#">Compassion </a></li>
<li><a href="#">Качество </a></li>
<li><a href="#">Patience </a></li>
<li><a href="#">Non-doing </a></li>
<li><a href="#">Presence </a></li>
<li><a href="#">Self-love </a></li>
<li><a href="#">Non-judging </a></li>
<li><a href="#">Non-comparing </a></li>
<li><a href="#">Интимность </a></li>
<li><a href="#">Inaccessibility </a></li>
<li><a href="#">Letting go </a></li>
<li><a href="#">Holistic thinking </a></li>
<li><a href="#">Respecting boundaries </a></li>
<li><a href="#">Wholeheartedness </a></li>
<li><a href="#">Свобода </a></li>
<li><a href="#">Openness </a></li>
<li><a href="#">Courage to fail </a></li>
<li><a href="#">Spiritual awareness </a></li>
<li><a href="#">Unselfish motives </a></li>
<li><a href="#">Authenticity </a></li>
<li><a href="#">Good energy </a></li>
<li><a href="#">Intuitive confidence </a></li>
<li><a href="#">Emotional expression </a></li>
<li><a href="#">Change coping </a></li>
<li><a href="#">Body grounding </a></li>
<li><a href="#">Courage to be me </a></li>
<li><a href="#">Unconditional love </a></li>
<li><a href="#">Effortlessness </a></li>
<li><a href="#">Listening to my body </a></li>
<li><a href="#">Cravings liberation </a></li>
<li><a href="#">Courage to ask for help </a></li>
<li><a href="#">Терпение </a></li>
<li><a href="#">Courage to be honest </a></li>
<li><a href="#">Self-esteem </a></li>
<li><a href="#">Nonharming consumption </a></li>
<li><a href="#">Happiness from within </a></li>
<li><a href="#">Commercial free-space </a></li>
<li><a href="#">Nontoxic food </a></li>
<li><a href="#">Respect for others truth </a></li>
<li><a href="#">Psychosomatic awareness </a></li>
<li><a href="#">Life-enjoyment </a></li>
<li><a href="#">Embracement </a></li>
<li><a href="#">Чистый воздух </a></li>
<li><a href="#">The loving choice </a></li>
<li><a href="#">Letting be </a></li>
<li><a href="#">Ups&downs </a></li>
<li><a href="#">Shamelessness </a></li>
<li><a href="#">No worries </a></li>
<li><a href="#">Accept of powerlessness </a></li>
<li><a href="#">Speaking for oneself </a></li>
<li><a href="#">Creative expression </a></li>
<li><a href="#">Environmental sensitivity </a></li>
<li><a href="#">Chi </a></li>
<li><a href="#">Soul-searching </a></li>
<li><a href="#">Non-expecting </a></li>
<li><a href="#">Well-being </a></li>
<li><a href="#">Stores </a></li>
<li><a href="#">Posters </a></li>
<li><a href="#">About </a></li>
<li><a href="#">Пресса </a></li>
</ul>
</div>
</div>
</body>
</html>
