(CSS/JS) Breedte horizontaal submenu

[Ronnyrr]

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:

JavaScript:

$('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:

<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!

[Spinal]

Kun je een testcase online zetten?

Offtopic: Do not use jQuery's hide() method. Ever.

[Glodenox]

Mijn vermoeden gaat momenteel uit van problemen met padding en margin die ervoor zorgt dat je bij 2 elementen een pixel tekort komt, maar bij 3 elementen goed zit. Op de afbeelding met 3 menu-items merk ik op dat het middelste element aan de linker-kant 15px aan padding heeft, terwijl de anderen 16px hebben, maar dat kan ook gewoon aan het karakter C liggen in dat lettertype.

Dus wat Spinal ook zei: gelieve een testcase online te zetten óf ten minste de CSS die van toepassing is op die elementen ook beschikbaar te maken. Je zou verwachten dat jQuery de breedte goed berekent, maar soms kan het toch nog fouten maken bij bepaalde combinaties van CSS.

[Voor 27% gewijzigd door Glodenox op 15-05-2015 13:19]

[Ronnyrr]

@Spinal,
Bedankt voor de tip, wist dit niet heb het gelijk aangepast!

@Glodenox
Thanks, maar er veranderd naast de achtergrond kleur niks met even/oneven items. Dit zou dus altijd gelijk moeten zijn..

Heb maken van een Fiddle o.i.d. van een dergelijke situatie is lastig, daarom bij deze een link naar het online voorbeeld.

[Spinal]

Het gaat hier in Opera 30, Chrome 42/44, Firefox 37/38, IE 11, Vivaldi gewoon goed. Totdat ik er op klik, dan opeens niet meer. Als ik vervolgens de pagina vernieuw dan werkt het wél weer...
In Firefox 39 gaat het niet nooit goed, ook niet bij 3 items.

Dev console geeft aan 143,387px (1e item) en 185,738px (2e item), en 329px berekende breedte voor het submenu. Misschien is het een afrondingsverschil en is het zo simpel als (width + 1) te doen?

[Ronnyrr]

Ik bekijk het zelf met Chrome 42 waarbij het altijd goed is wanneer het 3 items zijn en altijd fout bij 2 items.

JavaScript:

$(this).css({
   'width': width+1 + 'px'
});

Zodra ik bovenstaand altijd doorvoer komen er onderstaande slordigheden uit.



Iemand enig idee of er ook een alternatieve manier is met een absoluut gepositioneerd submenu zoals ik dit geval?

[Voor 9% gewijzigd door Ronnyrr op 15-05-2015 15:38]

[R4gnax]

Ronnyrr schreef op vrijdag 15 mei 2015 @ 15:37:
IIemand enig idee of er ook een alternatieve manier is met een absoluut gepositioneerd submenu zoals ik dit geval?

Gebruik je floats om die elementen naast elkaar uit te lijnen?

Gebruik dan eens inline-block elementen en een white-space: nowrap om te forceren dat alles op één lijn blijft. Geen gezeik meer met afrondingsfouten. Witruimte tussen elementen kun je wegpoetsen op diverse manieren. Even naar googlen; is goed terug te vinden.