Wie wird ein Menü als Punkteliste generiert?

Ein Menü als Punkteliste und nicht als GMENU aufzubauen hat verschiedene Vorteile:

  1. Die Übertragungszeit der Seite ist schneller.
  2. Schriften wirken schärfer als die, die der GIFBUILDER erzeugt
  3. Wenn der Text zu lang werden sollte, wird automatich eine neue Zeile angefangen. Der Text steht dabei in jeder Zeile immer bündig untereinander.
  4. Die so erzeugten Menüeinträge sind "barrierefrei"
  5. Die Suchmaschinen können die Links hervorragend analysieren

Das Punkteliste-Menü baut dabei auf das normale TMENU auf.

TypoScript (Setup)

  1. page.10.marks.MENU = HMENU
  2. page.10.marks.MENU {
  3.         special = directory
  4.         special.value = 5
  5.         entryLevel = 0
  6.         1 = TMENU
  7.         1 {
  8.                 noBlur = 1
  9.                 wrap = <ul>|</ul>
  10.                 NO = 1
  11.                 NO {
  12.                       ATagTitle.field = abstract // description // title
  13.                         wrapItemAndSub = <li>|</li>
  14.                 }
  15.                 CUR < .NO
  16.                 CUR.doNotLinkIt = 1
  17.         }
  18.         2 < .1
  19.         3 < .1
  20. }

Beschreibung des Sourcecodes:

In der Zeile 1 wird dem Marker MENU das cObjekt HMENU zugewiesen.

In diesem Beispiel wird der Einstiegspunkt für das Menü auf die Seite mit der ID 5 gelegt. Für die generierung der 2. Menüebene gibt man hier noch die Seitenbaum-Ebene an, ab der die 2. Menüebene generiert werden soll.

In den Zeile 6-19 wird dann die erste Menüebene definiert.

Das noBlur = 1 wird nur benötigt, wenn die Seite möglichst barrierefrei sein soll.

In Zeile 9 wird die komplette 1. Menüebene mit dem <ul>-Tags umschlossen.
Anstatt der linkWraps muss nun wrapItemAndSub verwendet werden. Somit wird jetzt ein Link ohne Untermenü mit <li>...</li> umschlossen; ein Link mit Untermenü allerdings nur mit <li>... . Dadurch, das die nächste Menüebene wieder mit einem <ul>-Tag anfängt, wird die Punkteliste sauber generiert.

Zeile 12 sorgt noch dafür, daß jedem Link ein <title>-Tag aus dem Datenbankfeld mitgegeben wird.
Wenn in den Datenbankfeldern der Seite sowohl abstract als auch description nicht eingetragen ist, wird zumindest der Seitentitel eingetragen.

Zeile 15 kopiert die Definition noch vom Normal-Zustand in den Zustand, der aktiv ist, wenn die Seite geöffnent ist.

Zeile 16 entfernt nun noch den Link auf diese Seite, da er hier nicht notwendig und bei barrierefreien Seiten auch nicht gewünscht ist.

Diese Definition wird dann nur noch in Zeile 18 und 19 für die 2. und 3. Menüebene generiert.

Nun kann man diese Menü mit CSS grafisch noch verfeinern. Ein paar Beispiele wird es mit der nächsten Bearbeitung dieses Tutorials geben.


Kommentare von registrierten Benutzern:

Kommentar von: Emil Petkov

17. 02. 2009, 12:19
Da ein Link nicht auf die gerade aktuelle Seite zeigen sollte, wird der Link der aktuellen Seite herausgenommen und mit einem strong-Tag ersetzt. Bei einem Link aus der zweiten Ebene wird zusätzlich der übergeordnete Link der ersten Ebene mit einem em-Tag gezeichnet.
So ist für den User sein momentaner Standort auch ohne CSS erkennbar.

