Nun, gut, ich dachte eigentlich einfach nur, ich könnte euch mal' fragen, vielleicht habt ihr ein paar persöhnliche Tipps. Ein solcher Formator per Java wäre auch nicht schlecht gewesen.Script -Container:
Code:
<script type="text/javascript"><!--
function kat1(objKat){
var objFirst = document.getElementById("navigation").getElementsByTagName("li")[0];
var objKat = objKat.parentNode;
// Alle Menuepunkte der obersten Navigationsebene durchlaufen
while(objFirst){
// Falls es sich um ein LI-Tag handelt, nichtt aber um die aktive Kategorie
if((objFirst.nodeName.toLowerCase()=="li") && (objFirst!=objKat)){
objFirst.getElementsByTagName("ul")[0].className = "toggleOff";
}
// Nächstes Element auf gleicher Ebene holen
objFirst = objFirst.nextSibling;
}
// Aktives Element anhand des aktuellen Zustandes ein- bzw. ausblenden
with(objKat.getElementsByTagName("ul")[0])
className = (className=="toggleOn")?"toggleOff":"toggleOn";
}
//--></script>
Sollte das Problem so nicht zu finden sein, das ganze Dokument:
HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <title> Ferienendversion: 25.02.07 - Version 0.2.3.1 - Schema 2</title>
<meta name="author" content="Erik T." >
<meta name="fileversion" content="0.2.3.1" >
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" >
<meta http-equiv="content-script-type" content="text/javascript" >
<meta http-equiv="content-language" content="de" >
<style type="text/css" >
.untergrnormal, .normaleinfach, .gruppenormal {
background-color:#55C;
color: #fff;
font: bold 0.94em sans-serif;
text-decoration: none;
display:block;
padding: 3px 10px;
border: 1px solid #05b;
margin: 0;
width: 165px;
-moz-border-radius:5px;
/* border-radius:5px; */
}
.normaleinfach {
background-color:#65C;
}
.untergrnormal {
background-color:#5252B5;
/* background: #ccc; */
}
.untergruppeaus {
display:none;
}
/* Klassen zum Ein- bzw. Ausblenden der Unterkategorien */
.toggleOff{ display: none; }
.toggleOn{ display: block; }
#navigation LI {
background-color: transparent;
padding: 0;
margin: 0;
list-style: none;
width: 165px;
}
#navigation UL {
background-color: transparent;
padding: 0;
margin: 0;
}
#navigation A:link, #navigation A:visited {
border: 1px solid #333399;
}
#navigation A:hover, #navigation A:focus {
border: 1px solid #c7c88d;
}
#maincontent {
background-color: #e3e0c6;
padding: 1em;
border-left: 1px solid #002c88;
margin: 0 0 0 210px;
color: #000;
position: absolute;
top: 0px;
left: 0px;
}
</style>
<script type="text/javascript" > <!--
function kat1(objKat){
var objFirst = document.getElementById("navigation").getElementsByTagName("li")[0];
var objKat = objKat.parentNode;
// Alle Menuepunkte der obersten Navigationsebene durchlaufen
while(objFirst){
// Falls es sich um ein LI-Tag handelt, nichtt aber um die aktive Kategorie
if((objFirst.nodeName.toLowerCase()=="li") && (objFirst!=objKat)){
objFirst.getElementsByTagName("ul")[0].className = "toggleOff";
}
// Nächstes Element auf gleicher Ebene holen
objFirst = objFirst.nextSibling;
}
// Aktives Element anhand des aktuellen Zustandes ein- bzw. ausblenden
with(objKat.getElementsByTagName("ul")[0])
className = (className=="toggleOn")?"toggleOff":"toggleOn";
}
//--> </script>
</head> <body lang="de" style="color:#000;background-color:#339;" >
<noscript> </noscript> <noscript>
<p> Diese Seite benötigt JavaScript. Ihr Broswer interpretiert anscheinend aber kein JavaScript, oder sie haben die Interpretation abgeschaltet. <br>
Um den vollen Komfort dieser Website zu nutzen sollten sie dies wieder aktivieren, oder einen JavaScript-fähigen Broswer wie z.B. den kostenlosen <a href="http://www.mozilla-europe.org/de/" title="Zur Website des Mozilla Firefox gehen" > Mozilla Firefox</a> zulegen.<br>
</p> <p> Falls ihnen das alles nicht zusagt, können sie auch unsere <a href="#" > Version ohne JavaScript</a> ansehen (NOCH IM BAU).
</p> <p> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> </p>
</noscript>
<div style="width:210px; position: absolute; top: 7px; left: 7px;" >
<ul id="navigation" style="padding:0; margin:0;" >
<li> <a title="Kategorie 1" class="gruppenormal" id="gruppe1" onclick="kat1(this)" href="#" > Kategorie 1</a>
<ul class="toggleOff" >
<li> <a title="Unterkategorie 1-1" class="untergrnormal" id="gruppe1a_0" href="#" > </a> </li>
<li> <a title="Unterkategorie 1-2" class="untergrnormal" id="gruppe1b_0" href="#" > </a> </li>
<li> <a title="Unterkategorie 1-3" class="untergrnormal" id="gruppe1c_0" href="#" > </a> </li>
<li> <a title="Unterkategorie 1-4" class="untergrnormal" id="gruppe1d_0" href="#" > </a> </li>
<li style="visibility:hidden;" title="Platzhalter" > </li>
</ul>
</li>
<li> <a title="Kategorie 1" class="gruppenormal" id="gruppe2" onclick="kat1(this)" href="#" > Kategorie 2</a>
<ul class="toggleOff" >
<li> <a title="Unterkategorie 1-1" class="untergrnormal" id="gruppe1a_1" href="#" > </a> </li>
<li> <a title="Unterkategorie 1-2" class="untergrnormal" id="gruppe1b_1" href="#" > </a> </li>
<li> <a title="Unterkategorie 1-3" class="untergrnormal" id="gruppe1c_1" href="#" > </a> </li>
<li> <a title="Unterkategorie 1-4" class="untergrnormal" id="gruppe1d_1" href="#" > </a> </li>
<li style="visibility:hidden;" title="Platzhalter" > </li>
</ul>
</li>
<li> <a title="Kategorie 1" class="gruppenormal" id="gruppe3" onclick="kat1(this)" href="#" > Kategorie 3</a>
<ul class="toggleOff" >
<li> <a title="Unterkategorie 1-1" class="untergrnormal" id="gruppe1a_2" href="#" > </a> </li>
<li> <a title="Unterkategorie 1-2" class="untergrnormal" id="gruppe1b_2" href="#" > </a> </li>
<li> <a title="Unterkategorie 1-3" class="untergrnormal" id="gruppe1c_2" href="#" > </a> </li>
<li> <a title="Unterkategorie 1-4" class="untergrnormal" id="gruppe1d_2" href="#" > </a> </li>
<li style="visibility:hidden;" title="Platzhalter" > </li>
</ul>
</li>
</ul>
</div>
<div id="maincontent" >
<p> Version 0.2.<b> 3</b> ! - Aktuell seit 25.02.07 - 20:31 <b> Achtung:</b> Benötigt JavaScript, NOSCRIPT Container vorhanden.<br>
<!-- TEXT --> </p> </div>
</body> </html> Danke!
