Всплывающее меню

sokolbla · 14 жовтня 2013

Добрый день, подскажите столкнулся с токакой проблемой.

Есть скрипт меню каталога товаров.

$(document).ready(function(){$('.sliEsq').click(function(){$(this).parent().children('.sliesQ').toggle('slow');return false;});});

Меню выезжает при клике.

Хочу сделать так что бы менб выезжала при наведении мышки.

Заменил click на hover

$(document).ready(function(){$('.sliEsq').hover(function(){$(this).parent().children('.sliesQ').toggle('slow');return false;});});

Теперь меню выезжает но сразу же уезжает. как сделать так чтобы оно не пропадало пока не уберешь мышку с всплывшего меню.???

deim · 14 жовтня 2013

Разместить всплывающее меню внутри того блока, на который мышь наводите. Тогда при его появлении всё равно hover будет активен

sokolbla · 14 жовтня 2013

Код меню всплывающего меню categoryhome.tpl

$(document).ready(function(){$('.sliEsq').click(function(){$(this).parent().children('.sliesQ').toggle('slow');return false;});});

</script>

<ul>

<?php foreach ($categories as $category) { ?>

<?php if ($category['category_id'] == $category_id) { ?>

<tr>

<img src="/<?php echo $category['image']; ?>" style="width:43px; " /></td>

</tr>

</table>

<?php } else { ?>

<tr>

<img src="/<?php echo $category['image']; ?>" style="width:43px; " /></td>

</tr>

</table>

<?php } ?>

<?php $c=1; ?>

<?php if ($category['children']) { ?>

<?php foreach ($category['children'] as $child) { ?>

<?php $c=1+$c ; ?> <div class="subblock"><li >

<?php if ($child['category_id'] == $child_id) { ?>

<?php } else { ?>

<?php } ?><?php if($child['sister_id']){ ?>

<?php foreach($child['sister_id'] as $sisters) { ?>

<?php if ($sisters['category_id'] == $sisters_id) { ?>

<?php } else { ?>

<?php } ?>

</li>

<?php } ?>

</ul>

<?php } ?>

</li></div><?php

if ($c == 11) echo "</div> <div style='display:block; float:left; margin-right:10px;'> ";

if ($c == 21) echo "</div> <div style='display:block; float:left; margin-right:10px;'> ";

if ($c == 31) echo "</div> <div style='display:block; float:left; margin-right:10px;'> ";

if ($c == 41) echo "</div> <div style='display:block; float:left; margin-right:10px;'> ";

if ($c == 51) echo "</div> <div style='display:block; float:left; margin-right:10px;'> ";

?>

<?php } ?></div>

</ul>

<?php } ?>

</li>

<?php } ?>

</ul>

</div>

Код того где всплывает category.tpl

$(document).ready(function(){$('.sliEsq').click(function(){$(this).parent().children('.sliesQ').toggle('slow');return false;});});

</script>

<a title="Развернуть каталог" href="javascript://" class="sliEsq" style="-webkit-border-radius: 7px 7px 0px 0px;

-webkit-border-radius: 7px 7px 0px 0px;

-moz-border-radius: 7px 7px 0px 0px;

-khtml-border-radius: 7px 7px 0px 0px;

border-radius: 7px 7px 0px 0px;

border: 1px solid #92BBEC;

padding: 8px 10px 7px 10px;

font-family: Arial, Helvetica, sans-serif;

font-size: 21px;

font-weight: bold;

line-height: 22px;

height: 22px;

text-align: center;

color: White;

background: rgb(208,228,247); /* Old browsers */

