nicht angemeldet
aufklappbares CSS Menü
Hallo zusammen!
Ich bin gerade dabei mir ein Menü aus CSS zu bauen.
Es soll ein vertikales Navigationsmenü in folgender Form werden:
Oberpunkt
- Unterpunkt 1
- Unterpunkt 2
- Unterpunkt 3
Bei Klick auf Unterpunkt 1 (bzw. 2 und 3) sollen sich weitere Punkte öffnen. Also:
Oberpunkt
- Unterpunkt 1
- Unterpunkt 1.1
- Unterpunkt 1.2
- Unterpunkt 1.3
- Unterpunkt 2
- Unterpunkt 3
Auf den Unterpunkten 1.1., 1.2 usw. liegt ein Link zu einer weiteren Seite.
Ich hoffe ich habe das verständlich ausgedrückt. Im Netz hab ich noch keine passende Hilfe gefunden.
Hat jemand einen Tipp wie man das hinkriegt?
Vielen Dank schon mal,
Sabrina
-
Die Antwort, die ich dir jetzt gebe, wird dir jetzt zwar nicht sehr viel helfen, aber in SSELFHTML ist dazu glaub ich irgendwo was, aber ob mit CSS oder JavaScript weiß ich nicht...
-
Sieh dich mal hier um, dies ist ein reines CSS-Menu, basierend auf unnumerierten Listen.
http://www.htmldog.com/articles/suckerfish/Grüsse, Sil
-
Hi,
Ich bin gerade dabei mir ein Menü aus CSS zu bauen.
Dann kommt für Dich Javascript wie bei der angegebenen "Suckerfish"-Lösung ja zum Glück nicht infrage.
Ist auch garnicht nötig, denn Du schreibst ja:Bei Klick auf Unterpunkt 1 (bzw. 2 und 3) sollen sich weitere Punkte öffnen.
Da beim Klick eine neue Seite geladen wird (bzw. geladen werden kann), spielt die Unfähigkeit des IE, :hover auch für andere Elemente als Links anzuwenden, ja keine Rolle.
Du müßtest lediglich ein 'nested' CSS-Menü, also eines mit Unterpunkten, nehmen und auf den entsprechenden Seiten dann die jeweiligen Unterpunkte aufführen. Schau Dich mal bei http://css.maxdesign.com.au/listamatic/ um.
freundliche Grüße
Ingo -
Schau mal hier, da gibts ein Script dazu! Test unter www.aka-fotos.de/fotos.php
-
Hi,
Schau mal hier, da gibts ein Script dazu! Test unter www.aka-fotos.de/fotos.php
wenn Du Dein "Menü" oben meinst, dieses ist ohne Javascript nicht vorhanden.
freundliche Grüße
Ingo
-
-
Hallo Sabrina,
Ein Menü, bei dem sich per Klick die Untermenüs öffnen lassen, ist mit CSS nur dann realisierbar, wenn Du es auf mehrere Seiten verteilst (also für jedes untermenü eine Seite machst) wie Ingo vorschlägt. Mehrere Unterpunkte können dann auch nicht geöffnet werden.
Wenn Du das willst, musst Du entweder eine serverseitige Technik oder JavaScript einsetzen.
Ein JavaScript Menü, das sehr flexibel mit CSS anpassbar ist und ohne JavaScript zumindest offen bleibt, findest Du dort: < http://aktuell.de.selfhtml.org/tippstricks/dhtml/treemenu/index.htm>Grüße
Daniel
-
Vielen Dank für deine Antwort.
Habe das mit dem vorgeschlagenen Script umgesetzt. Scheint wohl nicht ohne JavaScript zu funktionieren. Aber zumindest funktioniert das Menü jetzt.
Einzige Sache, die mich dabei stört ist, dass sich die "aufgeklappten" Unterpunkte nur durch wiederholtes Klicken auf den Oberpunkt schliessen lässt. Gibt es eine Möglichkeit, dass sich die "aufgeklappten" Unterpunkte bei Klick auf einen anderen Oberpunkt automatisch schliessen?
Viele Grüsse,
Sabrina-
Hallo Sabrina,
Ja die gibt es, da ich das öffters gefragt werde, werde ich den Artikel wohl irgendwann mal ergänzen. Ich kopier Dir hier mal die letzte Antwort:
Bewerkstelligen lässt sich das Ganze durch eine Änderung an treeMenu_handleClick.
Die Funktion muss, wenn sie einen Menüeintrag öffnet, alle anderen Menüeinträge des selben Teilmenüs schließen, indem sie auf event.currenTarget.parentNode.childNodes zugreift.Ich habe dieses verhalten in Abhängigkeit von einer CSS-Klasse implementiert. Gibt man bei einer Liste (ul/ol) die Klasse treeMenu_openSingleNode an, kann in diesem Teilmenü nur noch ein Eintrag geöffnet werden.
Die Funktion treeMenu_init habe ich mit einem dritten Parameter versehen.
Wenn man diesen auf true setzt, setzt die Funktion die Klasse automatisch für das ganze Menü.Die angepassten Funktionen: (Änderungen markiert)
function treeMenu_init(menu, data, openSingleNode) {
var array = new Array(0);
if(data != null && data != "") {
array = data.match(/\d+/g);
}
var items = menu.getElementsByTagName("li");
for(var i = 0; i < items.length; i++) {
items[i].onclick = treeMenu_handleClick;
if(!treeMenu_contains(treeMenu_getClasses(items[i]), "treeMenu_opened")
&& items[i].getElementsByTagName("ul").length
+ items[i].getElementsByTagName("ol").length > 0) {
var classes = treeMenu_getClasses(items[i]);
if(array.length > 0 && array[0] == i) {
classes.push("treeMenu_opened")
}
else {
classes.push("treeMenu_closed")
}
items[i].className = classes.join(" ");
}
if(array.length > 0 && array[0] == i) {
array.shift();
}
// ANFANG
if(openSingleNode) {
var classes = treeMenu_getClasses(items[i].parentNode);
if(!treeMenu_contains(classes, "treeMenu_openSingleNode")) {
classes.push("treeMenu_openSingleNode");
items[i].parentNode.className = classes.join(" ");
}
}
// ENDE
}
}function treeMenu_handleClick(event) {
if(event == null) { //Workaround für die fehlenden DOM Eigenschaften im IE
event = window.event;
event.currentTarget = event.srcElement;
while(event.currentTarget.nodeName.toLowerCase() != "li") {
event.currentTarget = event.currentTarget.parentNode;
}
event.cancelBubble = true;
}
else {
event.stopPropagation();
}
var array = treeMenu_getClasses(event.currentTarget);// ANFANG
if(treeMenu_contains(treeMenu_getClasses(event.currentTarget.parentNode), "treeMenu_openSingleNode") && treeMenu_contains(array, "treeMenu_closed")) {
for(var i = 0; i < event.currentTarget.parentNode.childNodes.length; i++) {
var element = event.currentTarget.parentNode.childNodes[i];
if(element.nodeName.toLowerCase() == "li" && element != event.currentTarget){
var array2 = treeMenu_getClasses(element);
for(var j = 0; j < array2.length; j++) {
if(array2[j] == "treeMenu_opened") {
array2[j] = "treeMenu_closed";
}
}
element.className = array2.join(" ");
}
}
}
// ENDE
for(var i = 0; i < array.length; i++) {
if(array[i] == "treeMenu_closed") {
array[i] = "treeMenu_opened";
}
else if(array[i] == "treeMenu_opened") {
array[i] = "treeMenu_closed"
}
}
event.currentTarget.className = array.join(" ");
}Grüße
Daniel
-
-