XHTML 1.0 Strict konforme Listennavigation erzeugen nach dem folgenden Schema:
Html4strict:Zeilennummerierung:  An / Aus

  1. <ul>
  2.         <li><a>A</a>
  3.                 <ul>
  4.                         <li><a>Aa</a></li>
  5.                         <li><a>Ab</a></li>
  6.                         <li><a>Ac</a></li>
  7.                 </ul>
  8.         </li>
  9.         <li><a><em>B</em></a>
  10.                 <ul>
  11.                         <li><strong>Ba</strong></li>
  12.                         <li><a>Bb</a></li>
  13.                         <li><a>Bc</a></li>
  14.                         <li><a>Bd</a></li>
  15.                 </ul>
  16.         </li>
  17.         <li><a>C</a>
  18.                 <ul>
  19.                         <li><a>Ca</a></li>
  20.                         <li><a>Cb</a></li>
  21.                         <li><a>Cc</a></li>
  22.                         <li><a>Cd</a></li>
  23.                 </ul>
  24.         </li>
  25.         <li><a>D</a>
  26.                 <ul>
  27.                         <li><a>Da</a></li>
  28.                         <li><a>Db</a></li>
  29.                         <li><a>Dc</a></li>
  30.                 </ul>
  31.         </li>
  32. </ul>

Ausschnitt aus dem Template (TemplaVoila):
Html4strict:Zeilennummerierung:  An / Aus

  1. <body>
  2.         .............................
  3.         <ul id="mainNav">mainNav</ul>
  4.         .............................
  5. </body>

Mapping:
TypoScript Object Path -> lib.mainnav
Mapping rules -> ul:INNER
TypoScript (Setup):
Typoscript:Zeilennummerierung:  An / Aus

  1. # Hauptnavigation
  2. lib.mainnav = HMENU
  3. lib.mainnav {
  4.         entryLevel = 0
  5.         1 = TMENU
  6.         1 {
  7.                 noBlur = 1
  8.                 expAll = 1
  9.                 NO = 1
  10.                 NO {
  11.                         wrapItemAndSub = <li>|</li>
  12.                         }
  13.                 CUR = 1
  14.                 CUR {
  15.                         wrapItemAndSub = <li>|</li>
  16.                         doNotLinkIt = 1
  17.                         ATagBeforeWrap = 1
  18.                         linkWrap = <strong>|</strong>
  19.                         }
  20.                 ACTIFSUB = 1
  21.                 ACTIFSUB {
  22.                         wrapItemAndSub = <li>|</li>
  23.                         ATagBeforeWrap = 1
  24.                         linkWrap = <em>|</em>
  25.                         }
  26.                 }
  27.         2 = TMENU
  28.         2 {
  29.                 noBlur = 1
  30.                 wrap = <ul>|</ul>
  31.                 NO = 1
  32.                 NO {
  33.                         allWrap = <li>|</li>
  34.                         }
  35.                 CUR = 1
  36.                 CUR {
  37.                         ATagBeforeWrap = 1
  38.                         linkWrap = <li><strong>|</strong></li>
  39.                         doNotLinkIt = 1
  40.                         }
  41.                 }
  42.         }

Um auch aufwendige CSS-Gestaltung der Navigation zu ermöglichen, können wir (wie hier im Forum mehrfach erklärt) die verschiedene Zustände der Listenpunkte durch TypoScript mit class oder id ausstatten lassen.
Alternativ können wir den Listen der ersten Ebene id-s (mit Hilfe der OptionSplit) vergeben. Dazu bekommen die body-Tags der ersten Seiten-Ebene class-en.

Profil

Kommentar von: berbluesea

11. 11. 2008, 22:30
hallo - gibt es für dieses XHTML Menü schon eine Lösung?

Profil

Kommentar von: Pfannkuchen

12. 09. 2007, 12:47
das funzt perfekt

Typoscript:Zeilennummerierung:  An / Aus

  1. temp.nav_sub {
  2.  noBlur = 1
  3.  wrap =  <div id="submenu">| </div>
  4.  entryLevel =2
  5.  excludeUidList =
  6.    
  7.       1 = TMENU
  8.       1 {
  9.    noBlur = 1
  10.    expAll = 0
  11.    wrap = <ul>|</ul>
  12.  NO = 1
  13.  NO.allWrap = <li >|</li>
  14.  ACT = 1     
  15.  ACT.wrapItemAndSub = <li  class="current">|</li>
  16.  ACTIFSUB = 1
  17.  ACTIFSUB.allWrap = <li class="current" >|   
  18. }
  19. }   
  20.   2 = TMENU
  21.   2 {
  22.      noBlur = 1
  23.      wrap = <ul>|</ul></li>
  24.      expAll = 0
  25.     NO = 1
  26.     NO.allWrap = <li >|</li>
  27.     ACT = 1     
  28.     ACT.wrapItemAndSub = <li  class="current">|</li>
  29.     ACTIFSUB = 1
  30.     ACTIFSUB.allWrap = <li class="current" >|
  31. }
  32.     3 < .2
  33.     4 < .2
  34. }


