Güzel bir menü örneği

[Dj_LkR]

<style>

#tablist{
padding: 3px 0;
margin-left: 0;
margin-bottom: 0;
margin-top: 0.1em;
font: bold 12px Verdana;
}

#tablist li{
list-style: none;
display: inline;
margin: 0;
}

#tablist li a{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: white;
}

#tablist li a:link, #tablist li a:visited{
color: navy;
}

#tablist li a.current{
background: lightyellow;
}

#tabcontentcontainer{
width: 400px;
padding: 5px;
border: 1px solid black;
}

.tabcontent{
display:none;
}

</style>







<script>

//[which tab (1=first tab), ID of tab content to display]:
var initialtab=[1, "sc1"]


function cascadedstyle(el, cssproperty, csspropertyNS){
if (el.currentStyle)
return el.currentStyle[cssproperty]
else if (window.getComputedStyle){
var elstyle=window.getComputedStyle(el, "")
return elstyle.getPropertyValue(csspropertyNS)
}
}

var previoustab=""

function expandcontent(cid, aobject){
if (document.getElementById){
highlighttab(aobject)
detectSourceindex(aobject)
if (previoustab!="")
document.getElementById(previoustab).style.display ="none"
document.getElementById(cid).style.display="block"
previoustab=cid
if (aobject.blur)
aobject.blur()
return false
}
else
return true
}

function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
collecttablinks()
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].style.backgroundColor=initTabcolor
var themecolor=aobject.getAttribute("theme")? aobject.getAttribute("theme") : initTabpostcolor
aobject.style.backgroundColor=document.getElementB yId("tabcontentcontainer").style.backgroundColor=t hemecolor
}

function collecttablinks(){
var tabobj=document.getElementById("tablist")
tabobjlinks=tabobj.getElementsByTagName("A")
}

function detectSourceindex(aobject){
for (i=0; i<tabobjlinks.length; i++){
if (aobject==tabobjlinks[i]){
tabsourceindex=i //s
break
}
}
}

function do_onload(){
var cookiecheck=window.get_cookie && get_cookie(window.location.pathname).indexOf("|")! =-1
collecttablinks()
initTabcolor=cascadedstyle(tabobjlinks[1], "backgroundColor", "background-color")
initTabpostcolor=cascadedstyle(tabobjlinks[0], "backgroundColor", "background-color")
if (typeof enablepersistence!="undefined" && enablepersistence && cookiecheck){
var cookieparse=get_cookie(window.location.pathname).s plit("|")
var whichtab=cookieparse[0]
var tabcontentid=cookieparse[1]
expandcontent(tabcontentid, tabobjlinks[whichtab])
}
else
expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])
}

if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload


</script>


<ul id="tablist">
<li><a href="#" class="current"><font size="2" face="Verdana">Link
1</font></a></li>
<li><a href="#" theme="#EAEAFF"><font size="2" face="Verdana">Link
2</font></a></li>
<li><a href="#" theme="#FFE6E6"><font size="2" face="Verdana">Link
3</font></a></li>
<li><a href="#" theme="#DFFFDF"><font size="2" face="Verdana">Link
4</font></a></li>
<li><a href="#" theme="#FFCC66"><font size="2" face="Verdana">Link
5</font></a></li>
</ul>

<DIV id="tabcontentcontainer">

<div id="sc1" class="tabcontent">
<font size="2" face="Verdana">Hier komt de info van <a href="http://mtrack.nl/?ref=leejoo" target="_blank">link
1</a>.<br>
</font>
</div>

<div id="sc2" class="tabcontent">
<font size="2" face="Verdana">Dit komt er bij <a href="http://www.onestat.com" target="_blank">link
2</a> te staan</font>
</div>

<div id="sc3" class="tabcontent">
<font size="2" face="Verdana">Wat er bij <a href="http://mtrack.nl/?ref=leejoo" target="_blank">link
3</a> hoort komt hier</font>
</div>

<div id="sc4" class="tabcontent">
<font size="2" face="Verdana">Bij de <a href="http://www.onestat.com" target="_blank">link
4</a> komt dan dit te staan</font>
</div>

<div id="sc5" class="tabcontent">
<font size="2" face="Verdana">Als laatste <a href="http://mtrack.nl/?ref=leejoo" target="_blank">link
5</a> en zijn beschrijving</font>
</div>


</DIV>