Hi Tweakers,
Voor mijn website ben ik een horizontaal submenu aan het maken waarbij de breedte afhankelijk is van de child pagina's. Bij het eerste submenu werkt dit perfect, de breedte komt precies uit. Bij het tweede submenu wordt de breedte genoeg waardoor het laatste item naar beneden wordt gepushed.
Voorbeeld van goede submenu
Voorbeeld van verkeerde submenu

Via jQuery verander ik de breedte als volgt:
De HTML van structuur ziet er als volgt uit (Wordpress based):
Iemand enig idee waar ik een fout maak, of wat een mogelijke oplossing kan zijn?
Bij voorbaat dank!
Voor mijn website ben ik een horizontaal submenu aan het maken waarbij de breedte afhankelijk is van de child pagina's. Bij het eerste submenu werkt dit perfect, de breedte komt precies uit. Bij het tweede submenu wordt de breedte genoeg waardoor het laatste item naar beneden wordt gepushed.
Voorbeeld van goede submenu

Voorbeeld van verkeerde submenu

Via jQuery verander ik de breedte als volgt:
JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
| $('nav.primary').find('ul.sub-menu').each( function() { var width = 0; $(this).find('li').each( function() { width += $(this).outerWidth(); }); $(this).css({ 'width': width + 'px' }); $(this).hide(); }); |
De HTML van structuur ziet er als volgt uit (Wordpress based):
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <li> <a href="/oplossingen/"> Oplossingen<span class="fo icons-angle-down"></span> </a> <ul class="sub-menu"> <li> <a href="/oplossingen/mvo-adviesdiensten/"> MVO Adviesdiensten </a> </li> <li> <a href="/oplossingen/co2-prestatieladder-advies/"> CO2-Prestatieladder Advies </a> </li> </ul> </li> |
Iemand enig idee waar ik een fout maak, of wat een mogelijke oplossing kan zijn?
Bij voorbaat dank!