Profil

Kommentar von: sunfish

27. 07. 2007, 9:19
Hier ist ein etwas umfangreicherer, XHTML konformer Vorschlag für ein hierarchisch nummeriertes Menü.

Anforderung war, dass ein Zweig des Seitenbaums auf allen Seiten als submenu zu sehen ist.

Vielen Dank an Joey (J. Hasenau, TypoScript Experte), der den Grundvorschlag im Typo3 Kochbuch gemacht hat und der den Feinschliff für dieses Beispiel beisteuerte.

So ist das ausgegebene Submenü aufgebaut:
Html4strict:Zeilennummerierung:  An / Aus

  1. <div id="submenu">
  2. <h3 class="hidden"><dfn>3</dfn> Screenreader Überschrift für den Zweig des Seitenbaums</h3>
  3. <ul>
  4. <li><a><dfn>3.1</dfn> Seite 1</a><span class="hidden">.</span></li>
  5. <li><a><dfn>3.2</dfn> Seite 2</a><span class="hidden">.</span>
  6.   <ul>
  7.   <li><a><dfn>3.2.1</dfn> Unterseite 1</a><span class="hidden">.</span></li>
  8.   <li><a><dfn>3.2.2</dfn> Unterseite 2</a><span class="hidden">.</span></li>
  9.   </ul>
  10. </li>
  11. <li><a><dfn>3.32</dfn> Seite 3</a><span class="hidden">.</span></li>
  12. </ul>
  13. </div>


Typoscript:Zeilennummerierung:  An / Aus

  1. #temp.submenu
  2.  
  3. temp.submenu = COA
  4. temp.submenu {
  5.    10 = HMENU
  6.    10 {
  7.       special = directory
  8.       special.value = 29
  9.       #entryLevel = 1
  10.       1 = TMENU
  11.       1 {
  12.          noBlur = 1       
  13.          wrap = <ul>|</ul>
  14.          NO = 1
  15.          NO {
  16.             linkWrap = |<span class="hidden">.</span>
  17.             wrapItemAndSub = <li>|</li>
  18.                        
  19.             stdWrap.prepend = COA
  20.             stdWrap.prepend {
  21.                10 = LOAD_REGISTER
  22.                10 {
  23.                      # L2N: Level2Number
  24.                      tempN.data = register:L2N
  25.                      tempN.wrap = |+1
  26.                      L2N.data = register:tempN
  27.                      L2N.prioriCalc = 1
  28.                      L3N = 0
  29.                 }
  30.                 20 = COA
  31.                 20 {
  32.                      stdWrap.noTrimWrap = |<dfn>3.|</dfn> |
  33.                      10 = TEXT
  34.                      10.data = register:L2N
  35.                 }
  36.             }
  37.          }
  38.          ACT < .NO 
  39.          ACT = 1
  40.          ACT {
  41.             wrapItemAndSub = <li class="parent">|</li>                       
  42.          }     
  43.          CUR < .NO 
  44.          CUR = 1
  45.          CUR {
  46.             linkWrap = <span class="current">|</span><span class="hidden">.</span>
  47.             doNotLinkIt = 1
  48.          }
  49.       }
  50.  
  51.       2 < .1
  52.       2 {
  53.          NO.stdWrap.prepend {
  54.             10 {
  55.                # L3N: Level1Number
  56.                tempN.data = register:L3N
  57.                L2N >
  58.                L3N.data = register:tempN
  59.                L3N.prioriCalc = 1
  60.             }
  61.             20 {
  62.                10.wrap = |.
  63.                20 = TEXT
  64.                20.data = register:L3N
  65.             }
  66.          }
  67.       }
  68.    }
  69. }
  70.  
  71. # in the rootline of the active submenu no 'directory' but 'entryLevel' for subsubmnues
  72. [PIDinRootline = 29]
  73.     temp.submenu.10.special >
  74.     temp.submenu.10.entryLevel = 1
  75.  
  76. # Home page without subemnu
  77. [globalVar = TSFE:id = 47]
  78.      temp.submenu >
  79.      temp.submenu = TEXT
  80.      temp.submenu.value =
  81. [END]


