Zum Inhalt springen

Menu in 3 Spalten mit Transparenz

Erstellt am 24. August 2007 · 2 Antworten · letzte Antwort am 24. September 2007

Tags: HTML & CSS, Frage

fairydoc ·

Ich habe folgendes Problem: Ich möchte eine Menu erstellen, wie auf dieser Url zu sehen ist:

http://www.medifox.de

Die Transparenz an sich ist dabei nicht das Problem, das geht mit zusätzlichem Div vor dem eigentlichen Link und entsprechendem filter opacity (damit der Link selber nicht die Opacity des Hintergrunds bekommt):

NO.linkWrap = <div class="linkback"></div> |

Allerdings ist dies hier so, dass die Untermenus in weiteren Divs eingebaut sind, welche per Javascript mittels display:none ein- bzw. ausgeblendet werden. Das gesamte Menu wird dabei übertragen und nur das gewünschte bei Bedarf angezeigt. Vom Prinzip her ist mir das schon klar. Wie man das aber in Typoscript umsetzt ist mir ganz und gar nicht klar.

Hinzu kommt, dass es ja so sein muss, dass die UnterMenus richtig positioniert werden. Normalerweise fangen die ja auf der Höhe des Parent Menu-Eintrags an. Wenn der Parent-Menu-Eintrag jedoch recht weit unten ist, müssen die Untermenus dementsprechend höher anfangen, so daß sie nicht nach unten überstehen. Zu sehen, wenn man auf betreffender Seite auf "Kundenbereich" klickt.

Gibt es da existierende DHTML-Menus, die man per CSS entsprechend gestalten könnte? Die Lösung, welche verwendet wurde, scheint mir zum Einen recht komplex, zum anderen, finde ich es nicht so toll, jedesmal den ganzen Menubaum zu übertragen, selbst wenn nicht mal ein Untermenu angezeigt wird.

Wäre toll, wenn da jemand nen guten Tipp parat hätte

Aloha

Markus

Unbekannter Benutzer ·

Also,

das mit der Transparenz würde ich anders lösen. Der Opacity Filter greift nur bei IE und ist auch nicth so das wahre. Besser ein PNG-24 und für IE6 der es nicht versteht den AlphaImageLoader benutzen. Die nötigen Infos lassen sich leicht ergooglen.

Das ganze würde ich als verschachtelte Liste machen (siehe z.B. Suckerfish o.ä.) und dann müsstest du für die Positionierung (damit es nicht unten rausfliegt) Javascript einsetzen. Dabei dürfte dir eines der JS Frameworks sicherlich weiterhelfen. Ich meine auch so ein Menü schon mal gesehen zu haben, aber ich finde das aus dem Beispiel schon alleine deshalb nicht gut, weil man ohne Javascript das Menü gar nicht sieht.

Und ich würde dir schon raten alle Menüpunkte mit zu übertragen. AJAX ist ja schön und gut, aber jedes Untermenü einzeln nachzuladen scheint mir nicht rentabel, weil das ja dann auch eine Verzögerung bedeutet, wenn man über einen Punkt geht.

Grüße
Christian