Menu met jQuery

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Junior Java developer met ondernemend karakter

Vacature Omschrijving Je komt te werken in een jong en creatief team waarin je écht onderdeel bent van de ontwikkelingen binnen de organisatie. Korte lijnen, weinig bureaucratie en een informele werksfeer. Iemand met een ondernemend karakter zal zich snel thuis voelen. Daarnaast bieden we een marktconform salaris, een gezamenlijke lunch én een 2-wekelijkse stoelmassage. Functieomschrijving Je ontwikkelt mee aan een uniek software platform vol componenten waarmee consultants (en klanten) zowel SaaS- als Enterprise oplossingen creëren op het gebied van ‘Kwaliteit & Veiligheid’, ‘Privacy & Informatiebeveiliging’ en ‘Governance, Risk & Compliance’. Vanuit een overtuigende passie voor het digitaal transformeren van werkprocessen

Bekijk vacature »

Jorn Reed

Jorn Reed

15/08/2019 19:08:57
Quote Anchor link
Ik heb een kaart gemaakt met html/css wat bestaat uit 4 menu's. Natuurlijk zou ik elk menu op een andere pagina kunnen doen. En elke menu knop naar één van de pagina's kunnen leiden. Maar graag wil ik met jQuery, dat wanneer je op 1 van de 4 knoppen drukt dat dat specifieke menu verschijnt. Zodra 1 menu geopend is, word het hoofdmenu op `diplay: none` gezet en het menu dat gekozen is op `display: block`. Dit kan ik heel makkelijk doen door een .click functie en de .show() en .hide() functies van jQuery. Elke keer als een één van de specifieke menu's actief is dat er een 'go back' knop is, die terug leidt naar het hoofd menu. Om niet te veel overbodige code te hebben wil ik dat elk van de 4 menu's gewoon dezelfde 'go back' knop gebruikt. Die wanneer je er op klikt, dat het specifieke menu sluit en het hoofdmenu weer zichtbaar is. Hoe kan ik dit het beste met jQuery doen?

Hieronder is de code die ik dit moment gebruik. Ook heb ik nog maar 1 van de menu's in de code staan, puur om het een en ander te testen.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<div class="container-fluid" id="menu">
            <div class="row">
                <div class="col-md-2 col-sm-2 col-2 offset-md-5 offset-sm-5 offset-5">
                    <div id="weed-tab">
                        <a href="#"><img class="menu-btn" src="{{assets}}/img/menu-button-weed.png"></a>
                        <p class="menu-name">Wiet</p>
                    </div>
                </div>
            </div>
            <div class="row justify-content-md-center">
                <div class="col-md-2 col-sm-2 col-2">
                    <div id="indica-tab">
                        <a href="#"><img class="menu-btn" src="{{assets}}/img/menu-button-weed.png"></a>
                        <p class="menu-name">Indica</p>
                    </div>
                </div>
                <div class="col-md-2 col-sm-2 col-2">
                    <div id="sativa-tab">
                        <a href="#"><img class="menu-btn" src="{{assets}}/img/menu-button-weed.png"></a>
                        <p class="menu-name">Sativa</p>
                    </div>
                </div>
                <div class="col-md-2 col-sm-2 col-2">
                    <div id="hybrid-tab">
                        <a href="#"><img class="menu-btn" src="{{assets}}/img/menu-button-weed.png"></a>
                        <p class="menu-name">Hybrid</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="container-fluid" id="weed-menu">
            <div class="row">
                <div class="col-md-2 offset-md-5">
                    <div class="back-btn">
                        <img class="menu-btn" src="{{assets}}/img/menu-button-weed.png">
                    </div>
                </div>
            </div>
        </div>

    </div>`
    <script>
        $('#weed-tab').click(function(){
            $('#menu').hide();
            $('#weed-menu').show();
            $('.back-btn').show();
        });

        $('.back-btn').click(function(){
            $('#menu').show();
            $('#weed-menu').hide();
        });
    </script>
Gewijzigd op 19/08/2019 18:34:24 door - Ariën -
 
PHP hulp

PHP hulp

15/09/2019 17:07:00
 
Adoptive Solution

Adoptive Solution

15/08/2019 21:03:35
 
Thomas van den Heuvel

Thomas van den Heuvel

15/08/2019 22:03:59
Quote Anchor link
Maar verloopt je hele navigatie en het laden van content via jQuery/JavaScript, of heb je daadwerkelijke page-refreshes en aparte URL's die je aanroept?
 
Jorn Reed

Jorn Reed

16/08/2019 18:53:05
Quote Anchor link
Alle navigatie items, en div's die aan de items zijn gekoppeld staan op 1 pagina

Toevoeging op 16/08/2019 18:54:19:



Dat is exact mijn post, alleen kwam ik niet uit de oplossingen die ze daar gaven
 
Jorn Reed

Jorn Reed

19/08/2019 17:55:06
Quote Anchor link
Ik heb een oplossing gevonden: https://www.bootply.com/jIyBm4IaoL
Dit is precies wat ik bedoel met mijn uitleg. Alleen in dit voorbeeld wordt jquery gebruikt en een bootstrap.js file.
Ik vroeg me af of het ook met 1 functie met jquery alleen kan. Dus 1 functie die voor alle buttons geldt en de div's die er aan zijn gekoppeld met bijvoorbeeld een ID
 
Yoop Overmaat

Yoop Overmaat

22/08/2019 17:18:46
Quote Anchor link
Het kan in 1 keer met een jquery script want dit kent ondersteuning van css.

In deze link een voorbeeld en verdere uitleg qau opzet.

Link: http://www.randomsnippets.com/2011/04/10/how-to-hide-show-or-toggle-your-div-with-jquery/
Gewijzigd op 22/08/2019 17:22:01 door Yoop Overmaat
 
Jorn Reed

Jorn Reed

22/08/2019 19:30:17
Quote Anchor link
Ik gebruik enigzins dezelfde code. Ik heb na het hoofdmenu nog 1 submenu. Daar zoek ik nu een oplossing voor. Ik zat ook te denken om het om te gooien, en er een one page app van te maken. Ik gebruik Wordpress en het Timber/Twig thema.
Ik zit te denken of het mogelijk is om gewoon routes te gebruiken. Die routes laden dan vervolgens componenten in(Div's met de juiste menu opties). Zodat niet alle html van alle menu mogelijkheden op 1 pagina staan. Maar dat het wel ingeladen kan worden. Ik vraag me alleen af of dat wel handig is.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.