Anonymní profil Alaman – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

Anonymní profil Alaman – Programujte.comAnonymní profil Alaman – Programujte.com

 

Příspěvky odeslané z IP adresy 84.42.142.–

Alaman
JavaScript, AJAX, jQuery › Rozbalovací menu - mouseente…
21. 7. 2012   #160388

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;
		}
Alaman
JavaScript, AJAX, jQuery › Rozbalovací menu - mouseente…
21. 7. 2012   #160386

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);
		});
	});
Alaman
JavaScript, AJAX, jQuery › Rozbalovací menu - mouseente…
21. 7. 2012   #160384

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

Alaman
JavaScript, AJAX, jQuery › Rozbalovací menu - mouseente…
21. 7. 2012   #160382

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

 

 

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