Problem: Navigation Submenu

[Tashera]

Hallo liebe Contao-Community,

ich bin am verzweifeln, und zwar habe ich eine Navigation und zu einem Punkt eine Unternavigation.
Leider bekomme ich es nicht hin, diese im css so zu formatieren wie es gewünscht ist.

Vielleicht finde ich hier Hilfe, es geht um diese Seite:
http://wppt.de/alaturka/

Der Bereich "Speisekarte" bekommt ein Untermenü, dieses soll auf gleicher Höhe rechts neben der Hauptnavi positioniert werden.
Die Schriftgrößen konnte ich bereits angleichen, allerdings kann ich die Subnavi nicht in der Höhe verändern und damit eben auch dieses "Loch" was in der Hauptnavi entsteht schließen.

Zudem habe ich das Problem, dass sobald ein Untermenüpunkt angeklickt wurde/ aktiv ist, der Bereich "Speisekarte" aus der Hauptnavi die Formatierung des Submenus übernimmt - warum??
Wie differenziere ich diese zwei Bereiche voneinander? Vielleicht spreche ich die Bereiche noch nicht richtig an!?

Liebe Grüße,
Tashera

[derRenner]

Hallo,

probier mal der ul .level_2 eine position:absolute; zu geben und diese dann wie gewünscht mit z.B. top und left zu positionieren.

Noch ein Tipp: du hast die .speisekarte #left und #left mit position:fixed; angegeben. Auf meinem Laptop-Bildschirm sieht man dann die letzten Menüpunkte nicht mehr ... und scrollen lässt sich das Bild dann mit dieser Anweisung auch nicht ... das Menü also nach oben versetzen, oder anders lösen, sodass bei kleinem Bildschirm auch noch alles gesehen wird.

Aber was ich vermerken möchte: gefällt mir TOP!!

[Tashera]

Danke, das werde ich direkt mal testen!
Die Bereiche habe ich auf fixed gestellt, weil ich möchte, dass der Mainbereich als einziges scrollbar ist und nach oben hin "verschwindet" sobald die Seite mit mehr Inhalt gefüllt ist.
Alles andere, wie Logo, Navigation und Kontaktdaten sollen stehen bzw. sichtbar bleiben sobald man scrollt.


Edit: So, das hat schonmal funktioniert - zumindest teilweise. Ich kann das Submenu nun so positionieren, wie ich es wünsche, ohne dass dieses "Loch" in der Hauptnavi entsteht.
Allerdings besteht weiterhin das Problem, dass die Formatierung der Unterpunkte im aktiven Zustand die der Hauptnavi übernimmt.
Normalerweise spreche ich mit .submenu span.active doch genau das an, oder?
Allerdings springt der Punkt "Speisekarte" der sich ursprünglich in der Hauptnavi befindet in das Untermenü (nimmt logischerweise diese Formatierung an), wenn ich auf einen Unterpunkt klicke.
Und der Unterpunkt, der sich ursprünglich im submenu befindet, wandert in die Hauptnavi und nimmt dann auch diese Formatierung an.
Das soll nicht passieren.

[derRenner]

Hallo,

nochmals kurz zum position:fixed ... mach mal dein Browserfenster so klein, dass dein Menü am unteren Rand des Fensters verschwindet. Du wirst du sehen, dass der Besucher dann keine Chance mehr hat einen Link anzuklicken ... ist aber wie oben schon vermerkt nur ein Tipp von mir - wenn du möchtest dass alle Besucher immer alle Menüpunkte sehen sollen, dann solltest du dagegen was tun

So, dein Menü macht das was, du mit CSS angewiesen hast. Du gibst bei #left .mod_navigation span.active ein margin-top und ein margin-left mit einer bestimmten Font-Grösse an. Und das ist das was du nun siehst. Also müsstest du mal hier ansetzen, damit bei .active die Menüpunkte auch bleiben wo sie sind.
Auch für den level_1, also das eigentliche Hauptmenü, hast du unter #left .mod_navigation .submenu a ebenfalls ein margin-left und eine Font-size angegeben, die dem entspricht, was sie tut.

Hat evtl. der/die/das 'cufon' damit was zu tun? Ich kenne das leider nicht ... aber mag sein, dass auch hier etwas mit hineinspielt

[Tashera]

Allerdings besteht weiterhin das Problem, dass die Formatierung der Unterpunkte im aktiven Zustand die der Hauptnavi übernimmt.
Normalerweise spreche ich mit .submenu span.active doch genau das an, oder?
Allerdings springt der Punkt "Speisekarte" der sich ursprünglich in der Hauptnavi befindet in das Untermenü (nimmt logischerweise diese Formatierung an), wenn ich auf einen Unterpunkt klicke.
Und der Unterpunkt, der sich ursprünglich im submenu befindet, wandert in die Hauptnavi und nimmt dann auch diese Formatierung an.
Das soll nicht passieren.

Problem gelöst: ich habe das Submenu im CSS komplett mit .level_2 angesprochen.

[mbraun]

Hallo Tashera,

schicke Seite. Du solltest sie Dir, wie schon erwähnt, mal bei verschiedenen Fenstergrößen und das Zusammenspiel zwischen responsiven Elementen und solchen mit fester Größe anschauen, das funktioniert noch nicht ganz (vgl. screenshot).

[Tashera]

Hallo mbraun,

da bin ich im Moment dran. Da ich aber noch Contao-Anfängerin bin muss ich mich ein wenig dadurch beißen. Vielleicht hast du ein paar Tipps?
Gewisse Sachen konnte ich schon lösen. Allerdings lässt sich z.B. die Navi und die div #right noch nicht im Browser anpassen.
Ich arbeite mit Prozentangaben, oder gibt es noch eine einfachere Lösung?