Modul für Horizontale Dropdown-Navigation

[Jurij]

Hi ich bin Contao Anfänger und möchte eine Dropdown-Navigation machen.
Erste frage wäre:
Ich hab den Header-Bereich und hab dort ein Hintergrundbild eingefügt. Darunter soll die Dropdown-Navigation. Ich hab das mit Position gemacht, dass es unter dem Bild ist. Weil das Bild kann ich nicht in den Header einfügen ausser als Hintergrundbild, mit CSS oder Irre ich mich da? Also kann man ein Bild oder ein Div-Container irgendwie in der Kopfspalte einfügen, so dass ich die Navi ohne Positionierung unter dem Bild habe.
Und ich hatte gesehn, dass es ein Modul gibt für Dropdown Navigationen. Ich habs runtergeladen aber konnte es nicht entpacken weil er mit gesagt hat Datei ist fehlerhaft oder beschädigt. Kennt jemand ein Modul das ich runterladen kann und als Dropdown-Navigation einfügen oder geht es wenn ich es per CSS mache einfacher?
Danke für die Antworten schon mal im Vorraus.
Mit freundlichen Grüßen
Jurij

[MiTsch]

Hallo Jurij,

Herzlich Willkommen in der Contao Community.

kann man ein Bild oder ein Div-Container irgendwie in der Kopfspalte einfügen, so dass ich die Navi ohne Positionierung unter dem Bild habe.

Ja das geht, hierzu solltest Du Dir mal ein fertiges Template installieren und anschauen (z.B. Musik-Academy).

Und ich hatte gesehn, dass es ein Modul gibt für Dropdown Navigationen. Ich habs runtergeladen aber konnte es nicht entpacken weil er mit gesagt hat Datei ist fehlerhaft oder beschädigt.

Also die Dropdown-Navigation brauchst Du eigentlich nicht herunter zu laden da Contao diese schon "an Bord" hat. Wenn das System Dir fehlerhafte oder beschädigte Dateien melden rate ich Dir das zu deiner Contaoinstallation passende Systendiagnosetool zu installieren und erst mal zu schauen ob alle Dateien vorhanden und in Ordnung sind.

Viele Grüße
MiTsch

[wotank]

solche topnavis mache ich nie in den header.
Ich finde es sinnvoller die darunter in einem div (id="topnavi") zu gruppieren.

Die normale navi kann floaten nur die subnavi muss absolut außerhalb des Viewports geschoben werden und beim hovern wieder eingeblendet werden.

[Jurij]

Also im Standartmodul für die Navigation hab ich nirgendwo gefunden wo ich einstellen kann, dass es eine Dropdownnavi werden soll.
Hab jetzt einfach im template einen weiteren div-container eingefügt für die Navi. geht auch gut. Hab die jetzt auch einfach nur gefloatet dass sie nebeneinander sind, damit ich seh wie es aussieht. Aber das es beim rüberfahren runterklappt muss ich mit css machen oder?

[ways2web]

Hi

Such mal im Forum nach dem Begriff Suckerfish, vielleicht hilft dir das weiter!

grusd
ways

[Jurij]

Hi versteh ich beim Suckerfisch richtig dass dort java script verwendet wird? Gibts nicht ne bessere barrierefreiere Lösung? Ich würde gerne ohne js auskommen. Rein mit css würde es doch auch gehen dass es auch auf allen Browsern funktioniert, also auch IE 6 usw

[xchs]

Hallo Jurij,

wenn Du es schaffst, die volle Funktionalität des Menüs im IE6 auch ohne JavaScript allein mittels CSS umzusetzen, wären wir sicherlich auf Deine Lösung gespannt...

[Jurij]

Hmm ich probiere grad es per css zu machen. Ich hab das Problem, dass wenn meine drop down navi runter gehen soll, sie von dem div-container "inside" aus der template abgeschnitten wird, wegen dem overflow:hidden. Wenn ich das aber ausstelle zeigt er mir irgendwie gar nicht mehr die Navigationsleiste an. Dann hab ich den div aus der Template rausgenommen und ich hab das selbeproblem dann aber bei dem div " mod_navigation" vom Navigationsmodul. Das overflow: hidden steht in der css Klass "block". Weiß jemand was ich meine? Und kann mir da jemand helfen?

[wotank]

Gibts nicht ne bessere barrierefreiere Lösung? Ich würde gerne ohne js auskommen. Rein mit css würde es doch auch gehen dass es auch auf allen Browsern funktioniert, also auch IE 6 usw

es gibt eine reine CSS-Lösung auch für den IE6.
Dort werden im Quelltext über Cond.Comments Tabellen für den IE6 eingefügt.
Stu Nicolls hat eine funktionierende Lösung erarbeitet..

Da solltest du aber schon ganz genau wissen was du tust.

Viel wichtiger für eine barrierefreie Lösung ist aber, wenn du das Submenü nicht über visibility:hidden oder display:none ausblendest, weil das von den Screenreadern dann nicht mehr vorgelesen wird.
Besser ist, wenn das absolute Submenü per position:absolute und left:-9999px ausgeblendet und beim Hovern mit left:auto wieder eingeblendet wird.

Für eine IE6-Lösung wäre es aber auch ausreichend, wenn durch Klick auf den Hauptmenüpunkt das Submenü im Inhaltsbereich ausgegeben wird, d.h. in Form einer Zwischenseite.

Ich hab das Problem, dass wenn meine drop down navi runter gehen soll, sie von dem div-container "inside" aus der template abgeschnitten wird, wegen dem overflow:hidden. Das overflow: hidden steht in der css Klass "block". Weiß jemand was ich meine? Und kann mir da jemand helfen?

position:relative (contao.css glaub ich) für .inside und overflow:hidden (basic.css) für .block sorgen immer wieder gerne für Darstellungsprobleme.

.inside kannst du in deiner CSS mit position:static; überschreiben und so die Stapelreihenfolge anpassen und das overflow aus der basic.css streichen, weil es bessere Maßnahmen zum Einschließen von Floats gibt.

[kleppi]

Hallo,

ich hatte auch das Problem , dass wenn meine drop down navi runter gehen soll, sie von dem div-container "inside" aus der template abgeschnitten wird.

Sieh Beitrag "IE7 und Darstellung Suckerfish Menu" auf dieser Seite

durch folgende Anweisung habe ich das hinbekommen.
#header .inside
{
position:static;
}

kleppi

[wotank]

Hallo,

ich hatte auch das Problem , dass wenn meine drop down navi runter gehen soll, sie von dem div-container "inside" aus der template abgeschnitten wird.

Sieh Beitrag "IE7 und Darstellung Suckerfish Menu" auf dieser Seite

durch folgende Anweisung habe ich das hinbekommen.
#header .inside
{
position:static;
}

kleppi

position:relative (contao.css glaub ich) für .inside.....sorgen immer wieder gerne für Darstellungsprobleme.

.inside kannst du in deiner CSS mit position:static; überschreiben und so die Stapelreihenfolge anpassen

doppelt genäht hält besser.