Hallo,
irgendwie steh ich schon seit gestern total auf dem Schlauch.
Für diese Seite:
http://wp1128532.vwp2522.webpack.hosteurope.de/cms/index.php?id=2042
möchte ich ein Menü welches wie schon vorhanden aus einer Liste besteht. Die zweite Menüebene soll eingerückt sein (so wie es momentan ja schon ist) und die dritte Ebene nochmal ein stück eingerückt. (Seht ihr wenn ihr auf "Referenz-Tools" klickt, diese ist aber momentan noch nicht eingerückt...).
Außerdem will ich gerne, das nur der aktive Menüpunkt einen Punkt vor sich stehen hat und unterstrichen ist (die anderen sollen keine Listenpunkte haben). Außerdem ist es ja momentan so, dass die Linie bis zum Punkt geht (beim hovern allerdings nicht) - es soll aber nur der Text unterstrichen sein.
ich probiere schon seit gestern verschiedene TS und CSS sachen aus aber bekomms gerade einfach nicht hin...
Also ich will, dass die 3. Menü-Ebene als unteliste der 2. Ebene eingerückt erscheint.
und dass die Listenpunkte nur beim aktuellen Menüpunkt erscheinen und dabei nur der Text unterstrichen ist.
Hier mein TS-Code (auszugsweise):
10.marks{
MENU = HMENU
MENU {
special = directory
special.value = 2062
1 = TMENU
1.NO = 1
1.NO.linkWrap = |
1.CUR = 1
1.CUR.linkWrap = |
1.CUR.ATagParams = class="active"
}
MENU_ITS = HMENU
MENU_ITS {
special = directory
special.value = 2044
entryLevel = 1
1 = TMENU
1.expAll = 1
1.NO = 1
1.CUR = 1
1.CUR.ATagParams = class="active"
2 < .1
2.expAll = 0
2.wrap = <ul> | </ul>
2.NO.wrapItemAndSub = <li> | </li>
2.CUR.wrapItemAndSub = <li class="active"> | </li>
3 < .2
3.wrap = <ul> | </ul>
3.NO.wrapItemAndSub = <li> | </li>
3.CUR.wrapItemAndSub = <li class="active"> | </li>
}
MENU_ITE < .MENU_ITS
MENU_ITE.special.value = 2058
MENU_ITB < .MENU_ITS
MENU_ITB.special.value = 2057
und mein CSS (auszugsweise):
ul {
list-style-image: url(../images/list.png);
list-style-position: inside;
}
a:link {
text-decoration: underline;
color: #ea6f07;
}
#navi a:link {
text-decoration: none;
font-size: 14px;
font-weight: bold;
color: #ffffff;
}
#navi a:visited {
text-decoration: none;
font-size: 14px;
font-weight: bold;
color: #ffffff;
}
#navi a:hover {
text-decoration: underline;
font-size: 14px;
font-weight: bold;
color: #ffffff;
}
.active {
color: #ffffff !important;
text-decoration: underline;
}
Hallo Zwiebelritter
Das ist nur ein CSS-Problem! Schau mal hier!
Das sollte dir eigentlich weiterhelfen.
EDITH: Ich hab schon ewig nichts mehr mit TS gemacht! Schau mal hier, da findest du genügend Menüs...
Gruß
Daniel
Hallo.
Wenn ich das richtig überflogen habe, dann dürfte ein kleines Verständnisproblem bzw. eine kleine Unachtsamkeit Dir Nerven kosten - nämlich die Menüzustände CUR bzw. ACT. Du verwendest im TS nur CUR, spricht also immer nur die Seite an, auf der der User gerade ist. Ist dieser in der dritten Ebene irgendwo heißt das, dass auch nur ind er dritten Litenebene die active-Klasse gesetzt ist - und folglich die Einrückungd er zweiten Ebene nirgends greift, weil dort die Klasse nicht vorhanden ist.
Die Klassen für die Einrückung sollten daher nicht via CUR-Zustand definiert werden, sondern über den ACT-Zustand. Dieser greift für alle Seiten des aktuellen Seitenpfades (also gerade aufgerufene Seite und alle Oberseiten bis zur Rootseite).
Viele Grüße
Julian
Hi,
danke für die Antworten.
Daniel: Deine Links kenne ich natürlich und habe mich ja auch daran durchgearbeitet - leider erfolglos.
Julian: Wenn ich ACT nehme wird aber doch auch der Menüpunkt des Menüs darüber markiert oder?
EDIT: Nein wohl doch nicht. Der gewünschte Effekt ist allerdings auch nicht eingetreten. Ich glaube ich muss das ganze doch über <div> mit klassen machen...
Dann könnte ich die normalen Menüpunkte per padding oder margin einrücken und die aktiven bekommen einfach ein hintergrundbild.
Allerdings ist dann immer noch das ganze Feld und nicht der Text markiert (hab ich nämlich schon so ähnlich ausprobiert)... Frage mich woran das nur liegt. An der Klasse?
:o Hab mal wieder nichts genau genug gelesen.
In Deinem CSS setzt Du die Einrückung für alle Elemente auf 0.
/* =======================================
1. Kalibrierung und Restauration
======================================= */
* {
margin: 0;
padding: 0;
font-family: Trebuchet MS, Arial, sans-serif;
font-size: 12px;
color: #000000;
}
Folglich ist auch eine Liste bzw. deren Listeneinträge nicht mehr eingerückt. Über list-style-position: inside wird zwar wieder soweit eingerückt, dass das Aufzählungszeichen hinpasst, aber nicht weiter.
Die Einrückung wird daher einfach via CSS möglich, indem Du entweder das UL in zweiter Ebene einrückst oder die einzelten LIs der Ebene mit einem Abstand nach links versiehst.
P.S: Du verwendest derzeit einige IDs (submenu, sublevel) mehr als einmal in der Seite
Zwiebelritter schrieb
Allerdings ist dann immer noch das ganze Feld und nicht der Text markiert (hab ich nämlich schon so ähnlich ausprobiert)... Frage mich woran das nur liegt. An der Klasse?
Du bindest die Klasse "active" sowohl in den Link der aktiven Seite ein, als auch in das in (und seine Unterpunkte) umfassenden Container. Damit wirkt sich die Hervorhebung auf alle Texte (also auch das Untermenü) aus.
Ja, das habe ich mir schon gedacht...
Hab es jetzt fast mit der von mir oben beschriebenen Methode hinbekommen.
Nur zwei Sachen funktionieren noch nicht. Der oberste Listenpunkt wird im Aktiven Zustand nicht unterstrichen und auf der 3. Menüebene (unter Referenztools) werden alle Unterpunkte unterstrichen (okay, das liegt sicher an wrapItemAndSub) und bei E-Learning ist ein Punkt davor, der dort nicht sein sollte. Wie kommt der dahin (bzw. das weiß ich, das liegt am div Hintergrund) aber wie bekomme ich ihn wieder weg?
EDIT: Hab's geschafft, musste etwas mit den verschiedenen Wraps rumspielen und eine extra Klasse für die 3. Ebene erstellen. Nur dass der Oberste Menüpunkt aktiviert bleibt kriege ich nicht hin...