KOMPOOS.NL

docking menu CSS

home » css » image-effects » dock-menu.html

sitemap

voorbeeld docking menu

uitleg dock menu procedure

Het voorbeeld laat niets te wensen over. Als je deze, cross browser, procedure op jouw web-ruimte wilt hebben, moet je de stylesheet in de head-sectie van jouw pagina plaatsen, en de html code in de body-sectie van jouw pagina.

html code dock menu

<div class="dock-menu">
  <ol>
    <li><a href="http://kompoos.nl/css/image-effects/dock-menu.html" ><img alt="docking image" height="71" width="70" src="dock.gif" /><span>een</span></a></li>
    <li><a href="http://kompoos.nl/css/image-effects/dock-menu.html" ><img alt="docking image" height="71" width="70" src="dock.gif" /><span>voorbeeld</span></a></li>
    <li><a href="http://kompoos.nl/css/image-effects/dock-menu.html" ><img alt="docking image" height="71" width="70" src="dock.gif" /><span>van</span></a></li>
    <li><a href="http://kompoos.nl/css/image-effects/dock-menu.html" ><img alt="docking image" height="71" width="70" src="dock.gif" /><span>een</span></a></li>
    <li><a href="http://kompoos.nl/css/image-effects/dock-menu.html" ><img alt="docking image" height="71" width="70" src="dock.gif" /><span>css</span></a></li>
    <li><a href="http://kompoos.nl/css/image-effects/dock-menu.html" ><img alt="docking image" height="71" width="70" src="dock.gif" /><span>dock</span></a></li>
    <li><a href="http://kompoos.nl/css/image-effects/dock-menu.html" ><img alt="docking image" height="71" width="70" src="dock.gif" /><span>menu</span></a></li>
  </ol>
</div>

stylesheet docking menu

<style type="text/css">
    a:hover{background-position:0 0;}
    .dock-menu{position:absolute;}
    .dock-menu ol li{float:left;list-style-type:none;}
    .dock-menu ol li a{text-decoration:none;}
    .dock-menu ol li a img{border:none;}
    .dock-menu ol li a span{display:none;color:#ddd;background:inherit;}
    .dock-menu ol li:hover a span{display:block;font-size:12px;text-align:center;color:#fff;background:#000;}
    .dock-menu ol li:hover a img{margin-top:10px;}
    .dock-menu ol li:hover + li a img{margin-top:20px;}
    .dock-menu ol li:hover + li + li a img{margin-top:30px;}
    .dock-menu ol li:hover + li + li + li a img{margin-top:20px;}
    .dock-menu ol li:hover + li + li + li + li a img{margin-top:10px;}
    .spacer{height:100px;clear:both}
</style>

Gebruik voor alle voorbeelden op de http://kompoos.nl een valide html5 pagina.