Anmerkungen:

1. Das Menü wurde mit der Eigenschaft "special = directory" angelegt. So kann es auf allen Seiten angezeigt werden. "special = directory" erlaubt aber nur die Darstellung einer Menüebene und zeigt keine Submenüs an. Daher wird in der Rootline des im Menü dargestellten Zweigs des Seitenbaums die Eigenschaft special gelöscht und statt dessen der passende "entryLevel" definiert. Auf der Startseite soll das Submenü nicht angezeigt werden, daher wird dort der Marker mit dem Text "" (Nichts) versehen.

2. Der unsichtbare Punkt (für den Screenreader, der dadurch die Stimme etwas senkt) soll nach jedem Link stehen, auch wenn ein Submenü folgt, das vom <li>-Tag eingeschlossen wird. Daher wird zweimal ge-wrapt. Einmal der Link (linkWrap) und einmal das Item einschließlich des Submenüs (wrapItemAndSub).

3. Die Nummerierung wird per CSS ebenfalls unsichtbar formatiert (weit aus dem Blickfeld gerückt). Der nachfolgende Linktext soll mit einem Leerzeichen beginnen. Da in einem COA-Element "noTrimWrap" nicht möglich ist, braucht es ein "stdWrap.noTrimWrap = |<dfn>3.|</dfn> |" (Danke an Jooey). Die Pipes zeigen Anfang und Ende des umgebenden Strings an. Das Pipe in der Mitte ist der Platzhalter für die nachfolgende Zahl der Nummerierung.

4. Die im ersten NO-Element festgelegten Eigenschaften, werden an die anderen Zustände weitestmöglich kopiert, so dass das Typoscript einigermaßen übersichtlich bleibt. ACT und CUR Definitionen vererben sich automatisch in nächste Ebene. Dort muss nur überschrieben werden, was sich von der ersten Ebene unterscheidet.

5. Wie das mit der Nummerierung genau funktioniert kann im Typo3 Kochbuch nachgelesen werden.

CSS- Beispiel dazu:
Html4strict:Zeilennummerierung:  An / Aus

  1. <style type="text/css">
  2. .hidden, dfn {
  3.     position: absolute;
  4.     left: -1000px;
  5.     top: -10000px;
  6.     width: 0;
  7.     height: 0;
  8.     overflow:hidden;
  9.     display:inline;
  10. }
  11.  
  12.  
  13. #submenu {
  14.         float: left;
  15.         width: 191px;
  16. }
  17.  
  18. #submenu ul{
  19.         margin: 0;
  20.         padding: 0;
  21.         list-style: none;
  22. }
  23.  
  24. #submenu li{ 
  25.         margin: 0 0 2px 0;
  26. }
  27. *html #submenu li{ 
  28.         margin: 0;
  29.         border-bottom: 2px solid #fff;
  30. }
  31. *html #submenu ul ul{
  32.         margin: 0 0 -2px 0;
  33. }
  34.  
  35. #submenu ul a,
  36. #submenu ul a:link,
  37. #submenu ul a:visited,
  38. #submenu ul .current {
  39.         display: block;
  40.         padding: 5px 5px 4px 8px;
  41.         color: #fff;
  42.         background-color: #0075A1;
  43.         text-decoration: none;
  44. }
  45.  
  46. #submenu ul a:hover,
  47. #submenu ul .current,
  48. #submenu ul li.parent a,
  49. #submenu ul li.parent a:link,
  50. #submenu ul li.parent a:visited {
  51.         color: #fff;
  52.         background-color: #0087B7;
  53. }
  54.  
  55.  
  56. #submenu ul ul a,
  57. #submenu ul ul a:link,
  58. #submenu ul ul a:visited,
  59. #submenu ul li.parent ul a,
  60. #submenu ul li.parent ul a:link,
  61. #submenu ul li.parent ul a:visited,
  62. #submenu ul li.parent ul .current{
  63.         display: block;
  64.         padding: 5px 5px 4px 8px;
  65.         color: #0075A1;
  66.         background-color: #d2f0ff;
  67. }
  68. #submenu ul ul a:hover,
  69. #submenu ul li .current ul a:hover,
  70. #submenu ul li.parent ul a:hover,
  71. #submenu ul li.parent ul .current{
  72.         font-weight: bold;
  73.         padding-left: 22px;
  74.         background-image: url(img/submenu_bullet.gif);
  75.         background-position: 10px;
  76.         background-repeat: no-repeat;
  77. }
  78. </style>


