|
Menü als Reiter - der alte Karteikasten
Autor: unbekannt
zur Demo
<script language="javascript" type="text/javascript">
function showDiv(divId) {
if ( divId != "" ) {
var re = new RegExp("^sub");
navi=divId.replace(re,"");
subnavi="sub"+navi;
document.getElementById(subnavi).style.visibility = "visible";
}
}
function hideDiv(divId) {
if ( divId != "" ) {
var re = new RegExp("^sub");
navi=divId.replace(re,"");
subnavi="sub"+navi;
document.getElementById(subnavi).style.visibility = "hidden";
}
}
</script>
<style type="text/css">
#reiterkopf { width:250px;font-size: 12px; position: relative; overflow:hidden; height:28px}
#reiterkopf h3 {font-size: 12px; margin: 0;}
#reiterkopf a { position: absolute;color:#449911;}
#reiterkopf a:focus { font-weight:bold;color:#449911;}
#reiterkopf a:active { font-weight:bold;color:#449911;}
#reiterkopf a:Link { font-weight:bold;color:#449911;}
#reiter0 { top: 5px; left: 0px; text-align:center;line-height:23px;display:inline; width:50px;height:23px;font-weight:bold;}
#reiter1 { top: 5px; left: 50px; text-align:center;line-height:23px;display:inline; width:50px;height:23px;font-weight:bold;}
#reiter2 { top: 5px; left: 100px; text-align:center;line-height:23px;display:inline; width:50px;height:23px;font-weight:bold;}
#reiter3 { top: 5px; left: 150px; text-align:center;line-height:23px;display:inline; width:50px;height:23px;font-weight:bold;}
#reiter4 { top: 5px; left: 200px; text-align:center;line-height:23px;display:inline; width:50px;height:23px;font-weight:bold;}
#linie { position:relative;top: 5px; left:514px;text-align:center;line-height:23px;height:23px;width:50px; float:left}
</style>
<script type="text/javascript">
<!--
reiter = new Array("reiter0","reiter1","reiter2","reiter3","reiter4");
content = new Array("Reiter01","Reiter02","Reiter03","Reiter04","Reiter05");
var aktiv = "";
function Bildwechsel(aktiv,nummer) {
for (var i=0; i < reiter.length; ++i){
var nodeObj = reiter[i];
var nodeHide = content[i];
document.getElementById(nodeObj).style.background = "url(../src/infos/" + reiter[i] + ".gif)";
document.getElementById(nodeHide).style.display = "none";
}
var nodeShow = content[nummer];
document.getElementById(aktiv).style.background = "url(../src/infos/" + reiter[nummer] + "_a.gif)";
document.getElementById(nodeShow).style.display = "inline";
}
//-->
</script>
<div class="dist8"></div>
<div id="reiterkopf">
<h3><a id="reiter0" href="javascript:Bildwechsel('reiter0',0)" onClick="this.blur();">Menu 1</a></h3>
<h3><a id="reiter1" href="javascript:Bildwechsel('reiter1',1)" onClick="this.blur();">Menu 2</a></h3>
<h3><a id="reiter2" href="javascript:Bildwechsel('reiter2',2)" onClick="this.blur();">Menu 3</a></h3>
<h3><a id="reiter3" href="javascript:Bildwechsel('reiter3',3)" onClick="this.blur();">Menu 4</a> </h3>
<h3><a id="reiter4" href="javascript:Bildwechsel('reiter4',4)" onClick="this.blur();">Menu 5</a></h3>
<div id="linie"></div>
</div>
<div style="padding:10px">
<div id="Reiter01" style="display: inline;" align="left">
Inhalt 1
</div>
<div id="Reiter02" style="display: none ;" align="left">
Inhalt 2
</div>
<div id="Reiter03" style="display: none ;" align="left">
Inhalt 3
</div>
<div id="Reiter04" style="display: none ;" align="left">
Inhalt 4
</div>
<div id="Reiter05" style="display: none ;" align="left">
Inhalt 5
</div>
</div>
|