background: -moz-linear-gradient(-45deg, rgba(208,228,247,1) 0%, rgba(115,177,231,1) 24%, rgba(10,119,213,1) 50%, rgba(83,159,225,1) 79%, rgba(135,188,234,1) 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(208,228,247,1)), color-stop(24%,rgba(115,177,231,1)), color-stop(50%,rgba(10,119,213,1)), color-stop(79%,rgba(83,159,225,1)), color-stop(100%,rgba(135,188,234,1))); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(-45deg, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(-45deg, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(-45deg, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); /* IE10+ */

background: linear-gradient(135deg, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0e4f7', endColorstr='#87bcea',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

display:block; text-decoration:none;">Каталог товаров <img src="/arrow2.png" /></a>

<?php foreach ($categories as $category) { ?>

<?php if ($category['category_id'] == $category_id) { ?>

<tr>

<img src="/<?php echo $category['image']; ?>" style="width:43px; " /></td>

</tr>

</table>

<?php } else { ?>

<tr>

<img src="/<?php echo $category['image']; ?>" style="width:43px; " /></td>

</tr>

</table>

<?php } ?>

<?php $c=1; ?>

<?php if ($category['children']) { ?>

<?php foreach ($category['children'] as $child) { ?>

<?php $c=1+$c ; ?> <li class="subblock">

<?php if ($child['category_id'] == $child_id) { ?>

<?php } else { ?>

<?php } ?><?php if($child['sister_id']){ ?>

<?php foreach($child['sister_id'] as $sisters) { ?>

<li>

<?php if ($sisters['category_id'] == $sisters_id) { ?>

<a href="<?php echo $sisters['href']; ?>" class="active"> <?php echo $sisters['name']; ?></a>

<?php } else { ?>

<?php } ?>

</li>

<?php } ?>

</ul>

<?php } ?>

</li><?php

if ($c == 11) echo "</div> <div style='display:block; float:left; margin-right:10px;'> ";

if ($c == 21) echo "</div> <div style='display:block; float:left; margin-right:10px;'> ";

if ($c == 31) echo "</div> <div style='display:block; float:left; margin-right:10px;'> ";

if ($c == 41) echo "</div> <div style='display:block; float:left; margin-right:10px;'> ";

if ($c == 51) echo "</div> <div style='display:block; float:left; margin-right:10px;'> ";

?>

<?php } ?></div>

</ul>

<?php } ?>

</li>

<?php } ?>

</ul>

</div>

<ul >

<?php foreach ($categories as $category) { ?>

<?php if ($category['category_id'] == $category_id) { ?>

<li> <a href="<?php echo $category['href']; ?>" class="active"> <?php echo $category['name']; ?> </a>

<?php } else { ?>

<?php } ?>

<?php if ($category['children']) { ?>

<?php foreach ($category['children'] as $child) { ?>

<?php if ($child['category_id'] == $child_id) { ?>

<a title="Развернуть" style=" margin-top:0px; ; width:11px; height:11px; float:left;" href="javascript://" class="sliEsq"> <img src="/arrow3.png" /></a><a style="margin-bottom: 10px;" href="<?php echo $child['href']; ?>" class="active"> <?php echo $child['name']; ?></a>

<?php } else { ?>

<?php } ?><?php if($child['sister_id']){ ?>

<?php foreach($child['sister_id'] as $sisters) { ?>

<li>

<?php if ($sisters['category_id'] == $sisters_id) { ?>

<a href="<?php echo $sisters['href']; ?>" class="active"> - <?php echo $sisters['name']; ?></a>

<?php } else { ?>

<?php } ?>

</li>

<?php } ?>

</ul>

<?php } ?>

</li>

<?php } ?>

</ul>

<?php } ?>

</li>

<?php } ?>

</ul>

</div></div></div>

Подскажи что куда вставить?

Tom · 14 жовтня 2013

А если click на mouseover сменить?

sokolbla · 14 жовтня 2013

А если click на mouseover сменить?

Наводишь на меню и оно выезжает, но пропадает только тогда если сново на меню навести курсор, если на него не навести а увести курсор в сторону, то оно все равно остается висеть.

sokolbla · 14 жовтня 2013

Вариант

Разместить всплывающее меню внутри того блока, на который мышь наводите. Тогда при его появлении всё равно hover будет активен

Подскажите какую часть кода куда нужно перенести, чтобы с HOVER заработало?

CODEONETEAM · 14 жовтня 2013

sokolbla, спрячьте код данного сообщения под спойлер.

sokolbla · 14 жовтня 2013

sokolbla, спрячьте код данного сообщения под спойлер.

Можно с примером, а то то не выходит, может я что не так делаю.

CODEONETEAM · 14 жовтня 2013

Да, без проблем:

sokolbla · 14 жовтня 2013

Да, без проблем:

Ну ты красавец я тут код страницы сайта ковыряю, спойлер этот вставить пытаюсь.

CODEONETEAM · 14 жовтня 2013

Ненужно усложнять то, что на самом деле просто. :wink:

sokolbla · 14 жовтня 2013

Так а по теме топика подскажи как сделать? Буду примерны форумчанином-)

CODEONETEAM · 14 жовтня 2013

Замените Ваш код:

<script type="text/javascript"> 

$(document).ready(function(){$('.sliEsq').click(function(){$(this).parent().children('.sliesQ').toggle('slow');return false;});}); 

</script>

на данный:

<script type="text/javascript">

// $(document).ready(function(){$('.sliEsq').click(function(){$(this).parent().children('.sliesQ').toggle('slow');return false;});});

$(document).ready(function()
{
	$('.sliEsq, .sliesQ').on('mouseenter', function()
	{
		$('.sliesQ').show();
	});
	
	$('.sliEsq, .sliesQ').on('mouseleave', function()
	{
		$('.sliesQ').hide();
	});
});

</script>

fob · 14 жовтня 2013

Замените Ваш код:

<script type="text/javascript"> 

$(document).ready(function(){$('.sliEsq').click(function(){$(this).parent().children('.sliesQ').toggle('slow');return false;});}); 

</script>

на данный:

<script type="text/javascript">

// $(document).ready(function(){$('.sliEsq').click(function(){$(this).parent().children('.sliesQ').toggle('slow');return false;});});

$(document).ready(function()
{
	$('.sliEsq, .sliesQ').live('mouseenter', function()
	{
		$('.sliesQ').show();
	});
	
	$('.sliEsq, .sliesQ').live('mouseleave', function()
	{
		$('.sliesQ').hide();
	});
});

</script>

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().

<script type="text/javascript">

// $(document).ready(function(){$('.sliEsq').click(function(){$(this).parent().children('.sliesQ').toggle('slow');return false;});});

$(document).ready(function()
{
	$('.sliEsq, .sliesQ').on('mouseenter', function()
	{
		$('.sliesQ').show();
	});
	
	$('.sliEsq, .sliesQ').on('mouseleave', function()
	{
		$('.sliesQ').hide();
	});
});

</script>

Мои 5коп., думаю так будет правильней )

гы http://try.jquery.com/levels/4/challenges/7

CODEONETEAM · 14 жовтня 2013

Не критично, но согласен:

так будет правильней )