Profil

Kommentar von: zei

26. 06. 2007, 14:12
auch für Typo3 1.4.1 :

XHTML konform
Das Haupt und das Submenü sind auf zwei unterschiedliche Marker gelegt, was aber eine Anpassung auf jede Unterseite des Hauptmenüs erfordert. Danach werden die Unterseiten in der Liste des Submenüs als Unterpunkte dargestellt.

Außerdem wird vor jedem Submenüpunkt ein >> geschrieben, welches bei der aktiver Seite Rot erscheinen; dies ist für die Ausgabe mit CSS Formatierung gedacht, wenn die Listenpunkte ausgeblendet werden.


Typoscript:Zeilennummerierung:  An / Aus

  1. MENU = HMENU
  2.     MENU {
  3.      wrap = <ul> | </ul>
  4.      special = directory
  5.      special.value = 23
  6.      1 = TMENU
  7.      1.NO = 1
  8.      1.NO.linkWrap = <li> | </li>
  9.      1.ACT < .1.NO
  10.      1.ACT.linkWrap = <li id="fest"> | </li>
  11.     }
  12.    
  13.     SUBMENU = COA
  14.     SUBMENU {
  15.     10 = TEXT
  16. ################# Titel #############################################
  17.     10.value = <p>Titel</p>
  18. #####################################################################
  19.     20 = HMENU
  20.     20 {   
  21.      wrap = <ul> | </ul>
  22.      special = directory
  23. ################# Seiten ID #########################################
  24.      special.value = xxx
  25. #####################################################################
  26.      1 = TMENU
  27.      1.NO = 1
  28.      1.NO.linkWrap = <li>»  | </li>
  29.      1.ACT < .1.NO
  30.      1.ACT.linkWrap = <li><font color="red">» </font> | </li>
  31.      2 < .1
  32.      2.NO = 2
  33.      2.NO.linkWrap = <ul><li>»  | </li></ul>
  34.      2.ACT < .2.NO
  35.      2.ACT.linkWrap = <ul><li><font color="red">» </font> | </li></ul>
  36.      3 < .1
  37.      3.NO = 3
  38.      3.NO.linkWrap = <ul><ul><li>»  | </li></ul></ul>
  39.      3.ACT < .3.NO
  40.      3.ACT.linkWrap = <ul><ul><li><font color="red">» </font> | </li></ul></ul>
  41.     }
  42.     }


Profil

Kommentar von: olibert

16. 12. 2006, 15:40
Folgendes TS erzeugt XHTML-konformen Output:

Typoscript:Zeilennummerierung:  An / Aus

  1. MENU_MAIN = HMENU
  2.    MENU_MAIN {
  3.       special = directory
  4.       special.value = xxx
  5.       1 = TMENU
  6.       1.wrap = <ul>|</ul>
  7.       1.NO = 1
  8.       1.NO.linkWrap = <li>|</li>
  9.       1.ACT = 1
  10.       1.ACT.linkWrap = <li class="l1_act">|</li>
  11.       1.ACTIFSUB = 1
  12.       1.ACTIFSUB.linkWrap = <li class="l1_act">|
  13.       2 = TMENU
  14.       2.wrap = <ul>|</ul></li>
  15.       2.NO = 1
  16.       2.NO.linkWrap = <li>|</li>
  17.       2.ACT = 1
  18.       2.ACT.linkWrap = <li class="l2_act">|</li>
  19.       3 = TMENU
  20.       3.wrap = <li><ul>|</ul></li>
  21.       3.NO = 1
  22.       3.NO.linkWrap = <li>|</li>
  23.       3.ACT = 1
  24.       3.ACT.linkWrap = <li class="l3_act">|</li>
  25.       }


