Menüeinträge der ersten und zweiten Ebene
Eingetragen von Anonymous (0)am 15.03.2007 - 20:35 Uhr in
Hallo,
ist es möglich Menüeinträge der ersten und zweiten Ebene unterschiedlich darzustellen? Dh mit background und List-Image?
Bsp:
eintrag 1
eintrag 2
- eintrag 2.1
- eintrag 2.2
eintrag 3
Wenn ja, wie?
Danke für die Hilfe,
lg
Dani
- Anmelden oder Registrieren um Kommentare zu schreiben
Drupal bietet wie ich weiss,
am 15.03.2007 - 20:56 Uhr
Drupal bietet wie ich weiss, selber keine eindeutige Methode Menülinks zwischen 1. Ebene und 2. Ebene zu unterscheiden. Ausser die Primary Links und Secondary Links. Hier wird automatisch die Links eine id vergeben.
Auf eine Lösung wäre ich aber auch aufjedenfall interessiert. Da ich vor kurzem hier sowas ähnliches schon mal gefragt habe.
Gruß
Giang
Re: Menüeinträge der ersten und zweiten Ebene
am 15.03.2007 - 22:51 Uhr
Bsp:
eintrag 1
eintrag 2
- eintrag 2.1
- eintrag 2.2
eintrag 3
Wenn ja, wie?
Der Code den Drupal anhand Deines Beispiels generieren würde (und mit aktivierten "eintrag 2") würde so aussehen.
<ul class="menu"><li class="leaf"><a href="eintrag 1" title="eintrag 1">eintrag 1</a></li>
<li class="expanded"><a href="eintrag 2" class="active">eintrag 2</a>
<ul class="menu">
<li class="leaf"><a href="eintrag 2.1" title="eintrag 2.1">eintrag 2.1</a></li>
<li class="leaf"><a href="eintrag 2.2" title="eintrag 2.2">eintrag 2.2</a></li>
</ul>
</li>
<li class="leaf"><a href="eintrag 3" title="eintrag 3">eintrag 3</a></li>
</ul>
Du könntest also per CSS die 1. Ebene z.B. folgendermaßen themen:
ul.menu li.leaf, ul.menu li.expanded { background-color: #ff0000; list-style-image: url(image.gif); }Und die 2. Ebene z.B. so:
ul.menu li.expanded ul li { background-color: #ff6600; list-style-image: url(image2.gif); }Menüeinträge der ersten und zweiten Ebene
am 16.03.2007 - 13:07 Uhr
Du könntest also per CSS die 1. Ebene z.B. folgendermaßen themen:
ul.menu li.leaf, ul.menu li.expanded { background-color: #ff0000; list-style-image: url(image.gif); }Damit würde aber die 2. Ebene unter "eintrag 2" ebenfalls einen roten Hintergrund und einen image.gif bekommen, wegen 'ul.menu'.
Kann man das irgendwie mit css ausschließen?
Kaskade
am 16.03.2007 - 13:26 Uhr
Damit würde aber die 2. Ebene unter "eintrag 2" ebenfalls einen roten Hintergrund und einen image.gif bekommen, wegen 'ul.menu'.
Nein, mit der zweiten Anweisung wird die erste überschrieben. Wie das funktioniert wird z.B. hier beschrieben: http://jendryschik.de/wsdev/einfuehrung/css/vererbung-initialwerte-kaskade
Kaskade
am 16.03.2007 - 16:33 Uhr
Vielen Dank für den Tipp. Das mit dem Überschreiben ist eine gute Idee und funktioniert wunderbar, um die 1. und 2. Ebene zu Themen.
funktioniert nicht
am 24.03.2007 - 15:21 Uhr
Hallo,
ich habe das mit dem überschreiben ausprobiert, allerdings übernimmt er die Änderungen der 2. Ebene nicht.
Ich habe folgende Eigenschaften
ul.menu {..}
ul.menu li.leaf, u1.menu li.expanded {..}
u1.menu li.expanded u1 li {...}
aber die Eigenschaften die bei u1.menu li.expanded u1 li eingestellt sind, werden nicht angezeigt?
Weiß jemand, welchen Fehler ich gemacht habe?
lg
du hast zum Teil u1 (1,
am 25.03.2007 - 13:56 Uhr
du hast zum Teil u1 (1, Zahl) statt ul (l, Buchstabe, kommt von unordered list) geschrieben
Danke
am 26.03.2007 - 11:07 Uhr
Das habe ich behoben,
allerdings wird noch immer eine zusätzliche Leiste angezeigt.
Ahm, genauer gesagt:
Ich habe einen Hintergrund, der auf der linken Seite verlaufend ist.
Das Untermenü soll die Hintergrundfarbe haben, und wenn ich diese Befehle benutze, erscheint noch immer genau links neben meinen Untermenüpunkten dieser Verlauf (den ich im ul.menu eingestellt habe)
muss ich sonst noch etwas überschreiben?
lg Dani
Wird schwierig, dir eine
am 26.03.2007 - 12:53 Uhr
Wird schwierig, dir eine Antwort zu geben, ohne dein CSS zu sehen.
Irgendwo wirst du wohl ein margin oder padding nach links haben. Poste doch mal dein CSS... Und am besten noch ein Screenshot dazu.
gruss elias
quellcode
am 02.04.2007 - 07:27 Uhr
Hallo,
der Quellcode für das Menu:
ul.menu {
border: none;
text-align:left;
background: url(side_menu_middle_0313.gif) #F8F84D;
}
ul.menu li.leaf, u1.menu li.expanded {
margin: 0 0 0 0.5em;
background-color: #EDF749;
}
ul.menu li.expanded ul.menu {
background-color: #EDF749;
}
ul.menu li.expanded ul li {
background-color: #EDF749;}
erklärung: side_menu_middle_0313.gif ist die Datei mit dem Rand auf der linken Seite.
Screenshots posten geht hier leider nicht, bzw ich habe es nicht geschafft...
Bitte um Hilfe,
lg Dani