Поправил! :wink:

P.S. На видео стереотип кодера-задрота, редкая модель, таких ископаемых в "Красную книгу" заносить нужно в срочном порядке, пока не вымерли, а потом детям показывать приговаривая "Ая-йа-йай сынок, видишь, что бывает если ...". :-D

sokolbla · 14 жовтня 2013

Испытания показали:

Вариант CODEONETEAM работает

Вариант FOB нет

CODEONETEAM · 14 жовтня 2013

А-а-а... победа! (хотя у меня прекрасно работают оба варианта :oops:). :-D

fob · 14 жовтня 2013

А-а-а... победа! (хотя у меня прекрасно работают оба варианта :oops:). :-D

Испытания показали:

Вариант CODEONETEAM работает

Вариант FOB нет

Ну так As of jQuery 1.7 :)

p.s. не знаю насчет вида, объясняет доходчиво, хоть и ботан ;)

sokolbla · 14 жовтня 2013

У меня стоит jQuery 1,6,1, подскажите стоит обновить до более актуальной версии?

CODEONETEAM · 14 жовтня 2013

Ну так As of jQuery 1.7 :)

Я понимаю, что такое обратная совместимость, просто шутил, в реальности мне глубоко пох.. на подобные мелочи :wink:, но бывают ситуации когда:

У меня стоит jQuery 1,6,1

и тогда:

Испытания показали:

Вариант CODEONETEAM работает

Вариант FOB нет

:-D

CODEONETEAM · 14 жовтня 2013

У меня стоит jQuery 1,6,1, подскажите стоит обновить до более актуальной версии?

Да, стоит, но не стоит метить слишком высоко, рекомендую - 1.7.1.

fob · 14 жовтня 2013

У меня стоит jQuery 1,6,1, подскажите стоит обновить до более актуальной версии?