Profil

Kommentar von: Jan

22. 11. 2006, 8:58
habe mir den code von stephan mal angesehen und festgestellt das es anders herum "besser" funktioniert!
Typoscript:Zeilennummerierung:  An / Aus

  1. temp.navi = HMENU
  2. temp.navi {
  3.          1 = TMENU
  4.          1{
  5.             expAll = 1 #<--Alle Level ausklappen z.B. für dropdown menüs mit hover
  6.  
  7.             noBlur = 1
  8.          #Äuserer Rahmen
  9.             wrap = <ul id="Navigation">|</ul>
  10.             NO = 1
  11.             NO{
  12.                linkWrap = <li> |
  13.                IFSUB = 0
  14.                IFSUB.linkWrap = <li> | </li>
  15.               }
  16.             ACTIFSUB = 0
  17.             ACTIFSUB.linkWrap = <li> | </li>
  18.          }
  19.          2 = TMENU
  20.          2{
  21.             expAll = 1
  22.             NO =1
  23.             wrap = <ul id="L2"> | </ul></li>
  24.             NO.linkWrap = <li> | </li>
  25.          }
  26.       }


hiermit moch mal vielen dank für das script!

Profil

Kommentar von: Jan

21. 11. 2006, 22:33
hat eigentlich jemand ne lösung für das, was
adventuremaker geschrieben hat?
Html4strict:Zeilennummerierung:  An / Aus

  1. <ul>
  2. <li>Seite 1</li>
  3. <li>Seite 2
  4.   <ul>
  5.   <li>Unterseite 1</li>
  6.   <li>Unterseite 2</li>
  7.   </ul>
  8. </li>
  9. <li>Seite 3</li>
  10. </ul>
[/JAVASCRIPT]

Profil

Kommentar von: Christian

30. 09. 2006, 19:11
Hi,
bei mir funktioniert das Menü gar nicht! Warum???

Profil

Kommentar von: Andreas

09. 08. 2006, 19:04
Mal noch was für Anfänger.

Wie geh ich denn dabei vor wenn ich IDs genutzt hab um die anzuwenden? Habs bisher nur an Klassen gesehen:


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 15px;
line-height: 16px;
font-size: 13px;
height: 17px;
}

DIV#menu ul ul a {
display: block;
padding-left: 35px;
background-image: url(images/link_sub.jpg);
background-repeat: no-repeat;
padding: 3px 3px 5px 20px;
font-weight: normal;
}

Profil

Kommentar von: cyberworks

06. 08. 2006, 18:23
Hallo,

ich hab folgendes Menü XHTML strict bekommen:
Typoscript:Zeilennummerierung:  An / Aus

  1. seite.10.marks.LISTE = HMENU
  2. seite.10.marks.LISTE.entryLevel = 0
  3. seite.10.marks.LISTE {
  4.         1 = TMENU
  5.         1 {
  6.                 expAll = 0
  7.                                 wrap = <ul class="ullevel1">|</ul>
  8.                 noBlur = 1
  9.                                 NO.wrapItemAndSub = <li class="level_1_NO">|</li>
  10.                                 NO.ATagTitle.field = title
  11.                 IFSUB = 1
  12.                                 IFSUB.ATagTitle.field = title
  13.                                 IFSUB.wrapItemAndSub = <li class="level_2_ACT">|</li>
  14.                 ACTIFSUB < .IFSUB
  15.  
  16.         }
  17.         2 < .1 
  18.         2.wrap = <ul class="ullevel2">|</ul>
  19.                 2.NO.ATagTitle.field = title
  20.         3 < .2
  21.  
  22. }


LG und viel Spass
Alex

Profil

