Gezocht : horizontaal navigatie

Als je googled op: horizontal menu css , of menu css kom je heel veel tegen in allen vormen en maten.

Grootste nadeel aan tabellen, het is niet gemaakt voor layout en kan dus minder dan css. Css heeft ook een snellere response tijd dan tabellen.

Ik kies daarom voor css de hoeveelheid functies die erbij zitten, snelheid, overzichtelijkheid en makkelijk aanpassen.

Je kunt wel voor tabellen nemen, maar persoonlijk doe ik aan css.

Groeten,
Christian Bolster

En een ander groot voordeel is dat je een hogere rating krijgt bij google

Eigenlijk zocht ik tog meer zo'n uiklapmenu...

@CB2thePHP: Nee, je doet aan div's ;-) niet aan CSS. Aan CSS doen de meeste toch al automatisch. ;-)

Arendjan die van mijn kan ook een uitklapmenu worden. Zal daar vanavond ff de code van pakken, maar nu niet moet straks nog werken.

Heej Arendjan,
Op deze site kan je denk ik genoeg vinden:
http://www.pixel2life.com/tutorials/CSS_Stylesheets/All/

Hier de html code ervoor met het andere erbij. (Dit keer is ervoor IE een hack nodig dus er zit iets javascript bij). De <br /> tags moet je houden anders wordt het een rotzooitje.

<div id="menu">
<li><a class="menu" href="inleiding.php">Inleiding</a></li>
<li onmouseover="this.className='msieFix'" onmouseout="this.className=''" ><a class="menu" href="#">HSK</a>
<br />
<br />
<ul>
<li><a href="hsk.php">HSK</a></li>
<li><a href="hsk-kwaliteiten.php">Kwaliteiten</a></li>
<li><a href="hsk-overprikkelt.php">Overprikkelt</a></li>
</ul>
</li>
</div>

Hier heb je dan de css van deze en de eerste bij deze topic:

#menu ul
{
list-style: none;
padding: 0;
margin: 0;
}

#menu li
{
float: left;
}

#menu li a.menu
{
background-color: #ff0;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
border: 0.1em solid #000;
color: #000;
text-decoration: none;
text-align: center;
}

li ul
{
display: none;
}

li:hover ul, li.msieFix ul
{
display: block;
position:absolute;
width: 8em;
background-color: #ff0;
color : #000;
}

Groeten,
Christian Bolster

CB2thephp schreef op 16.03.2006 08:47

Ja dat is het zeker, want css is zeer simpel

Nou, simpel... Het loont de moeite om je er in te verdiepen omdat het eleganter is en omdat je site beter te onderhouden wordt. Voor een beginner kan ik me voorstellen dat het moeilijk is.

edit: @CB2thephp: als je je CSS voorbeelden tussen [.code.] en [./code.] zet, blijft je indenting intact. De puntjes in mijn voorbeeld moeten wel weg.

Ik ben een beetje gewend aan het oude systeem.

Bedankt Jan