[jQuery] submenu komt heropend steeds.

[xehbit]

Hallo Tweakers,

Al enige tijd ben ik aan het spelen met jQuery, overigens een leuke library. Alleen voor het volgende wat ik aan doen ben wil het niet echt mee werken.

Hier gaat het om: http://kevinvdburgt.nl/
Ik heb een hoofdmenu, in dit geval 4 items: Welcome, Portfolio, Services en Contact Wanneer je met de muis over die 4 knoppen heeb gaat zie je een divje verschijnen met Submenu er in, Alleen als je met de muis langs alle4 achter elkaar langs gaat, blijft het een soort van flikkeren. Is hier iets tegen te doen? Op google kan ik niet echt iets vinden voor deze techniek.

[Verwijderd]

Heb even je javascript code doorgepluisd, maar je vraagt telkens hetzelfde submenu id op voor de verschillende buttons. Dan blijft ie een beetje steken in een loopje. Je zult dus zelf nog even een class distinctie oid toe moeten voegen om verschillende popup menuutjes voor de verschillende links te openen.

Probeer deze voorbeelden eens:

http://snippets.aktagon.c...e-hover-menus-with-jQuery

http://docs.jquery.com/Cookbook/Navigation

http://designreviver.com/...ss-example-dropdown-menu/

[NMe]

Dus je hebt door dat er een fade in- en een fade out-animatie is. Waarom zoek je dan niet op hoe je een lopende animatie cancelt? Ik ken jQuery niet maar in MooTools is dat triviaal.

[BryanD]

JavaScript:

function submenu_Show(){
$("#submenu_content").stop();
$("#submenu_content").fadeOut(function(){

 $("#submenu_content").fadeIn();
});
}; 

probeer dat eens, het probleem is dat je een queue opbouwt, en helaas hebben fadeIn en fadeOut geen queue: false optie, dus gebruiken we stop, overigens heb ik je fadeIn in een callback van fadeOut gezet, zo weet je zeker dat pas als de ene uitgefade is, hij begint met infaden.

edit:
laat maar, je jquery is een beetje te uitgebreid kan simpeler:

- zet in je CSS de submenu div op display: none; (scheelt laadtijd)
vervolgens je js:

JavaScript:

$("#header .content .menu a").hover(function() { 
 var title = $(this).attr("title");
 $("."+title).animation({"display":"block"},{"queue":"false","duration":"600"});
},function(){
  var title = $(this).attr("title");
 $("."+title).animation({"display":"none"},{"queue":"false","duration":"600"});
}

iets in die trand
die 2e function is de onmouseOut van hover
Hiervoor moet je overigens ook title's mee geven aan je <a> tag in je menu, hier mee kan je een submenu voor elk submenu maken bijvoorbeeld:

home heeft zijn eigen submenu
over ons heeft zijn eigen submenu etc.

En dan moet je ook aan elk submenu een class meegeven die gelijk staat aan de titel.
Enjoy

[ Voor 49% gewijzigd door BtM909 op 05-01-2011 22:10 ]

[xehbit]

BryanD schreef op zaterdag 01 januari 2011 @ 23:10:

code:

function submenu_Show(){
$("#submenu_content").stop();
$("#submenu_content").fadeOut(function(){

 $("#submenu_content").fadeIn();
});
};

probeer dat eens, het probleem is dat je een queue opbouwt, en helaas hebben fadeIn en fadeOut geen queue: false optie, dus gebruiken we stop, overigens heb ik je fadeIn in een callback van fadeOut gezet, zo weet je zeker dat pas als de ene uitgefade is, hij begint met infaden.

edit:
laat maar, je jquery is een beetje te uitgebreid kan simpeler:

- zet in je CSS de submenu div op display: none; (scheelt laadtijd)
vervolgens je js:

code:

$("#header .content .menu a").hover(function() { 
 var title = $(this).attr("title");
 $("."+title).animation({"display":"block"},{"queue":"false","duration":"600"});
},function(){
  var title = $(this).attr("title");
 $("."+title).animation({"display":"none"},{"queue":"false","duration":"600"});
}

iets in die trand
die 2e function is de onmouseOut van hover
Hiervoor moet je overigens ook title's mee geven aan je <a> tag in je menu, hier mee kan je een submenu voor elk submenu maken bijvoorbeeld:

home heeft zijn eigen submenu
over ons heeft zijn eigen submenu etc.

En dan moet je ook aan elk submenu een class meegeven die gelijk staat aan de titel.
Enjoy

Vreemdgenoeg krijk ik het alleen niet voor elkaar om het element 'display' te gebruiken, fontSize, height etc.. werkt wel.

EDIT:

Het is me al een beetje gelukt, echter heb ik nu wel het volgende probleem. Hoe krijg ik het voor elkaar om ook de linkjes op in de submenu (div) te gebruiken. Die verdwijnt direct als ik er met de muis heen ga, en om de DIV ook in de $() te zetten, gaat ook niet lukken.

[ Voor 8% gewijzigd door xehbit op 02-01-2011 01:02 ]

[Hiroj]

Dragon707 schreef op zondag 02 januari 2011 @ 00:13:
Het is me al een beetje gelukt, echter heb ik nu wel het volgende probleem. Hoe krijg ik het voor elkaar om ook de linkjes op in de submenu (div) te gebruiken. Die verdwijnt direct als ik er met de muis heen ga, en om de DIV ook in de $() te zetten, gaat ook niet lukken.

Ik heb even je html bekeken en persoonlijk vind ik dat het makkelijker kan.
Persoonlijk zou ik een <ul> lijst je maken en bij iedere parent een child toevoegen op de volgende manier:

HTML:

<ul id="menu">
    <li><a href="#">Home</a></li>
    <li id="parent"><a href="#">Portfolio</a>
        <ul id="submenu">
            <li>Fotografie</li>
            <li>CV</li>
        </ul>
    </li>
</ul>

Met jQuery kan je vervolgens per <li id="parent"> laten zoeken naar de bijhorende <ul id="submenu">.
Dan krijg je iets in de richting van:

JavaScript:

$('#parent').next('ul.submenu') function ( );

P.S. ik heb niet veel kennis van jQuery, maar ik meen dat ik wel in de goede richting zit met bovenstaande code.

[ Voor 0% gewijzigd door BtM909 op 05-01-2011 22:20 ]

[NMe]

Dragon707 schreef op zondag 02 januari 2011 @ 00:13:
[...]

Het is me al een beetje gelukt, echter heb ik nu wel het volgende probleem. Hoe krijg ik het voor elkaar om ook de linkjes op in de submenu (div) te gebruiken. Die verdwijnt direct als ik er met de muis heen ga, en om de DIV ook in de $() te zetten, gaat ook niet lukken.

Meteen na die show een timerfunctie zetten die na x seconden datzelfde ding weer verwijderd en on hover van dat element die timer telkens resetten zodat hij zichtbaar blijft als je er met de muis op staat? Het is geen rocket science hoor.