Wie wil er een navigatiemenu dat gemakkelijk aan te passen is?
admon |
2004-11-30 |
Programmeren en techniek
Als webmaster wil je vaak code toepassen die gemakkelijk te begrijpen en te onderhouden is. Met behulp van de onderstaande code gaan we een navigatiemenu implementeren dat niet zo moeilijk opgebouwd is, zodat iedereen die naar eigen smaak kan aanpassen.
Het belangrijkste vind ik altijd dat je je code eerst moet kunnen begrijpen, zodat je niet voor verrassingen komt te staan als je iets wilt gaan wijzigen. Bij het script dat we gebruiken is het aanpassen dan ook goed te doen.
Met behulp van javascripting gaan we een navigatiemenu maken, dat gemakkelijk aanpasbaar is.
Selecteer en kopieer (CTRL-C) onderstaande code en plaats deze tussen de <head> en de </head> tags van je HTML document.
Klik hier voor meer uitleg over hoe je onderstaande code op je website kunt plaatsen.
<style>
body{font-family:arial;}
table{background:black;
position:absolute}
a{color:black;text-decoration:none;
font:bold}
a:hover{color:#ccffff}
td.menu{background:#d7d7d7}
table.topnav{font-size:70%;top:-2;left:0}
table.menu{font-size:100%;bottom:0;z-index:-1}
</style>
<script
type="text/javascript">
var i=0;
var intHide, intShow;
function
show(){
if
(i>-73){
i=i-1;
document.all("menu").style.bottom=i;}
}
function
showmenu(){clearInterval(intHide);
intShow =
setInterval("show()",1);}
function hide(){ if
(i<0){i=i+1;
document.all("menu").style.bottom=i;}
}
function
hidemenu(){
clearInterval(intShow);
intHide =
setInterval("hide()",1);}
</script>
Selecteer en kopieer (CTRL-C) onderstaande code en plaats deze tussen de <body>en de tags </body> van je HTML document.
Klik hier voor meer uitleg over hoe je onderstaande code op je web pagina kunt plaatsen.
<table class="topnav" width="150">
<tr
bgcolor="#ccffff">
<td onmouseover="showmenu()"
onmouseout="hidemenu()"><b>MENU</b><br>
<table
class="menu" id="menu" width="100%">
<tr><td
class="menu"><a href="http://www.alphamegahosting.com"
target=_blank>Alphamegahosting</a></td></tr>
<tr><td
class="menu"><a href="http://www.picturetopainting.nl"
target=_blank>Picturetopainting</a></td></tr>
<tr><td
class="menu"><a href="http://www.paardentips.com"
target=_blank>Paardentips</a></td></tr>
<tr><td
class="menu"><a href="http://www.alphamegahosting.com"
target=_blank>Alphamegahosting</a></td></tr>
</table>
</td>
</tr>
</table>
Veel succes!
