Zwei Menüs mit unterschiedlichen CSS

Allgemeine Diskussionen über WebYep
Post Reply
karo
Posts: 9
Joined: Sun Sep 25, 2011 9:53 pm

Zwei Menüs mit unterschiedlichen CSS

Post by karo » Mon Dec 05, 2011 11:00 am

Noch eine Frage. Ich möchte zwei Menüs auf einer Seite unterbringen. Die beiden sind unabhängig voneinander. Jedoch greifen beide auf die selben CSS zu. Ich möchte aber für das zweite neue CSS definieren. Wie kann ich das machen?

Danke
Karo

marcus
Objective Development
Objective Development
Posts: 170
Joined: Tue Nov 30, 2010 1:25 pm

Re: Zwei Menüs mit unterschiedlichen CSS

Post by marcus » Mon Dec 05, 2011 12:19 pm

Vorab erstmal: man kann zwar mehrere WebYep-Menü-Elemente auf einer Seite verwenden, muss aber unbedingt darauf achten, dass beide unterschiedliche Sprungziele haben!

Bezüglich CSS: die einfachste Möglichkeit wäre, die beiden Menüs in Container mit unterschiedlichen Klassen/IDs zu platzieren. Dann kann man mit dem entsprechenden Selektor die beiden unterscheiden.

Ein kleines Beispiel dazu:
Menü #1 soll ein waagrechtes Hauptmenü sein. Wir packen es also in ein <div> mit der Klasse "hmenu".
Menü #2 soll ein senkrechtes Untermenü werden und bekommt daher einen <div>-Container Namens "vmenu".

Im Stylesheet würden die Selektoren dann so aussehen:

Code: Select all

.hmenu ul.WebYepMenu {...}
.hmenu .WebYepMenuItem {...}

.vmenu ul.WebYepMenu {...}
.vmenu .WebYepMenuItem {...}

karo
Posts: 9
Joined: Sun Sep 25, 2011 9:53 pm

Re: Zwei Menüs mit unterschiedlichen CSS

Post by karo » Mon Dec 05, 2011 2:38 pm

Vielen Dank, das hat prima funktioniert.

ISS-JS
Rank 1
Rank 1
Posts: 29
Joined: Fri Jan 13, 2012 5:59 pm

Re: Zwei Menüs mit unterschiedlichen CSS

Post by ISS-JS » Fri Jan 13, 2012 6:09 pm

Hallo Marcus,

ich suche schon seit längerem nach einer Lösung, ein mit Webyep bearbeitbares waagerechtes (horizontales) Menü zu erstellen.

Hast Du da schon einen CSS-Code? Kannst Du mir da was zukommen lassen? Ich bräuchte eines, das die 2te Ebene dann vertikaleinblendet und die 3te Ebene (und folgend) jeweils nach rechts ausklappt.

Das wäre super.

Danke im Voraus

Jürgen

marcus
Objective Development
Objective Development
Posts: 170
Joined: Tue Nov 30, 2010 1:25 pm

Re: Zwei Menüs mit unterschiedlichen CSS

Post by marcus » Fri Jan 13, 2012 7:00 pm

ISS-JS wrote:ich suche schon seit längerem nach einer Lösung, ein mit Webyep bearbeitbares waagerechtes (horizontales) Menü zu erstellen.
... Ich bräuchte eines, das die 2te Ebene dann vertikaleinblendet und die 3te Ebene (und folgend) jeweils nach rechts ausklappt.

Ich habe vor etwa einem Jahr im englischen Forum ein Beispiel dazu gepostet (einmal als reines HTML und einmal als WebYep-Seite).

Generell muss ich dazu sagen, dass horizontale Menüs nicht trivial zu implementieren sind (der defekte IE z.B. hat mir mehr als nur ein paar graue Haare beschert). Ein gutes Verständnis von CSS ist unabdingbare Voraussetzung dafür, sowas zu implementieren oder anzupassen.
Ich kann zwar nicht für jeden Anwender der mich danach fragt solch ein Menü basteln (dann täte ich nichts anderes mehr bis zum Jahre Schnee :lol:), aber das oben genannte Beispiel ist durchgängig kommentiert und kann als Ausgangspunkt für weitere Experimente dienen.

Einfachere Beispiele befinden sich auch auf unserer Tutorials & Examples Seite (nur auf Englisch verfügbar).

Post Reply