Здравствуйте!
Я хочу сделать меню как на
http://www.utkonos.ru Каталог товаров
Большое спасибо огромное РОНИ за подсказки.
Вот что у меня получиилось
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.menu{
border:1px dashed #000;
width: 100px;
}
.submenu{
display: none;
background:#FFF;
position:absolute;
left:0px;
top:7px;
padding-left:100px;
border:2px solid #F00;
z-index: 10;
}
.menu_block{
cursor: pointer;
background:#CCC;
}
.level-otk{ position: relative;
z-index: 100;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function () {
$(".menu_block").mouseenter(function(){
var $elem = $(".submenu", this);
if ($elem.css('display') === 'none') {
$elem.stop(true).delay(700).fadeIn(600);
} else {
$elem.stop().animate({opacity:1}, 600);
}
}).mouseleave(function(){
$(".submenu", this).stop(true).delay(300).fadeOut(600);
});
});
</script>
</head>
<body>
<div class="menu">
<div class="menu_block">
<a class="level-otk" href="#">Меню1</a>
<span class="submenu">
<li class="level-2">Меню1 Подменю1</li>
<li class="level-2">Меню1 Подменю2</li>
<li class="level-2">Меню1 Подменю3</li>
</span></div>
<div class="menu_block">
<a class="level-otk" href="#">Меню2</a>
<span class="submenu">
<li class="level-2">Меню2 Подменю1</li>
<li class="level-2">Меню2 Подменю2</li>
<li class="level-2">Меню2 Подменю3</li>
</span></div>
<div class="menu_block">
<a class="level-otk" href="#">Меню3</a>
<span class="submenu">
<li class="level-2">Меню3 Подменю1</li>
<li class="level-2">Меню3 Подменю2</li>
<li class="level-2">Меню3 Подменю3</li>
</span></div></div>
</body>
</html>
Само меню плавно появляется.Именно то что и хотел.
Но вот когда переходишь к другой вкладке меню оно тоже медленно меняется, а на сайте быстрая смена .
Подскажите как это организовать?