12.05.2015, 19:26
|
|
Интересующийся
|
|
Регистрация: 29.04.2015
Сообщений: 11
|
|
|
меню как на сайте утконос
Здравствуйте!
Я хочу сделать меню как на 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>
Само меню плавно появляется.Именно то что и хотел.
Но вот когда переходишь к другой вкладке меню оно тоже медленно меняется, а на сайте быстрая смена .
Подскажите как это организовать?
|
|
12.05.2015, 19:53
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,123
|
|
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>
|
|
12.05.2015, 20:07
|
|
Интересующийся
|
|
Регистрация: 29.04.2015
Сообщений: 11
|
|
|
Огромное спасибо РОНИ
|
|
13.05.2015, 00:38
|
|
Аспирант
|
|
Регистрация: 16.10.2009
Сообщений: 69
|
|
|
Эй, обидно, да!
Я делал события этого меню на стилях для большей браузерной нативности, а тут взяли... И все его события вульгарно на скриптах реализовали, еще и на jQuery (((
Боль, печаль...
|
|
13.05.2015, 12:32
|
 |
Профессор
|
|
Регистрация: 30.04.2012
Сообщений: 3,018
|
|
|
Можно на CSS же сделать.
|
|
13.05.2015, 14:37
|
|
Аспирант
|
|
Регистрация: 16.10.2009
Сообщений: 69
|
|
|
Ruslan_xDD,
Так я на Утконосе так и сделал, а тут скриптами... jQuery...
|
|
15.05.2015, 15:27
|
|
Интересующийся
|
|
Регистрация: 29.04.2015
Сообщений: 11
|
|
Сообщение от kichSman
|
Эй, обидно, да!
Я делал события этого меню на стилях для большей браузерной нативности, а тут взяли... И все его события вульгарно на скриптах реализовали, еще и на jQuery (((
Боль, печаль...
|
Для браузерной нативности, на утконосе стоит "У вас стоит старый браузер обновите его"
А вот про стили подсказка отличная.Большое всем спасибо.
Рони вдвойне за быстроту и отзывчивость! |
|
15.05.2015, 22:54
|
|
Профессор
|
|
Регистрация: 23.10.2010
Сообщений: 2,718
|
|
|
Капец система, ну то есть привыкнуть наверно можно, но по-первости очень пугает, когда внезапно страница хренакс и вся исчезает, а на ее месте конвульсивно появляется какой-то мелкий текст с отстойной версткой.
В принципе для роботов наверно потянет, хотя говорят они давно умеют понимать что текст не виден, даже если он есть в хтмле. Но для людей такое нельзя делать.
Не надо ныть - я дизайнер и могу все объяснять, но только вы же не будете слушать. Ну хотя бы это послушайте: нельзя чтобы на экране одновременно в двух местах на расстоянии, особенно по горизонтали, появлялись или исчезали контрастные элементы. Как это и сделано - когда слева внезапно рисуется жирная зеленая рамка, а справа вместо аляпистого контента появляется убитая верстка на пустом листе.
Не делайте так, как себе бы не сделали.
Последний раз редактировалось kostyanet, 15.05.2015 в 22:58.
|
|
16.05.2015, 04:48
|
|
Профессор
|
|
Регистрация: 23.10.2010
Сообщений: 2,718
|
|
|
От животной природы у человека скорость регистрации движения боковым зрением в 14 раз выше чем центральным, которым мы распознаем образы, буквы, цифры, и поэтому оно тормознее. Так вот когда что-то мелькает сбоку, оно неизбежно заставляет скосить глаза - так действуют рекламщики со своей дебильной анимацией. Но если одновременно мелькнет с одного боку и на хорошем расстоянии с другого - вы получите природный разрыв шаблона и накажете юзера через этот природный инстинкт.
|
|
16.05.2015, 15:38
|
|
Аспирант
|
|
Регистрация: 16.10.2009
Сообщений: 69
|
|
|
kostyanet, веткой ошиблись?
|
|
|
|
