Content toevoegen aan menu-item

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Guido  -

Guido -

16/04/2021 17:59:08
Quote Anchor link
Hallo,

Ik wil graag een + toevoegen aan elk menu-item waaronder een submenu hangt. Om submenu open of dicht te kunnen klappen.

Dit is globaal de opbouw vh menu:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
<ul id="mobile-nav">
    <li>Item 1</li>
    <li class="menu-item-has-children">Item 2</li>
        <ul>
            <li>Subitem 1</li>
            <li>Subitem 2</li>
        </ul>
    <li>Item 3</li>
</ul>


Ik heb deze JS die in de head geladen wordt, maar er gebeurt niets:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
var x = document.createElement("button");
x.setAttribute("name", " + ");
document.getElementById("mobile-nav").getElementsByClassName("menu-item-has-children").appendChild(x);



Wat doe ik verkeerd?

Guido
Gewijzigd op 16/04/2021 17:59:56 door Guido -
 
PHP hulp

PHP hulp

25/09/2021 12:13:19
 
Rob Doemaarwat

Rob Doemaarwat

16/04/2021 19:29:08
Quote Anchor link
Waarschijnlijk omdat de "head" er eerder is dan het menu zelf. Op het moment dat bovenstaande code loopt is er dus nog geen menu (de HTML parser is pas in de "head"), en gebeurt er ook niks.

Het makkelijkst is om je JS-code gewoon helemaal onderaan te hangen (net voor de </body> tag). als dat niet gaat (je de JS dus alleen in de head toe kunt voegen), dan de volgende event listener er "omheen":
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
document.addEventListener('DOMContentLoaded', function() {
  //hocus pocus hier
}, false);
De "hocus pocus" wordt dan pas uitgevoerd als het document (en dus ook het menu) helemaal is geladen.
 
Guido  -

Guido -

16/04/2021 21:24:34
Quote Anchor link
Hoi,

Dank, goed punt.
Het werkt overigens nog niet, als ik "mijn" JS binnen deze functie zet zou het uitgevoerd moeten worden, lijkt me? Of is mijn JS niet juist?

Guido
Gewijzigd op 16/04/2021 21:25:06 door Guido -
 
Ad Fundum

Ad Fundum

16/04/2021 21:48:20
Quote Anchor link
Wat je nog moet doen is door de lijst van nodes van getElementsByTagName() gaan met een lus. En je moet de <ul> van het submenu insluiten in de <li> tag:
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
<!DOCTYPE html>
<html>
  <head>
    <script>
      window.addEventListener('DOMContentLoaded', function() {
        let button = document.createElement('button');
        button.innerHTML = '+';
        button.addEventListener('click', function() {
          let ul = this.parentNode.getElementsByTagName('ul')[0];
          ul.style.display = (ul.style.display == '') ? 'none' : '';
        });
        let list = document.getElementById('mobile-nav')
          .getElementsByClassName('menu-item-has-children');
        for (let index = 0; index < list.length; index++) {
          let li = list[index];
          let ul = li.parentNode.getElementsByTagName('ul')[0];
          li.insertBefore(button, ul);
        }
      });
    </script>
  </head>
  <body>
    <ul id="mobile-nav">
      <li>Item 1</li>
      <li class="menu-item-has-children">Item 2
        <ul>
          <li>Subitem 1</li>
          <li>Subitem 2</li>
        </ul>
      </li>
      <li>Item 3</li>
    </ul>
  </body>
</html>
Gewijzigd op 16/04/2021 21:52:42 door Ad Fundum
 
Guido  -

Guido -

17/04/2021 00:09:05
Quote Anchor link
Insluiten van submenu in de li is een domme fout van me. Had ik moeten weten.
Bedankt voor dit werkende voorbeeld, ik had niet verwacht dat er nog zo veel extra code benodigd is om dit voor elkaar te krijgen.

Guido
 
Ad Fundum

Ad Fundum

