[Datug] xHTML Valide Navigation mit UL und LI mit mehr als einer Ebene

[Andreas Kothe]

ich glaube sein Problem war nicht, ein Menü mit LI UL zu erstellen,
sondern nur, es im Typo3-Setup so einzustellen, dass das LI und UL
richtig geschachtelt wird und das ist durchaus ein Problem, vor
dem ich auch schon gestanden habe und das ich nicht lösen konnte.

Meine Lösung war dann einfach, bei tieferen Menü-Ebenen ein
transparentes GIF zu benutzen um die Menüeinträge des Untermenüs
einzurücken.

Hier der dadurch entstandene Quellcode:

<div id="menu">
  <ul>
   <li>
    <img src="collapse.gif" align="absmiddle"><a href="Startseite.193.0.html" 
class="subFirst">Startseite</a>
   </li>
   <li>
    <img src="collapse.gif" align="absmiddle"><a href="News.196.0.html" class="subFirst">News</a></li>
   <li>
   <li>
    <img src="expand.gif" align="absmiddle"><a href="Downloads.344.0.html" 
class="subFirstActive">Downloads</a>
   </li>
   <li>
    <img src="clear.gif" width="15" height="1"><img src="collapse.gif" align="absmiddle"><a 
href="Hintergrundbilder.350.0.html" class="subSecond">Hintergrundbilder</a>
   </li>
   <li>
    <img src="clear.gif" width="15" height="1"><img src="expand.gif" align="absmiddle"><a 
href="Themes.527.0.html" class="SubSecondActive">Themes</a>
   </li>
   <li>
    <img src="collapse.gif" align="absmiddle"><a href="Links.198.0.html" class="subFirst">Links</a>
   </li>
</ul>
</div>



...das "clear.gif" rückt hier das Untermenü ein um 15 Pixel. Das Ganze kann man
z.B. auf www.cx65.de "in Action" sehen wie es aussieht, wenn man das ganze noch mit
einem Stylesheet "schmückt"...  :)

Hier noch der Typo3-Setup-Code:


marks.MENU = HMENU
marks.MENU {
       entryLevel = 0
       expAll = 0
       noBlur = 1

1 = TMENU
1 {
   noBlur = 1
   wrap = <tr><td nowrap><div id="menu"><ul> | </ul></div></td></tr>
   NO {
     linkWrap= <li><img src="collapse.gif" align="absmiddle">|</li>
     ATagParams = class="subFirst"
   }
   ACT < .NO
   ACT = 1
   ACT {
     linkWrap= <li><img src="expand.gif" align="absmiddle">|</li>
     ATagParams = class="subFirstActive"
   }
}


2 = TMENU
2 {
   noBlur = 1
   NO {
     linkWrap= <li><img src="clear.gif" width="15" height="1"><img src="collapse.gif" 
align="absmiddle">|</li>
     ATagParams = class="subSecond"
   }
   ACT < .NO
   ACT = 1
   ACT {
     linkWrap= <li><img src="clear.gif" width="15" height="1"><img src="expand.gif" 
align="absmiddle">|</li>
     ATagParams = class="SubSecondActive"
   }
  }

}



Ingo Schommer wrote:

> hallo
> 
> öhm, eigentlich kein problem <li> und <ul> zu verschachteln.
> das "so sollte es sein"-bsp is doch ok afaik.
> 
> gucksu hier http://css.maxdesign.com.au/listamatic/ für beispiele
> bzw. hier 
> http://www.accessify.com/tools-and-wizards/list-o-matic/list-o-matic.asp
> zum generieren.
> 
> gruesse
> ingo
> 
> m.uhl at mh-online.de wrote:
> 
>> Hallo Liste :)
>>
>> Ich hab ein Problem mit der Navigation wenn ich ein Menu scripte
>> wird das nicht xHTML valid da ja das LI gechlossen wird und dann
>> erst ein UL kommt.
>>
>> Wenn jemand nen Tip hat wäre das sehr nett
>> danke
>>
>> gruss
>> mathias
>>
>>
>>
>> BSP sieht es aus:
>>
>> <ul class="VERTICAL_TEXTMENU_MENU_TO_3">
>>
>> << SNIP >>
>>
>> <li class="VERTICAL_TEXTMENU_MENU_TO_3_ACT">
>>   <a href="Typen_Uebersicht.3.0.html" onfocus="blurLink(this);">
>>    Typen Übersicht
>>   </a>
>> </li>
>>
>>   <ul class="VERTICAL_TEXTMENU_MENU_TO_3_LVL2">
>>     <li class="VERTICAL_TEXTMENU_MENU_TO_3_NO_LVL2">
>>      <a href="TYP___Ueberschrift.28.0.html" onfocus="blurLink(this);">
>>       TYP : Überschrift
>>      </a>
>>     </li>
>>    </ul>
>>
>> << SNIP >>
>>
>> </ul>
>>
>>
>> BSP so sollte es sein:
>>
>> <ul class="VERTICAL_TEXTMENU_MENU_TO_3">
>>
>> << SNIP >>
>>
>> <li class="VERTICAL_TEXTMENU_MENU_TO_3_ACT">
>>   <a href="Typen_Uebersicht.3.0.html" onfocus="blurLink(this);">
>>    Typen Übersicht
>>   </a>
>>   <ul class="VERTICAL_TEXTMENU_MENU_TO_3_LVL2">
>>     <li class="VERTICAL_TEXTMENU_MENU_TO_3_NO_LVL2">
>>      <a href="TYP___Ueberschrift.28.0.html" onfocus="blurLink(this);">
>>       TYP : Überschrift
>>      </a>
>>     </li>
>>    </ul>
>> </li>
>>
>> << SNIP >>
>>
>> </ul>
>>
>> Typoscript dazu:
>>
>> MENU_TO_3 {
>>    1 = HMENU
>>    1 {
>>        entryLevel = 0
>>        1 = TMENU
>>        1 {
>>            collapse = 0
>>            wrap = <ul class="VERTICAL_TEXTMENU_MENU_TO_3"> | </ul>
>>            NO {
>>            linkWrap = <li class="VERTICAL_TEXTMENU_MENU_TO_3_NO">|</li>
>>            }
>>            ACT = 1
>>            ACT {
>>            linkWrap = <li class="VERTICAL_TEXTMENU_MENU_TO_3_ACT">|</li>
>>            }           
>>        }
>>        2 = TMENU                                                    2 {
>>            collapse = 0
>>            wrap = <ul class="VERTICAL_TEXTMENU_MENU_TO_3_LVL2"> | </ul>
>>            NO {
>>            linkWrap = <li 
>> class="VERTICAL_TEXTMENU_MENU_TO_3_NO_LVL2">|</li>
>>            }
>>            ACT = 1
>>            ACT {
>>            linkWrap = <li 
>> class="VERTICAL_TEXTMENU_MENU_TO_3_ACT_LVL2">|</li>
>>            }
>>        }
>>        3 = TMENU                                                    3 {
>>            collapse = 0
>>            wrap = <ul class="VERTICAL_TEXTMENU_MENU_TO_3_LVL3"> | </ul>
>>            NO {
>>            linkWrap = <li 
>> class="VERTICAL_TEXTMENU_MENU_TO_3_NO_LVL3">|</li>
>>            }
>>            ACT = 1
>>            ACT {
>>            linkWrap = <li 
>> class="VERTICAL_TEXTMENU_MENU_TO_3_ACT_LVL3">|</li>
>>            }   
>>        }       
>>    }
>> }
>>
>>
>> _______________________________________________
>> Datug mailing list
>> Datug at datug.de
>> http://lists.datug.de/cgi-bin/mailman/listinfo/datug
>>
>>
>>  
>>
> 
> _______________________________________________
> Datug mailing list
> Datug at datug.de
> http://lists.datug.de/cgi-bin/mailman/listinfo/datug
> 
>