Перейти к содержанию

Рекомендуемые сообщения

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

 

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

 

$(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;});});

 

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

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

<div class="box">

<div class="box-headinghome"><?php echo $heading_title; ?></div>
<div class="box-content3">
    <div class="box-category3">
 
<script type="text/javascript"> 
$(document).ready(function(){$('.sliEsq').click(function(){$(this).parent().children('.sliesQ').toggle('slow');return false;});}); 
</script>
 
      <ul>
        <?php foreach ($categories as $category) { ?>
        <li class="zag" >
          <?php if ($category['category_id'] == $category_id) { ?>
         <table width="100%" border="0">
  <tr>
    <td width="45px">
  <img src="/<?php echo $category['image']; ?>"  style="width:43px; "  /></td>
    <td><a style="width:150px;"  href="<?php echo $category['href']; ?>">  <?php echo $category['name']; ?> </a></td>
  </tr>
</table>
          <?php } else { ?>
  <table width="100%" border="0">
  <tr>
    <td width="45px">
  <img src="/<?php echo $category['image']; ?>"  style="width:43px; "  /></td>
    <td><a style="width:150px;"  href="<?php echo $category['href']; ?>">  <?php echo $category['name']; ?> </a></td>
  </tr>
</table>
          <?php } ?>
   
          <?php $c=1; ?>
          
          <?php if ($category['children']) { ?>
          <ul class="block1"><div style="background-color:#CAE3FC; width:5px; height:35px; ; margin-top:-13px; position:absolute;"></div><div style="display:block; float:left; margin-right:10px; ">
            <?php foreach ($category['children'] as $child) { ?>
            <?php $c=1+$c ; ?> <div class="subblock"><li  >
              <?php if ($child['category_id'] == $child_id) { ?>
              <a title="Развернуть" style="border:none; margin-top:16px; width:11px; position:absolute; height:11px; float:left;" href="javascript://" class="sliEsq">    <img  src="/arrow3.png" /></a> <a    style="padding-left:10px; margin-left:20px; padding-bottom:5px; "    href="<?php echo $child['href']; ?>">  <?php echo $child['name']; ?></a>
              <?php } else { ?>
         <a title="Развернуть" style="border:none; margin-top:16px; width:11px; position:absolute; height:11px; float:left;" href="javascript://" class="sliEsq">    <img  src="/arrow3.png" /></a> <a    style="padding-left:10px; margin-left:20px; padding-bottom:5px; margin-bottom:5px; "   href="<?php echo $child['href']; ?>">  <?php echo $child['name']; ?></a>
              <?php } ?><?php if($child['sister_id']){ ?>
 
<ul  style="position:relative; ; display:none; width:220px; padding-top:15px; "  class="sliesQ" >
 
<?php foreach($child['sister_id'] as $sisters) { ?>
 
 
<li style=" margin-top:-19px;">
 
<?php if ($sisters['category_id'] == $sisters_id) { ?>
 
<a href="<?php echo $sisters['href']; ?>" >  <?php echo $sisters['name']; ?></a>
 
<?php } else { ?>
 
<a href="<?php echo $sisters['href']; ?>">   <?php echo $sisters['name']; ?></a>
 
<?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>
</div>
</div>

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

 

<script type="text/javascript"> 

$(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>
 
<div class="sliesQ">
 
 
 
 
      <ul id="menu">
        <?php foreach ($categories as $category) { ?>
        <li class="zag"  >
          <?php if ($category['category_id'] == $category_id) { ?>
           <table width="100%" border="0">
  <tr>
    <td width="45px">
  <img src="/<?php echo $category['image']; ?>"  style="width:43px; "  /></td>
    <td><a style="width:150px;"    href="<?php echo $category['href']; ?>">  <?php echo $category['name']; ?> </a></td>
  </tr>
</table>
          <?php } else { ?>
         <table width="100%" border="0">
  <tr>
    <td width="45px">
  <img src="/<?php echo $category['image']; ?>"  style="width:43px; "  /></td>
    <td><a style="width:150px;"    href="<?php echo $category['href']; ?>">  <?php echo $category['name']; ?> </a></td>
  </tr>
</table>
          <?php } ?>
   
          <?php $c=1; ?>
          
          <?php if ($category['children']) { ?>
          <ul class="block1"><div style="background-color:#CAE3FC; width:5px; height:35px; ; margin-top:-20px; position:absolute;"></div><div style="display:block; float:left; margin-right:10px; ">
            <?php foreach ($category['children'] as $child) { ?>
            <?php $c=1+$c ; ?> <li  class="subblock">
              <?php if ($child['category_id'] == $child_id) { ?>
              <a title="Развернуть" style="border:none; margin-top:12px; width:11px; position:absolute; height:11px; float:left;" href="javascript://" class="sliEsq">    <img  src="/arrow3.png" /></a> <a    style="margin-bottom: 10px; margin-left:25px; font-weight:bold;  "   href="<?php echo $child['href']; ?>">  <?php echo $child['name']; ?></a>
              <?php } else { ?>
         <a title="Развернуть" style="border:none; margin-top:12px; width:11px; position:absolute; height:11px; float:left;" href="javascript://" class="sliEsq">    <img  src="/arrow3.png" /></a> <a    style="margin-bottom: 10px; margin-left:25px;  "   href="<?php echo $child['href']; ?>">  <?php echo $child['name']; ?></a>
              <?php } ?><?php if($child['sister_id']){ ?>
 
<ul  class="sliesQ" >
 
<?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 { ?>
 
<a href="<?php echo $sisters['href']; ?>">   <?php echo $sisters['name']; ?></a>
 
<?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> 
<div class="box">
   
  <div class="box-content2">
    <div class="box-category" style="padding-left:15px;">
 
 <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 { ?>
          <li style="display:none;"  ><a style="margin-left:50px;" href="<?php echo $category['href']; ?>">  <?php echo $category['name']; ?> </a>
          <?php } ?>
          <?php if ($category['children']) { ?>
          <ul style=" margin-top:3px;border-top:1px solid #91BBEB;" >
            <?php foreach ($category['children'] as $child) { ?>
            <li style="border-bottom:1px dotted #91BBEB; padding-top:10px; ">
              <?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 { ?>
             <a title="Развернуть" style="border:none;  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']; ?>">  <?php echo $child['name']; ?></a>
              <?php } ?><?php if($child['sister_id']){ ?>
 
<ul style="margin-bottom:15px;" class="sliesQ" >
 
<?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 { ?>
 
<a href="<?php echo $sisters['href']; ?>"> -  <?php echo $sisters['name']; ?></a>
 
<?php } ?>
 
</li>
 
<?php } ?>
 
</ul>
 
<?php } ?>
            </li>
            <?php } ?>
          </ul>
          <?php } ?>
        </li>
        <?php } ?>
      </ul>
</div></div></div>

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Вариант

 

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

4fa01c28c25d136d51bb9d16a0ffe767.png

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

<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>
  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

<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

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

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

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

 

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

 

Вариант FOB нет

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

 

 

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

 

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

 

Вариант FOB нет

Ну так As of jQuery 1.7  :)

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Ну так As of jQuery 1.7 :)

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

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

и тогда:

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

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

Вариант FOB нет

:-D

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

 

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

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

 
Если быть короче
Это
 
<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>
 
заменил на это
 
<a class="hidemenu" title="Развернуть каталог" href="javascript://"class="sliEsq" >Каталог товаров <img  src="/arrow2.png" /></a>
 
Менюшка нужный вид приобрела но скрипт почемуто не выполняет, где я что неправльно сделал?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.