17/04/2021 10:59:58
Quote Anchor link
Als je liever geen gebruik maakt van JavaScript, dan kan je ook menu's maken met alleen HTML en CSS.
Iemand die daar al jarenlang mee bezig is, heeft allerlei voorbeelden op z'n site die je zo kan overnemen.
Zie http://www.cssplay.co.uk/menus
 
Guido  -

Guido -

17/04/2021 11:06:59
Quote Anchor link
Hoi,

Ik merk nu wel dat de "toggle" alleen wordt toegevoegd aan 1 item met subpagina's.

Guido

Toevoeging op 17/04/2021 11:08:01:

Ad Fundum op 17/04/2021 10:59:58:
Als je liever geen gebruik maakt van JavaScript, dan kan je ook menu's maken met alleen HTML en CSS.


Dank, ga ik ook even naar kijken.. CSS is meer mijn ding ;-)
 
Guido  -

Guido -

19/04/2021 16:14:46
Quote Anchor link
Hoi opnieuw,

Ik heb na veel werk en met het voorbeeld hierboven een werkend script gemaakt:

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
<script>
// Verberg submenu
window.addEventListener('DOMContentLoaded', function() {
    var div = document.getElementById("mobile-nav");
    var sub = div.getElementsByClassName("sub-menu");
    for (let i = 0; i < sub.length; ++i) {
        sub[i].style.display = "none";
    }
});

// Voeg klik button toe en toon submenu
window.addEventListener('DOMContentLoaded', function() {
    var x = document.getElementById("mobile-nav").querySelectorAll('.menu-item-has-children > a');
    for( let index = 0; index < x.length; index++ ) {
        var button = document.createElement('button'); button.className = 'subnav-toggle'; button.innerHTML = '+';
        x[index].parentNode.insertBefore(button, x[index].nextSibling);  
        button.addEventListener('click', function() {
            var ul = this.parentNode.getElementsByTagName('ul')[0];
            ul.style.display = (ul.style.display == 'block') ? 'none' : 'block';
        });    
    };
});    
</script>

<div id="mobile-nav">
    <ul>
        <li>Item 1</li>
        <li class="menu-item-has-children"><a>Item 2</a>
            <ul class="sub-menu">
                <li><a>Subitem 1</a></li>
                <li><a>Subitem 2</a></li>
            </ul>
        </li>
        <li><a>Item 3</a></li>
        <li class="menu-item-has-children"><a>Item 4</a>
            <ul class="sub-menu">
                <li><a>Subitem 3</a></li>
                <li><a>Subitem 4</a></li>
            </ul>
        </li>
    </ul>
</div>


Zou je die eens kunnen nakijken op fouten en verbeteringen, want ben nog een echte leek ;-)

Guido
Gewijzigd op 19/04/2021 21:32:23 door Guido -
 
Ad Fundum

Ad Fundum

20/04/2021 09:59:04
Quote Anchor link
Als het werkt is het goed toch?

Er zijn een paar dingetjes:
- JavaScript kan met CSS werken, en die eerste functie kan in 1 regel CSS
- Verder gebruik ik bij voorkeur let boven var, vanwege de variabele scope
- Als laatste zou ik de namen van variabelen zinvolle namen geven, dus liever "list" in plaats van "x"

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<style>
  .menu-item-has-children > .sub-menu {display: none;}  /* Verberg submenu */
</style>
Gewijzigd op 20/04/2021 10:00:14 door Ad Fundum
 
Guido  -

Guido -

20/04/2021 13:36:18
Quote Anchor link
Hoi,

Bedankt voor je reactie.

1) Ik weet dat ik het kan verbergen met CSS (ga ik ook doen, als fall-back), maar ik wou alles ook via JS regelen. Of is dat geen best-practice?

2) Ik begreep dat let alleen binnen de betreffende loop werkt. In mijn 2 functies wordt de var/let niet opnieuw aangeroepen buiten de loop, dus betekent dit dat ik alle var door let kan vervangen?

Guido
 



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.