KOMPOOS.NL

css menu

home » css » css-menu.html

sitemap


voorbeeld css menu

uitleg van dit css menu

Er staan heel wat menu's op de kompoos.nl. Dit is een variant op dit horizontale en dit verticale menu (klik op de links om ze te bekijken). De html-code hieronder is een opzetje om jouw eigen menu "in elkaar te zetten". Je kan zo diep "nesten" als je wilt. Gewoon weer een ul in een li-tag plaatsen, en er is weer een sub-level aangemaakt...

De stylesheet is volkomen valide "W3C-code" en de html is volkomen valide "html5". Alles zou ultiem perfect zijn geweest als ook een paar gammele (oude) IE-versies de code foutloos konden uitvoeren. Niet dus... Maar het begint steeds duidelijker te worden dat de website-bouwers niet meer de hobby van een paar nostalgische web-guru's blijven supporten. Het overgrote deel van alle procedures op de kompoos.nl zijn in álle browsers te gebruiken. Die compabiliteit gaan we echt niet verwijderen; maar als er nieuwe procedures worden gemaakt dan wordt dat gedaan met het oogmerk van -

  1. scheiding van opmaak en inhoud
  2. liever geen hacks
  3. volkomen valide html(5)-code
  4. cross browser (ALLE moderne browsers)
  5. minimale browser-belasting
  6. ultra-high performance

Daar hoort het verminken van de code, om het een paar dwarsliggers naar de zin te maken, echt niet meer bij...
Wij zijn al dicht in de buurt om op een (ultra-snelle) breedbandverbinding, pagina's te laten laden én te parsen binnen 0.03 seconde. Het behoeft geen betoog dat 99.9% van de bezoekers liever een webpagina bezoekt die er sneller staat dan een file die locaal op zijn pc/laptop ingeladen wordt, dan een stroop-trage pagina die (wel) dan compatible is met browsers die Napoleon en tsaar Peter de Grote nog gebruikt hebben (mits de computer toen al uitgevonden zou zijn).

Mocht je het er mee eens zijn, en wil je de procedure (aan jouw website aangepast natuurlijk) gebruiken, plaats dan de html-code in de body-sectie, en de stylesheet in de head-sectie van de pagina.

stylesheet css menu


<style type="text/css">
        #css-menu,#css-menu ul{
                padding:0;
                margin:0;
                list-style-type:none}
        #css-menu{
                margin:25px 0 100px 10px;
                position:relative;
                z-index:2}
        #css-menu li{
                float:left;
                position:relative}
        #css-menu a,#css-menu a:visited{
                font-weight:bold;
                display:block;
                width:120px;
                color:#efefef;
                height:25px;
                line-height:24px;
                text-decoration:none;
                text-indent:5px;
                background:#6E5463;
                border:solid #bfbfbf;
                border-width:0 1px 1px 0}
        #css-menu li:hover > a{
                background:#985963;;
                color:#fff}
        #css-menu li ul{
                display:none}
        #css-menu li:hover > ul{
                display:block;
                position:absolute;
                top:0;
                left:121px;}
        #css-menu > li:hover > ul{
                left:0;
                top:25px}
</style>

htmlcode voor het css-menu


<ul id="css-menu">
        <li>
                <a href="/css/css-menu.html">css menu</a>
        </li>
        <li>
                <a href="/css/css-menu.html">html menu</a>
                <ul>
                        <li>
                                <a href="/css/css-menu.html">horizontaal</a>
                        </li>
                        <li>
                                <a href="/css/css-menu.html">verticaal</a>
                        
                        </li>
                        <li>
                                <a href="/css/css-menu.html">css</a>
                                <ul>
                                        <li>
                                                <a href="/css/css-menu.html">colofon</a>
                                        </li>
                                        <li>
                                                <a href="/css/css-menu.html">info</a>
                                        </li>
                                </ul>
                        </li>
                        <li>
                                <a href="/css/css-menu.html">stylesheet</a>
                        </li>
                        <li>
                                <a href="/css/css-menu.html">flyout menu</a>
                        </li>
                </ul>
        </li>
        <li>
                <a href="/css/css-menu.html">valide code</a>
        </li>
        <li>
                <a href="/css/css-menu.html">super snel</a>
        </li>
        <li>
                <a href="/css/css-menu.html">top menu</a>
        </li>
</ul>
Gebruik voor alle voorbeelden op de http://kompoos.nl een valide html5 pagina.