Kommentar von: thomasju

17. 07. 2006, 17:07
Hallo zusammen,

wie würde denn nun das TS für das letzte Menü aussehen?

<ul>
<li>Seite 1</li>
<li>Seite 2
<ul>
<li>Unterseite 1</li>
<li>Unterseite 2</li>
</ul>
</li>
<li>Seite 3</li>
</ul>

Ich bekomm das einfach nicht hin. Danke für die Hilfe.

Profil

Kommentar von: dennis

04. 04. 2006, 13:22
hoi!
genau das problem hab ich auch!
rein optisch kommt zwar geknaupe auch hin, aber xhtml-konform is es nich :-(

hab folgendes probiert:

Typoscript:Zeilennummerierung:  An / Aus

  1. temp.menu = HMENU
  2. temp.menu.entryLevel = 0
  3. temp.menu {
  4.    1 = TMENU
  5.    1.expAll = 0
  6.    1 {
  7.         NO {
  8.            ATagTitle.cObject = TEXT
  9.            ATagTitle.cObject.dataWrap = {field:title}|
  10.            ATagBeforeWrap = 1
  11.            ATagParams = class="menu_noact"
  12.            allWrap = <li>|</li>
  13.            }
  14.         CUR = 1
  15.         CUR {
  16.             allWrap = <li>|</li>
  17.             ATagParams = class="menu_act"
  18.             }
  19.        }
  20.     2 = TMENU
  21.     2.wrap =<ul class="submenu">|</ul></li>
  22.     2 {
  23.          NO {
  24.             ATagTitle.cObject = TEXT
  25.             ATagTitle.cObject.dataWrap = {field:title}|
  26.             ATagBeforeWrap = 1
  27.             ATagParams = class="submenu_noact"
  28.             allWrap = <li>|</li>
  29.             }
  30.          CUR = 1
  31.          CUR {
  32.              allWrap =<li>|</li>
  33.              ATagParams = class="submenu_act"
  34.              }
  35.         }
  36. }

, was natürlich nich wirklich gehn kann.

ich müßte auf der hauptebene n spezielles wrap, was sagt, ifsub = wrap <li>|

geht sowas überhaupt?
versucht hab ichs noch nich da ich vermute, dass das geöffnete tag auch wieder automatishc geschlossen wird;

das <ul>|</ul></li> geht auch nicht, ignoriert er einfach...

bin mit meinem noch bescheidenen latein am ende.
ich brauch halt unbedingt ne TMENU lösung,xhtml-konform und am besten sofort :-D

in erwartung auf einen geistesblitz
greez
phil


Profil

Kommentar von: Stephan

09. 03. 2006, 13:15
Mein (einfacher) Vorschlag für die Html-Strict Version von adventuremaker wäre folgender:

Typoscript:Zeilennummerierung:  An / Aus

  1. temp.navi = HMENU
  2. temp.navi {
  3.    1 = TMENU
  4.    1{
  5.       noBlur = 1
  6.       wrap = <ul class="naviL1">|</ul>
  7.       NO = 1
  8.       NO.linkWrap = <li class="naviL1"> | </li>
  9.       ACTIFSUB = 1
  10.       ACTIFSUB.linkWrap = <li class="naviL1"> |
  11.    }
  12.    2 = TMENU
  13.    2{
  14.       NO =1
  15.       wrap = <ul class="naviL3"> | </ul></li>
  16.       NO.linkWrap = <li class="naviL3"> | </li>
  17.    }
  18. }


Wenn also Unterpunkte vorhanden sind dann wird das <li> Tag einfach erst im wrap der nächsten Ebene zugemacht.

Profil

Kommentar von: Schulz

03. 02. 2006, 11:53
Hallo zusammen,
Ne frage habe ich: wie mache ich, dass 2.Menüebene (SUBMENU) oben erscheint (mit ###SUBMENU###), falls ich auf Eintrag drücke?


Kommentar von: Tobias Kivelip

18. 01. 2006, 18:44
Einfach

Typoscript:Zeilennummerierung:  An / Aus

  1. wrapItemAndSub = <li>|<li>


für die erste Ebene verwenden, dann wird <ul> innerhalb von <li> dargestellt.


Kommentar von: Juraj

01. 11. 2005, 22:45
Bei mir functioniert folgeder code


10 = HMENU
10{
1 = TMENU
1.wrap=<ul><li>|</li></ul>
1.NO = 1
1.NO.allWrap=| |*| </li><li>|
1.ACT.allWrap = | |*| </li><li>|

2 < .1
3 < .1
...
}



Kommentar von: Moeffz

25. 07. 2005, 19:46
Folgendes müßte XHTML-konform sein:

Typoscript:Zeilennummerierung:  An / Aus

  1. page.10.marks.MENU = HMENU
  2. page.10.marks.MENU {
  3.      stdWrap.required=1
  4.      stdWrap.wrap=<div id="menu_links">|</div>
  5.      entryLevel = 1
  6.      1 = TMENU
  7.      1 {
  8.         wrap = <ul id="lmenu">|</ul>
  9.         noBlur = 1
  10.         NO = 1
  11.         NO {
  12.            wrapItemAndSub = <li>|</li>
  13.            stdWrap = upper
  14.         }
  15.      }
  16.      2 < .1
  17.      2.wrap = <ul id="lmenu-ebene2">|</ul>
  18.      2.CUR.stdWrap.wrap = <div class="active2" title="Sie sind hier">|</div>
  19. }


Danach kann es mit CSS formatiert werden.


Kommentar von: maik

14. 07. 2005, 14:32
Es gab da mal ein Beitrag in der Mailinglist zu.
Ich meine da wurde
Typoscript:Zeilennummerierung:  An / Aus

  1. before
und
Typoscript:Zeilennummerierung:  An / Aus

  1. after
verwendet.

Wenn man dann bei
Typoscript:Zeilennummerierung:  An / Aus

  1. IFSUB
die
Typoscript:Zeilennummerierung:  An / Aus

  1. after
Eigenschaft leert, dann müsste dass hinhauen.

Das Submenü müsste dann dann halt noch der
Typoscript:Zeilennummerierung:  An / Aus

  1. wrap
modifiziert werden.
Typoscript:Zeilennummerierung:  An / Aus

  1. wrap = <ul> | </ul></li>
  2.  
  3. Der Ansatz war jedenfalls die Eigenschaft [TYPOSCRIPT]before
und
Typoscript:Zeilennummerierung:  An / Aus

  1. after
zu verwenden.[/TYPOSCRIPT]


Kommentar von: adventuremaker

07. 06. 2005, 19:22
Gibt es auch eine XHTML-konforme Variante?
Obiges Beispiel erzeugt ja folgendes HTML:
Html4strict:Zeilennummerierung:  An / Aus

  1. <ul>
  2. <li>Seite 1</li>
  3. <li>Seite 2</li>
  4.   <ul>
  5.   <li>Unterseite 1</li>
  6.   <li>Unterseite 2</li>
  7.   </ul>
  8. <li>Seite 3</li>
  9. </ul>

XHTML-konform müsste das Menü so aussehen:
Html4strict:Zeilennummerierung:  An / Aus

  1. <ul>
  2. <li>Seite 1</li>
  3. <li>Seite 2
  4.   <ul>
  5.   <li>Unterseite 1</li>
  6.   <li>Unterseite 2</li>
  7.   </ul>
  8. </li>
  9. <li>Seite 3</li>
  10. </ul>

Hintergrund: Das UL-Element muss innerhalb des LI-Elementes vorkommen.



Impressum | Kontakt | TYPO3-Hosting | TYPO3-Schulungen

Seite drucken
  
TYPO3 Version 4.2.6 testen

TYPO3 4.2.6 jetzt testen

Testen Sie die neue TYPO3 Version 4.2.6 kostenlos für einen Monat

Jetzt kostenlos testen

TYPO3 Schulungen

  • Berlin:
    Mit., 29.07.09 - Fre., 31.07.09
  • Espelkamp:
    Mit., 26.08.09 - Fre., 28.08.09
  • Würzburg:
    Mon., 21.09.09 - Mit., 23.09.09
  • Köln:
    Mon., 28.09.09 - Mit., 30.09.09