Zum Inhalt springen

Doppeltes <li> bei CSS-Menü

Erstellt am 30. Mai 2005 · 4 Antworten · letzte Antwort am 30. Mai 2005

Tags: HTML & CSS, Frage

NoFugo ·

Hallo,
folgendes CSS-Menü wollte ich in Typo integrieren, wobei ich hier "hart" die einzelnen Zustände als Klasse angelegt habe, damit ihr weisst wie ich die Menüpunkte formatieren will:

<div id="navcontainer">
<ul id="navlist">
<li><a href="#">News</a></li>
<li class="active"><a href="#">Studium</a></li>
<li class="sub"><a href="#">Unterpunkt 1</a></li>
<li class="sub"><a href="#">Unterpunkt 2</a></li>
<li class="sub-active"><a href="#">Unterpunkt 3</a></li>
<li class="sub"><a href="#">Unterpunkt 4</a></li>
<li><a href="#">Studenten</a></li>
<li><a href="#">Dozenten</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Netzwerk</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div>

-----------------

und das ist der dazughörige CODE in Typo

# Menü links
       MENU_LINKS = HMENU  
       MENU_LINKS { 
             special = directory
             special.value = 2 
         1 = TMENU  
         1 {  
           wrap = <div id="navcontainer"><ul id="navlist">|</ul></div> 
           noBlur = 1  
           NO {  
                 wrapItemAndSub = <li>|</li>  
                 stdWrap = upper  
                 }  
           ACT < .NO  
           ACT.stdWrap.wrap = <li class="active">|</li>  
           CUR < .ACT  
           CUR.stdWrap.wrap = <li class="active">|</li>  
           CUR.doNotLinkIt = 1  
           CUR = 1  
           } 
           2 < .1 
           2.wrap = <li class="sub">|</li>  
           2.CUR.stdWrap.wrap = <li class="sub-active">|</li>
  
           }

Das Ergebnis ist auf den ersten Blick zufriedenstellend, allerdings wird ein Menüpunkt der "aktive" ist, mit einem weiteren <li></li> umschlungen und wird in folge nicht angezeigt. Desweiteren werden mir keine Menüpunkte (class="sub") 3.Ordnung (also unterhalb von "STUDIUM" angezeigt).Im Sourcecode sieht das Ganze so aus:

<div id="navcontainer">
  <ul id="navlist">
     <li><a href="4.0.html">Home</a></li>
     <li><a href="15.0.html">News</a></li>
     <li><li class="active">Studium</li></li>
     <li><a href="6.0.html">Studenten</a></li>
     <li><a href="7.0.html">Dozenten</a></li>
     <li><a href="8.0.html">Jobs</a></li>
     <li><a href="9.0.html">Netzwerk</a></li>
  </ul>
</div>

Weiss jemand Rat? Oder ist das Typoscript einfach nur murcks? (meine Typoscript-Kenntnisse beschränken sich leider nur auf STRG+C STRG+V)
Danke für jegliche Hilfe.

jenses ·

Jo, Dein TS ist Murks :

           ACT.stdWrap.wrap = <li class="active">|</li>

Das ist "doppelt gemoppelt", da NO schon mit li gewrapped wird, jetzt noch mal li.active als innere Verpackung ist natürlich Quatsch.
Schreib einfach so :

           ACT < .NO 
           ACT.wrap = <li class="active">|</li> 
           CUR < .ACT 
           CUR.wrap = <li class="active">|</li> 
           CUR.doNotLinkIt = 1 
           CUR = 1

jenses

NoFugo ·

Danke jenses!
das doppelte <li> ist jetzt verschwunden. Leider wird für den aktiven-Zustand kein entsprechendes class="active" und kein <a href=""> in das <li> generiert. Die 6 Unterpunkte von "Studium" werden ebenfalls nicht angezeigt.

Hier der jetzige Code nach Deiner Änderung (Studium ist angeclickt):

<div id="navcontainer">
   <ul id="navlist">
     <li><a href="4.0.html">News</a></li>
     <li>Studium</li>
     <li><a href="6.0.html">Studenten</a></li>
     <li><a href="7.0.html">Dozenten</a></li>
     <li><a href="8.0.html">Jobs</a></li>
     <li><a href="9.0.html">Netzwerk</a></li>
   </ul>
</div>

Und hier das aktuelle TS:

 # Menü links
       MENU_LINKS = HMENU  
       MENU_LINKS { 
             special = directory
             special.value = 2 
         1 = TMENU  
         1 {  
           wrap = <div id="navcontainer"><ul id="navlist">|</ul></div> 
           noBlur = 1  
           NO {  
                 wrapItemAndSub = <li>|</li>  
                 stdWrap = upper  
                 }  
           ACT < .NO  
             ACT.wrap = <li class="active">|</li>
             CUR < .ACT  
             CUR.wrap = <li class="active">|</li> 
             CUR.doNotLinkIt = 1  
             CUR = 1  
           } 
           2 < .1 
           2.wrap = <li class="sub">|</li>  
           2.CUR.stdWrap.wrap = <li class="sub-active">|</li>
  
           }

Weiss jemand Rat? Danke.

NoFugo ·

Leider komme ich nicht weiter. Muss

CUR.doNotLinkIt = 1

eigentlich auf "1" stehen? Bei "0" wird mir das Menü zumindest "richtig" angezeigt. Allerdings immer noch ohne "class="active" und der Unterpunkte von Studium ... #angry#

jenses ·

Versuchs mal hiermit :

MENU_LINKS = HMENU 
MENU_LINKS {
	special = directory
	special.value = 2
	1 = TMENU 
	1 { 
		wrap = <div id="navcontainer"><ul id="navlist">|</ul></div>
		noBlur = 1 
		NO { 
			wrap = <li>|</li> 
			stdWrap = upper 
		} 
		ACT < .NO 
		ACT = 1 
		ACT.wrap = <li class="active">|</li>
		ACTIFSUB < .ACT 
		ACTIFSUB = 1 
		ACTIFSUB.wrap = <li class="active">|	
	}
	2 < .1
	2.wrap = <ul>|</ul></li> 
}

Es sollen doch verschachtelte Listen als Menü werden, oder ?

jenses