Je souhaite créer un menu déroulant avec jquery (ici the according jsFiddle).Problème de menu déroulant jQuery
HTML:
<ul id="mainmenu">
<li><a href="http://myszki/">Aktualności</a></li>
<li class="parent item13"><a href="/start.html">Galerie</a>
<ul>
<li><a href="/start/plenery.html">Plenery</a></li>
</ul>
</li>
<li class="parent"><a href="/start.html">Galerie</a>
<ul>
<li><a href="/start/plenery.html">Plenery</a></li>
</ul>
</li>
</ul>
JS:
$(document).ready(function()
{
var sub = 'ul#mainmenu li.parent ul';
var parents = 'ul#mainmenu li.parent';
var count = 0;
$(sub+", "+parents).mouseenter(
function()
{
$(this).children('ul').addClass('submenu');
var width = $(parents).width();
count++;
$(sub).find('a').css({'width':width}); //ustawienie parametrow wyswietlana
if ($(sub).is(':visible'))
{
$(sub).stop(true, true).show(); //pokaz
}
else
{
$(this).find('ul.submenu').stop(true, true).delay(800).slideDown('fast');
}
}).mouseleave(
function()
{
count--;
if (!count)
{
$(sub).stop(true, true).slideUp('fast');
}
});
});
CSS:
ul#mainmenu {
width: 990px; height: 35px;
background:#000;
clear: both;
}
ul#mainmenu li {float:left; position: relative; }
ul#mainmenu li a {
color: #FFFFFF;
font-size: 14px;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
line-height: 35px; padding: 0 19px 0 20px;
display: block;
z-index: 150;
position: relative;
}
ul#mainmenu li.backLava {background: url(../images/arrow_menu.png) no-repeat center bottom #202223; z-index: 20;}
ul#mainmenu li span {background: url(../images/star.png) left no-repeat; padding-left: 15px; z-index:50;}
ul#mainmenu li.parent ul {display: none; position: absolute; top:35px; }
ul#mainmenu li.parent ul li {border-bottom:1px solid darkgrey; border-left:1px solid darkgrey; border-right:1px solid darkgrey;}
ul#mainmenu li.parent ul span {background: none; padding-left: 4px;}
ul#mainmenu li.parent ul li a {text-decoration: none; background:#eeeeee; color: #000; font-size: 12px; line-height: 25px; display: block; padding: 0px; text-transform: none; opacity:0.8;filter:alpha(opacity=80); font-weight: normal; }
ul#mainmenu li.parent ul li.hover a { color: #000; }
Le problème est quand je passe la souris sur un des boutons parent tout le monde touche Parrent agrandisse. Que devrais-je changer dans mon code?
fonctions anonymes internes pourraient être simplifiées à '$ (ce) .Find ('ul') arrêt (true, true) .toggleClass ('sous-menu') slideToggle();..' – casraf