navigatiebar

[tommich]

Ik gebruik onderstaande code om een eenvoudige horizontale navigatiebar te maken in html5/css3.Dit lukt
perfect wanneer de pagina normale afmetingen heeft,maar bij het verkleinen vh browservenster komen de links onder elkaar te staan ipv naast elkaar.Ik zou dit willen vermijden door bij overflow een scrollbar te laten verschijnen (overflow-x:auto)maar dit lukt niet.Iemand een idee?

html:
<nav><a href="#">Text</a> <a href="#">Text</a> <a href="#">Text</a> <a href="#">Text</a>
</nav>

css:

nav   {height:30px;
      
       background-color:Red;
       margin-left:10px;
       margin-right:30%;
       
       display: -webkit-box;
       -webkit-box-orient:horizontal;
       text-align:center;
       overflow-x:auto;}

 

[csshunter]

Hoi tommich,
Ja, de links in de <nav> zijn inline elementen, en die duiken naar de volgende regel als de horizontale regel te klein is om ze allemaal naast elkaar te zetten.
Maar als je een min-width voor de <nav> opgeeft waarin ze naast elkaar komen te staan (niet in px, maar in em's: zich aanpassend aan het letterformaat), dan moeten ze wel, ook al is de breedte te klein. Daarna kan de overflow gaan werken als de window-breedte te krap is.

Aan de andere kant: om voor zoiets essentieels als een menu een scrollbar in te zetten, is niet erg gebruiksvriendelijk.
Ik vermoed dat een aantal bezoekers die moeite niet neemt en dus niet al het moois van het menu ziet (o.a. de Contact/Bereikbaarheid-pagina, die doorgaans achteraan in het menu staat). Dat kan klanten kosten!

• Ik zou liever het ontwerp zó maken, dat de menu-items er zo nodig wel onder passen, en dat dan de rest van de content wat naar beneden opschuift. Ook met een gecentreerd menu kan dat (zie bv. hier).

Met vriendelijke groet,
CSShunter

 

[tommich]

Hallo,

inderdaad: een scrollbar op een navigatiemenu is geen ideale keuze,ik zal mijn <nav> hoog genoeg maken,zodat ze perfect onder kunnen schuiven.

Bedankt om me ah denken te zetten