Problem mit Navigationsmenu

**ATKMueller** · 30.11.2015, 18:38

Hallo zuammen

Ich habe folgendes Problem

Auf der Linken Seite habe ich ein Navigationsmenu 1 (Starlevel 0, Stoplevel3, Hard Limit) eingebaut. Dieses soll 3 Unterebenen zeigen.

X
Xa
Xaa
Xaa

Y
Ya
Yaa
Yaa

etc...

Auf der rechten Seite habe ich ein Navigationsmenu 2 (Starlevel 3, Stoplevel 1, Hardlimit) mit den Punkten Xaaa. Dieses Navigationsmenu 2 leitet zu einer neuen Seite mit der Navigation3 (Startlevel 4, Stopplevel 1, Hardlimit) den Xaaa links weiter.

So weit so gut, aber unter der Navigation 1 sind ständig die Untermenus sichtbar.
Bildschirmfoto 2015-11-30 um 19.40.11.png
Das heisst die verschwinden gar nie. Wie kann ich diese zum Verschwinden bringen, ohne dass sonst wieder etwas in der Navigation nicht so geht wie ich es will?

Vielen Dank für die Antworten

Gruss

ATKMueller

**fiedsch** · 30.11.2015, 18:48

Du musst die Teile, die Du nicht sehen willst per CSS verstecken. Dazu kannst Du die CSS Klassen verwenden, die Contao im Menü setzt ("active", "submenu" etc.).

Contao zeigt immer das ganze Menü an, denn sonst könntest Du daraus keine Dropdown-Menüs bauen. Dort muss ja auch die Ganze Menüstruktur vorhanden sein.

**ATKMueller** · 30.11.2015, 19:02

Vielen Dank
Ich bin wirklich noch ein voller Anfänger... Ich habe auch noch nicht so viel Erfahrung mit CSS. Aber ich weiss jetzt in welche Richtung ich googlen muss. Mal schauen, ob ich dies hinbringe.

Gruss
ATKMueller

**ATKMueller** · 30.11.2015, 19:20

Ok, danke habe es geschafft, aber noch ein kleines Problem.

Es ist jetzt nur noch der erste Eintrag da, wie gewünscht. Beim drüberfahren erscheint alles und ich kann auswählen was ich will. Danach verschwindet aber alles wieder und nur der erste Eintrag ist da. Wie kann ich es bewerkstelligen, dass es nicht beim Darüberfahren erscheint, sondern erst mit einem Klick und dann die jeweilgen Unterebenen auch bleiben, bis man auf einen neuen Haupteitrag klickt?

Vielen Dank für die Antworten.

Gruss
ATKMueller

**fiedsch** · 30.11.2015, 19:26

Schenkst Du uns einen Link zur Seite, damit wir sehen können, was Du gemacht hast?

**ATKMueller** · 30.11.2015, 19:59

Ich versuche für mein Opensource Lehrmittel eine Website zu machen...
In diesem Bereich bin ich ein Amateur.
Hier der Link:

www.musiklehrmittel.ch

Danke und Gruss

**fiedsch** · 01.12.2015, 06:06

Ich blick es noch nicht ganz -- etwas verwirrend die Seite. Du meinst das "Menü" unter "MU.6 Praxis des Musikalischen Wissens"?

Falls ja, dann musst Du das

Code:

left .mod_navigation .level_2 {
    height: 0;
}

rausnehmen.

Wieso dieses Menü aber unabhängig von der Auswahl im oberen Menü immer das gleiche beinhaltet erschließt sich mir (als Leser der Site) nicht.

**ATKMueller** · 01.12.2015, 06:28

Vielen Dank für die Rückmeldung.

Oben habe ich ein custom menu gemacht. Dort sollen nur die Infos und das Login rein.
¨
Auf der Seite habe ich das navigationsmenu gemacht. --> Dieses soll auf die Themen des Lehrplans verweisen, damit man dann das entsprechende Kapitel auswählen kann.

Den Code
#left .mod_navigation .level_2 {
height:0px;
habe ich angegeben, damit das Untermenu verschwindet.

Mit
#left .mod_navigation .submenu:hover .level_2,
#left .mod_navigation .submenu a:focus .level_2 {
height:100%;
wollte ich es beim Überfahren hervorholen. Dies klappt ja auch, aber ich möchte dass wenn man auf Praxis des musikalischen Wissens klickt, die Untermenus stehen bleiben.
Das funktioniert noch nicht.

