nicht angemeldet
Om nah hoo pez nyeetz, Johann Friedrich Lessing!
Äh, wünsche Dir auch den Segen des Tages? :-)
Eine Navigation sollte grundsätzlich ohne JavaScript funktionieren und auch Nutzer ohne JavaScript nicht verwirren.
Leider werde ich aus deiner Beschreibung nicht so richtig schlau, kannst du ein Beispiel online stellen? Es ist sicher nicht notwendig, viermal dieselbe Navigation zu haben.
Ja, ist alles etwas kompliziert ... Es geht _nur_ um die Navigation der vier Ebenen, die per Javascript eingeblendet werden (ohne JS -> keine Ebene mit JS-Navigation). Das Problem sind alte Browser mit JS, aber ohne CSS, bei denen ich eine statisch erzeugte JS-Navigation nicht ausblenden kann. Deshalb mein Ansatz, die Navigation der vier einzublendenden Ebenen (info1 bis info4) dynamisch mit Javascript zu generieren. Und viermal brauche ich es wg. des Designs und der sich ändernden Links ...
Leider habe ich momentan keine Möglichkeit, etwas hochzuladen, deshalb anbei der Gesamtcode (es ist nur eine Test-Seite, Ungenauigkeiten bitte entschuldigen; der Code ist etwas anders als der zunächst gepostete, das Prinzip aber dasselbe). Ggf. bitte einfach alles in eine Datei kopieren und lokal angucken.
Lieben Gruß!
JFL
hier der Code:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8">
<style type="text/css">
body, div {
margin:0;
padding:0;
border:0
}
body {
width:auto;
background-color:#999;
padding:5%;
}
div {
width:60%;
height:300px;
padding:5%;
}
#info0 {
background-color:#fff;
position:absolute;
top:0;
left:0;
}
#info1 {
background-color:#f33;
position:absolute;
top:0;
left:0;
}
#info2 {
background-color:#f66;
position:absolute;
top:0;
left:0;
}
#info3 {
background-color:#f99;
position:absolute;
top:0;
left:0;
}
#info4 {
background-color:#fcc;
position:absolute;
top:0;
left:0;
}
.an {
opacity:1;
transition:opacity 0.5s ease 0.2s;
z-index:2;
}
.aus {
opacity:0;
transition:opacity 0.5s ease 0.2s;
z-index:1;
}
.an div, .aus div {
height:30px;
width:auto;
margin:0;
padding:0;
border:0;
background-color:#0ff;
}
</style>
<script>
function toggle(id) {
var d = document.getElementById('quickInfo').getElementsByTagName('div');
var elem = document.getElementById(id);
for (var i = 0; i < d.length; i++) {
if (d[i].className == 'an' || d[i].className == 'aus') {
d[i].className = 'aus';
}
if (elem) {
elem.className = 'an';
}
}
}
</script>
</head>
<body>
<div id="quickInfo">
<div id="info0" class="an">
<div class="rot"><p>Absatz auf Ebene 0</p></div>
<p>Übersicht</p>
<p><a href="x.html" onclick="toggle('info1'); return false;">eins</a></p>
<p><a href="x.html" onclick="toggle('info2'); return false;">zwei</a></p>
<p><a href="x.html" onclick="toggle('info3'); return false;">drei</a></p>
<p><a href="x.html" onclick="toggle('info4'); return false;">vier</a></p>
</div>
<div id="info1" class="aus">
<div><p>Absatz auf Ebene 1</p></div>
<p><a href="#" onclick="toggle('info0'); return false;">zurück</a></p>
<p>eins</p>
<p><a href="#" onclick="toggle('info2'); return false;">zwei</a></p>
<p><a href="#" onclick="toggle('info3'); return false;">drei</a></p>
<p><a href="#" onclick="toggle('info4'); return false;">vier</a></p>
</div>
<div id="info2" class="aus">
<div><p>Absatz auf Ebene 2</p></div>
<p><a href="#" onclick="toggle('info0'); return false;">zurück</a></p>
<p><a href="#" onclick="toggle('info1'); return false;">eins</a></p>
<p>zwei</p>
<p><a href="#" onclick="toggle('info3'); return false;">drei</a></p>
<p><a href="#" onclick="toggle('info4'); return false;">vier</a></p>
</div>
<div id="info3" class="aus">
<div><p>Absatz auf Ebene 3</p></div>
<p><a href="#" onclick="toggle('info0'); return false;">zurück</a></p>
<p><a href="#" onclick="toggle('info1'); return false;">eins</a></p>
<p><a href="#" onclick="toggle('info2'); return false;">zwei</a></p>
<p>drei</p>
<p><a href="#" onclick="toggle('info4'); return false;">vier</a></p>
</div>
<div id="info4" class="aus">
<div><p>Absatz auf Ebene 4</p></div>
<p><a href="#" onclick="toggle('info0'); return false;">zurück</a></p>
<p><a href="#" onclick="toggle('info1'); return false;">eins</a></p>
<p><a href="#" onclick="toggle('info2'); return false; return false;">zwei</a></p>
<p><a href="#" onclick="toggle('info3'); return false;">drei</a></p>
<p>vier</p>
</div>
</div>
<div id="holunder">
<div><p>Dies ist ein Test!</p></div>
</div>
</body>
</html>
Matthias Apsel
Der Martin