Slide menu

[JacquesL]

Beste Forum,

Ik ben op zoek naar een slide menu. Nou ja eigenlijk is het geen menu maar zo noem ik het maar even. Als je in Google naar een onderwerp zoek dan zie je vaak "Mensen vragen ook" links bovenin de resultaten van Google. Wanneer je dan op het pijltje klikt schuift de pagina inhoud omlaag en krijg je de info te zien die bij dat "pijltje" hoort.
Naar zoiets ben ik op zoek. Ik had er een gevonden (dacht ik) die qua lay-out en info er goed uit ziet en precies is wat ik zoek, echter wanneer je er twee (of meerdere) onder elkaar plaatst en je klikt op zo'n pijltje dan schuiven ze allemaal open i.p.v. individueel.

Wie kan mij hier een tip voor geven?

Groetjes
Jacques

 

[Aar]

Dat is toch niet moeilijk met bijv. de jQuery library?
Wat heb je dan gevonden? Ik denk dat je met het gebruik van verschillende classes/id's ervoor kan zorgen dat ze niet allemaal open gaan.

 

[JacquesL]

Hallo Aar,

Bedankt voor je reactie. Ik heb het volgende gevonden.

https://www.solodev.com/blog/web-design/how-to-add-a-slide-down-menu-to-your-nav.stml

Mede omdat deze redelijk qua vormgeving is aan te passen. In bovenstaand voorbeeld heb ik de 3 kolommen van het voorbeeld aangepast naar 1 kolom en dan over de volle breedte. So far so good.
Maar als ik dan de html code van de eerste kopieer en er vervolgens onder plaatst ziet het er nog steeds goed uit. Ik krijg keurig twee balkjes (dit moeten er ongeveer 30 worden). Echter schuiven ze dan alle twee open i.p.v. diegene die ik selecteer. en dat is nou net niet de bedoeling.

Groetjes
Jacques

 

[Aar]

Heb je een voorbeeld in JSfiddle?

 

[JacquesL]

Hallo Aar,

Ik begrijp denk ik je vraag niet helemaal goed. Wat is een JSfiddle?

 

[Aar]

Een website om HTML, CSS en JavaScript te testen.
Zie ook: https://en.wikipedia.org/wiki/JSFiddle

Website is: Www.jsfiddle.net

 

[bron]

Niet getest maar je kan dit proberen.

header-1 en menu-btn-1 toevoegen in 1e menu
In het 2e menu gebruik je header-2 en menu-btn-2

Het 1e menu wordt dan

<div class="header header-1">
    ...
    <div class="menu-btn menu-btn-1">
        <a onclick="documentTrack('#');" href="#">Menu <i class="fa fa-chevron-down"></i></a>
    </div> 
    ...
</div>

Javascript

$(document).ready(function(){

    // 1e menu
    $(".menu-btn-1").on('click',function(e){
        e.preventDefault();
        if(!$(this).prev().hasClass("open")) {
            $(".header-1").slideDown(400);
            $(".header-1").addClass("open");
            $(this).find("i").removeClass().addClass("fa fa-chevron-up");
        } else if($(this).prev().hasClass("open")) {
            $(".header-1").removeClass("open");
            $(".header-1").slideUp(400);
            $(this).find("i").removeClass().addClass("fa fa-chevron-down");
        }
    });

    // 2e menu
    $(".menu-btn-2").on('click',function(e){
        // kopie van 1e menu maar dan met menu-btn-2 en header-2
    });

});

 

[JacquesL]

Hallo Bron,

Bedankt voor deze tip. Het werkt nu naar behoren.
Ook Aar bedankt.

Groet Jacques