Ok, ich glaube einen Fehler entdeckt zu haben, werde ein wenig rumtüfteln. Tnx

Gruss und Dank

ATKMueller

**fiedsch** · 01.12.2015, 07:29

OK, jetzt habe ich wohl verstanden, was Du haben willst.

Ich denke, Du brauchst die CSS-Klasse "active" um zu sehen, daß Du "auf der Seite bist"

**ATKMueller** · 02.12.2015, 13:10

Danke für die Antwort

Ich blicke irgendwie nicht ganz durch... . Gitb es eine Website, wo ich dies lernen kann oder hat mir jemand den anstupser.

Ich habe ein mod_navigation erstellt.

x (Hauptmenu)

a (untermenu 1)
b 1 (unteruntermenu 1/1)
b 2 (unteruntermenu 1/2)

a (untermenu 2)
b 1 (unteruntermenu 2/1)
b 2 (unteruntermenu 2/2)

a (untermenu 3)
b 1 (unteruntermenu 3/1)
b 2 (unteruntermenu 3/2)

a (unermenu 4)
b 1 (unteruntermenu 4/1)
b 2 (unteruntermenu 4/2)

Ich habe es geschafft, durch
#left .mod_navigation .level_3 {
display:none;
}
Alle b1 und b2 auszublenden.

Danach habe ich folgendes css eingegeben, um b1 und b2 beim Rüberstreichen wieder sichtbar zu machen.
#left .mod_navigation .submenu:hover .level_3 {
display:block;
}

Nun aber meine Probleme:
- Beim Rüberstreichen erscheinen nun alle b1 und b2.--> Ich möchte immer nur das sehen, über welches ich streiche. z.B. nur b1 und b2 von a(untermenu 2) und nicht alle.
- Wähle ich eines dieser b1 und b2 aus, verschwinden alle b1 und b2 --> Wähle ich z.B. b1 von a(untermenu 2) aus, soll sowohl das a(untermenu 2) als auch das angewähte b1 (unteruntermenu 2/1) fett hervorgehoben werden und nicht verschwinden. Alle anderen b1 und b2 sollen jedoch fort sein.

Die vorderen Beiträge haben mir weitergeholfen, jedoch weiss ich nicht wie ich das .active anwenden soll. Zudem blicke ich bei der Reihenfolge von css nicht durch. Wann brauche ich ul und li und .active und :active?
Hat jemand ein gutes Tutorial, welches auch die Reihenfolge klärt. Die Begriffe sind mir ansich klar...

Vielen Dank und Gruss

ATKMueller

**baumbaTz** · 02.12.2015, 13:38

Ich glaub Du benötigst:

Code:

#left .mod_navigation .level_2 .submenu:hover .level_3,
#left .mod_navigation .level_2 .submenu.trail .level_3{
display:block;
}

Die Klasse 'level_2' weil auch die LI bei 'level_1' die Klasse 'submenu' haben, deswegen werden zur Zeit immer gleich alle 'level_3' angeschnackt.

bisdenndann
björn

**tab** · 02.12.2015, 14:14

Genau, das ist das Problem. Statt ".submenu" könntest du hier auch einfach "li" schreiben, weil, so wie die Navigation aufgebaut ist, das Element mit der Klasse "submenu" nur ein li sein kann (Das a-Tag hat diese Klasse zwar auch, aber da ist ja garantiert kein ul Level 3 drin) und li's ohne Klasse "submenu" sowieso kein "level_3" beinhalten.

**ATKMueller** · 02.12.2015, 15:28

Vielen Dank!
Jetzt gehen die Untermenus einzeln auf und ich denke ich bin auch einen Schritt weiter, wie dies mit der Reihenfolge geht.
Ich werde mich nun daran setzen und schauen, ob ich es mit dank dem von euch erworbenen Wissen fertig bringe, dass nun auch noch der jewilige akitve Link hervorgehoben wird.
Dafür muss ich das .active element nehmen oder nicht?

Vielen Dank für eure Unterstützung bisher.

Gruss

ATKMueller

**ATKMueller** · 02.12.2015, 18:09

Jetzt habe ich fast alles geschafft. Das Aktive Menu ist auch ersichtlich.
Gibt es eine Möglichkeit, dass das dazugehörige Obermenu zusätzlich auch ersichtlich wird? D.h. sowohl die level_1, Level_2 undLevel_3?

Gruss
ATKMueller