Zum Inhalt springen

Links auf Listenmenü anwenden

Erstellt am 9. August 2006 · 1 Antwort · letzte Antwort am 10. August 2006

Tags: Frage

Unbekannter Benutzer ·

Wie wende ich die Links (NO und ACT) auf Listenmenüs an?

Habe z.B. folgendes Menü:

<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Newspaper</a>
<ul>
<li><a href="#">Page</a></li>
</ul>
</li>
<li><a href="#">Presse</a>
<ul>
</div>

In TypoScript komm ich noch nciht so voran, woltle deshalb den Code vom Tutorial modifizieren:

temp.menu_1 = HMENU
# First level menu-object, textual
temp.menu_1.1 = TMENU
temp.menu_1.1 {
# Normal state properties
NO.allWrap = <div class="menu1-level1-no"> | </div>
# Enable active state and set properties:
ACT = 1
ACT.allWrap = <div class="menu1-level1-act"> | </div>
}
# Second level menu-object, textual
temp.menu_1.2 = TMENU
temp.menu_1.2 {
# Normal state properties
NO.allWrap = <div class="menu1-level2-no"> | </div>
# Enable active state and set properties:
ACT = 1
ACT.allWrap = <div class="menu1-level2-act"> | </div>
}

Da ich die CSS so eingebunden habe, steh ich auf dem Schlauch:

DIV#menu ul a {
text-decoration: none;
background-image: url(images/link.jpg);
background-repeat: no-repeat;
display: block;
color: #FFF;
font-size: 13px;
font-weight: bold;
padding: 3px 3px 5px 25px;
line-height: 16px;
font-size: 13px;
height: 17px;
}

Unbekannter Benutzer · · Beste Antwort

Na wenn du den TS-Code angepasst hast, den du gepostet hast, dann sieht das ja jetzt etwa so aus:

....
NO.allWrap = <li> | </li>
....

NO ist ja der Basiszustand. ACT ist der aktuelle Menüpunkt, d.h. du machst sowas, ähnlich wie auch in dem Tutorial Code:

ACT.allWrap = <li class="lvl1_act">|</li>

und kannst dann in deinem CSS für den aktiven Zustand so einen eigenen Style vergeben:

DIV#menu ul li.lvl1_act a {

}

um die Liste valide zu machen, solltest du aber noch das allWrap durch ein wrapItemAndSub ersetzen.

Grüße
Christian