меню как на сайте утконос
Здравствуйте!
Я хочу сделать меню как на 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>
Само меню плавно появляется.Именно то что и хотел. Но вот когда переходишь к другой вкладке меню оно тоже медленно меняется, а на сайте быстрая смена . Подскажите как это организовать? |
kostia170985,
<!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 () {
var time = 700;
$(".menu").on("mouseenter mouseleave", function(event){time = 700;})
$(".menu_block").mouseenter(function(){
var $elem = $(".submenu", this);
if ($elem.css('display') === 'none') {
$elem.stop(true).delay(time).fadeIn(600);
} else {
$elem.stop().animate({opacity:1}, 600);
}
time = 100;
}).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>
|
Огромное спасибо РОНИ
|
Эй, обидно, да!
Я делал события этого меню на стилях для большей браузерной нативности, а тут взяли... И все его события вульгарно на скриптах реализовали, еще и на jQuery ((( Боль, печаль... |
Можно на CSS же сделать.
|
Ruslan_xDD,
Так я на Утконосе так и сделал, а тут скриптами... jQuery... |
Цитата:
А вот про стили подсказка отличная.Большое всем спасибо. Рони вдвойне за быстроту и отзывчивость! |
Капец система, ну то есть привыкнуть наверно можно, но по-первости очень пугает, когда внезапно страница хренакс и вся исчезает, а на ее месте конвульсивно появляется какой-то мелкий текст с отстойной версткой.
В принципе для роботов наверно потянет, хотя говорят они давно умеют понимать что текст не виден, даже если он есть в хтмле. Но для людей такое нельзя делать. Не надо ныть - я дизайнер и могу все объяснять, но только вы же не будете слушать. Ну хотя бы это послушайте: нельзя чтобы на экране одновременно в двух местах на расстоянии, особенно по горизонтали, появлялись или исчезали контрастные элементы. Как это и сделано - когда слева внезапно рисуется жирная зеленая рамка, а справа вместо аляпистого контента появляется убитая верстка на пустом листе. Не делайте так, как себе бы не сделали. |
От животной природы у человека скорость регистрации движения боковым зрением в 14 раз выше чем центральным, которым мы распознаем образы, буквы, цифры, и поэтому оно тормознее. Так вот когда что-то мелькает сбоку, оно неизбежно заставляет скосить глаза - так действуют рекламщики со своей дебильной анимацией. Но если одновременно мелькнет с одного боку и на хорошем расстоянии с другого - вы получите природный разрыв шаблона и накажете юзера через этот природный инстинкт.
|
kostyanet, веткой ошиблись?
|
| Часовой пояс GMT +3, время: 06:41. |