Rozbalovací menu - mouseenter a mouseleave – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Rozbalovací menu - mouseenter a mouseleave – JavaScript, AJAX, jQuery – Fórum – Programujte.comRozbalovací menu - mouseenter a mouseleave – JavaScript, AJAX, jQuery – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
Alaman
~ Anonymní uživatel
7 příspěvků
21. 7. 2012   #1
-
0
-

Dobrý den.

Začínám s JQuery a řeším problém s rozbalovacím menu  - zde: http://www.dugr.cz/tt. Prozatím problém řeším na 1. položce (on-line nabídka). Když opustím zelené tlačítko, které vyvolalo zobrazení menu a najedu na zobrazený DIV, tento se skryje. Pomohl by mi prosím někdo s řešením problému.

HTML kód

			<ul id="menu1">
				<li>
					<a class="hmenu1" href="#">on-line nabídka</a>
					<div class="cmenu1"><span style="color:black">test test test</span></div>
				</li>
				<li><a class="hmenu1" href="#">skupiny objektů</a></li>
				<li><a class="hmenu1" href="#">katalog zdarma</a></li>
				<li><a class="hmenu1" href="#">firma (o nás)</a></li>
				<li><a class="hmenu1" href="#">kontakty</a></li>
				<li><a class="hmenu1" href="#">objednávka</a></li>
			</ul>

JQuery kód

$(document).ready(function ()
{
$("#menu1 li > .hmenu1").mouseenter(function ()
  {
  $(this).parent().find(".cmenu1").slideDown(300);
  });
$("#menu1 li > .hmenu1").mouseleave(function ()
  {
  $(this).parent().find(".cmenu1").slideUp(300);
  });
});

Nahlásit jako SPAM
IP: 84.42.142.–
Reklama
Reklama
kavva+4
Návštěvník
21. 7. 2012   #2
-
0
-

Ahoj, pridam ID tych divov ktore vysuvas do funkcii, ktore handluju mouseenter, mouseleave.. Pretoze ked odides z menu, tak sa okamzite stratie. 

Nahlásit jako SPAM
IP: 95.105.214.–
Alaman
~ Anonymní uživatel
7 příspěvků
21. 7. 2012   #3
-
0
-

#2 kavva
Mohl bys mi to prosim ukazat v kodu?

Nahlásit jako SPAM
IP: 84.42.142.–
Alaman
~ Anonymní uživatel
7 příspěvků
21. 7. 2012   #4
-
0
-

Problém vyřešen. Změna je v části pro mouseleave ...$("#menu1 li > .hmenu1").mouseleave(function ()... Možná se to bude někomu hodit jako základ vlastního rozbalovacího menu. Nová podoba JQuery kódu:

$(document).ready(function ()
	{
	$("#menu1 li > .hmenu1").mouseenter(function ()
		{
		$(this).parent().find(".cmenu1").slideDown(300);
		});
	$("#menu1 li").mouseleave(function ()
		{
		$(this).parent().find(".cmenu1").slideUp(300);
		});
	});
Nahlásit jako SPAM
IP: 84.42.142.–
Alaman
~ Anonymní uživatel
7 příspěvků
21. 7. 2012   #5
-
0
-

Na doplnění ještě CSS

#menu1	{
		font-size:1.4em;
		margin:0;
		padding:0;
		}
		
#menu1 > li
		{
		float:left;
		list-style-type:none;
		position:relative;
		}
		
#menu1 li > .hmenu1
		{
		display:block;
		height:35px;
		padding:55px 25px 0 15px;
		background:url(obrazky/menu1.jpg) no-repeat;		
		}
		
#menu1 li >.cmenu1
		{
		width:500px;
		height:200px;
		border:1px solid rgb(0,0,0);
		background:rgb(255,255,255);
		position:absolute;
		display:none;
		}
Nahlásit jako SPAM
IP: 84.42.142.–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 36 hostů

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý