Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webprogrammeren & scripting

[jQuery] 'nerveuze' navigatiebalk

blackhawkdesign
3 antwoorden
  • Ik heb mbv jQuery een navigatiebalk gebouwd waarvan de sub-navigatiebalk met kinderen tevoorschijn moet komen indien er subitems aanwezig zijn onder een hoofdmenu item.

    Op zich werkt het allemaal prima, maar ik zit met het 'gedrag' van de sub navigatie. Vaak, als deze tevoorschijn moet komen, komt hij eerst tevoorschijn, schuift onmiddelijk weer weg om vervolgens een tweede keer tevoorschijn te komen en dan te blijven staan zoals de bedoeling is. Dat ziet er allemaal erg onrustig uit natuurlijk en ik kan maar niet vinden waar het 'm in zit. Dus wie wat verder is met jQuery dan ik is bij deze uitgenodigd om een kijkje te nemen om te ontdekken waar het 'm in kan zitten.

    Ik heb de if-statements al heen en weer geschoven en ik ben met stop() aan de gang geweest, maar allemaal zonder het gewenste resultaat.
    Iemand een idee?

    De HTML van het menu bestaat droogweg uit een <ul> binnen een <div>:
    [code:1:ed15861dc9]
    <div id="wdmenubar">
    <ul>
    <li><a href="#">Optie met subitems</a>
    <ul>
    <li><a href="#">Eerste van de eerste</a></li>
    <li><a href="#">Tweede van de eerste</a></li>
    <li><a href="#">Derde van de eerste</a></li>
    </ul>
    </li>

    <li><a href="#">Nog een optie met subitems</a>
    <ul>
    <li><a href="#">Eerste van de tweede</a></li>
    <li><a href="#">Tweede van de tweede</a></li>
    </ul>
    </li>

    <li><a href="#">Geen subitems hier</a></li>

    <li><a href="#">Derde optie met subitems</a>
    <ul>
    <li><a href="#">Eerste van de derde</a></li>
    <li><a href="#">Tweede van de derde</a></li>
    <li><a href="#">Derde van de derde</a></li>
    <li><a href="#">Vierde van de derde</a></li>
    </ul>
    </li>

    <li><a href="#">Optie zonder subitems</a></li>
    </ul>
    </div><!– wdmenubar –>
    [/code:1:ed15861dc9]

    De jQuery:
    [code:1:ed15861dc9]
    $(document).ready(function() {

    $('#wdmenubar > ul > li > a').hover(

    function() {

    var nextItem = $(this).next();


    if(!nextItem.is('ul')) {
    $('#wdmenubar > ul > li > ul').slideUp('normal');

    }

    if((nextItem.is('ul')) && (!nextItem.is(':visible'))) {


    $('#wdmenubar > ul > li > ul').slideUp('normal'
    , function () {
    nextItem.slideDown('normal');
    }
    );

    }

    }

    );
    });
    [/code:1:ed15861dc9]

    Het voorbeeld live aan de gang:
    http://woot.ermens.net/navbalk.html
  • Aah eindelijk weer een leuke vraag :D Ik heb even je code bekeken en ik heb je probleem opgelost.

    Als je deze regel :
    [code:1:1ef64e53f3]
    $('#wdmenubar > ul > li > ul').slideUp('normal' , function () {
    nextItem.slideDown('normal');
    });
    [/code:1:1ef64e53f3]
    verandert in deze 2 regels:
    [code:1:1ef64e53f3]
    $('#wdmenubar > ul > li > ul').slideUp('normal');
    nextItem.slideDown('normal');
    [/code:1:1ef64e53f3]

    dan werkt het.

    Je maakt dus geen gebruik van de call back functie. De callback functie werd namelijk 2x afgevuurd, waardoor je dus dan open/dicht effect krijgt. Je callback functie wordt 2x afgevuurd doordat je alle submenus selecteert:

    [quote:1ef64e53f3]
    If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole.
    [/quote:1ef64e53f3]

    Succes!
  • Hartstikke bedankt!
    Dat is de oplossing inderdaad.

    Het was wel even puzzelen om te zien waar het verschil qua werking 'm nou in zat, maar die quote hielp enorm.
    Ik had namelijk ook al naar die callback zitten kijken, maar redeneerde dat het lood om oud ijzer zou zijn of ik het als callback of als losse functie direct erna zou gebruiken, het werd immers sowieso direct na de slideUp uitgevoerd.

    maar de quote verklaard het verschil.
    Weer wat geleerd :-)

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.