Лучше не заморачиваться, если дальше нету планов по внедрению новых улучшений )

sokolbla · 14 жовтня 2013

Решил дальще немного доработать, сделать изменяющееся верхнюю часть меню при наведении:

Эту часть кода

// $(document).ready(function(){$('.sliEsq').click(function(){$(this).parent().children('.sliesQ').toggle('slow');return false;});});

$(document).ready(function()

{

$('.sliEsq, .sliesQ').live('mouseenter', function()

{

$('.sliesQ').show();

});

$('.sliEsq, .sliesQ').live('mouseleave', function()

{

$('.sliesQ').hide();

});

</script>

<a title="Развернуть каталог" href="javascript://" class="sliEsq" style="-webkit-border-radius: 7px 7px 0px 0px;

-webkit-border-radius: 7px 7px 0px 0px;

-moz-border-radius: 7px 7px 0px 0px;

-khtml-border-radius: 7px 7px 0px 0px;

border-radius: 7px 7px 0px 0px;

border: 1px solid #92BBEC;

padding: 8px 10px 7px 10px;

font-family: Arial, Helvetica, sans-serif;

font-size: 21px;

font-weight: bold;

line-height: 22px;

height: 22px;

text-align: center;

color: White;

background: rgb(208,228,247); /* Old browsers */

background: -moz-linear-gradient(-45deg, rgba(208,228,247,1) 0%, rgba(115,177,231,1) 24%, rgba(10,119,213,1) 50%, rgba(83,159,225,1) 79%, rgba(135,188,234,1) 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(208,228,247,1)), color-stop(24%,rgba(115,177,231,1)), color-stop(50%,rgba(10,119,213,1)), color-stop(79%,rgba(83,159,225,1)), color-stop(100%,rgba(135,188,234,1))); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(-45deg, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(-45deg, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(-45deg, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); /* IE10+ */

background: linear-gradient(135deg, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0e4f7', endColorstr='#87bcea',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

display:block; text-decoration:none;">Каталог товаров <img src="/arrow2.png" /></a>

Заменил со стилями вынесенными отдельно

<style>

a.hidemenu {

-webkit-border-radius: 7px 7px 7px 7px;

-moz-border-radius: 7px 7px 7px 7px;

-khtml-border-radius: 7px 7px 7px 7px;

border-radius: 7px 7px 7px 7px;

border: 1px solid #92BBEC;

padding: 8px 10px 7px 10px;

font-family: Arial, Helvetica, sans-serif;

font-size: 21px;

font-weight: bold;

line-height: 22px;

height: 22px;

text-align: center;

color: White;

background: rgb(208,228,247); /* Old browsers */

background: -moz-linear-gradient(-45deg, rgba(208,228,247,1) 0%, rgba(115,177,231,1) 24%, rgba(10,119,213,1) 50%, rgba(83,159,225,1) 79%, rgba(135,188,234,1) 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(208,228,247,1)), color-stop(24%,rgba(115,177,231,1)), color-stop(50%,rgba(10,119,213,1)), color-stop(79%,rgba(83,159,225,1)), color-stop(100%,rgba(135,188,234,1))); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(-45deg, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(-45deg, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(-45deg, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); /* IE10+ */

background: linear-gradient(135deg, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0e4f7', endColorstr='#87bcea',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

display:block; text-decoration:none;

}

a.hidemenu:hover {

-webkit-border-radius: 7px 7px 0px 0px;

-moz-border-radius: 7px 7px 0px 0px;

-khtml-border-radius: 7px 7px 0px 0px;

border-radius: 7px 7px 0px 0px;

}

</style>

// $(document).ready(function(){$('.sliEsq').click(function(){$(this).parent().children('.sliesQ').toggle('slow');return false;});});

$(document).ready(function()

{

$('.sliEsq, .sliesQ').live('mouseenter', function()

{

$('.sliesQ').show();

});

$('.sliEsq, .sliesQ').live('mouseleave', function()

{

$('.sliesQ').hide();

});

</script>

<a class="hidemenu" title="Развернуть каталог" href="javascript://"class="sliEsq" >Каталог товаров <img src="/arrow2.png" /></a>

Если быть короче

Это