Aktueller Seitenpfad: > bruchmann-web > Home > Support > TYPO3 > Tipps und Tricks >  Navigation

Navigation

Navigation bzw. Menus

Menus werden in TYPO3 durch TypoScript definiert. Wie auch alle anderen TypoScript-Anweisungen werden die Menus damit zunächst durch die Datei /typo3/sysext/cms/tslib/class.tslib_content.php ausgwertet. Das eigentliche Frontend-Rendering der Menus findet standardmäßig durch die automatisch includierte Datei /typo3/sysext/cms/tslib/class.tslib_menu.php statt.
Auf Wunsch kann man zusätzlich oder statt dessen eigene Funktionen angeben, die das Rendering übernehmen bzw. ergänzen. In TypoScript können diesen Funktionen dann auch individuelle Parameter übergeben werden - eine entsprechende Auswertung muss in den Funktionen natürlich integriert werden.

Zentrale Linkeigenschaften

In TypoScript gibt es die Möglichkeit verschiedenste Linkeigenschaften zu erkennen und gesondert zu behandeln. Die beiden einfachsten Zustände sind der Standardlink NO und die aktuelle Seite CUR. Durch diese Unterscheidung ist es bereits möglich dem Link auf die aktuelle Seite ein anderes Aussehen zu verleihen oder den Seitentitel ohne Verlinkung anzuzeigen.

Für die Handhabung in TypoScript ist die Art der Ausgabe weitgehend unwesentlich. Menus können als Tabellen, Listen, oder Divisions (DIVs) ausgegeben werden - hier ist die Phantasie des Programmierers der begrenzende Faktor. Die Einbindung notewendiger StyleSheets (CSS) im Header des Templates ist ebenfalls sehr vielseitig möglich, somit sind der Gestaltung keine Grenzen gesetzt.

Aufgrund der Vielfalt möglicher HTML-, CSS-, und TypoScript-Codes und bei speziellen Bedürfnissen kann es bei Menus zu komplizierten Konstrukten kommen - Dieses Kapitel soll verschiedene Lösungsvorschläge für spezielle Problemstellungen anbieten.

Spezielles Rootline-Menü (Brotkrumen-Menü)

Rootline-Menus sind eine spezielle Form von Menus, wo vom Wurzelverzeichnis bis zur aktuellen Seite alle Seiten in hirarchischer Reihenfolge angeordnet werden. Ein einfaches Beispiel ist oben unter "Aktueller Seitenpfad:" zu sehen.

Nachfolgend wird ein Rootlinemenu aufgeführt, jedoch in einer etwas speziellen Form, nämlich daß die Seiten untereinander angezeigt und entsprechend ihrer Tiefe eingerückt werden. Außerdem ist die aktuelle Seite nicht verlinkt.

bruchmann-web
Home
Support
TYPO3
Tipps und Tricks
Navigation

 

  1. page.headerData.10 = TEXT
  2. page.headerData.10.value (
  3.   <style type="text/css">
  4.     .special_rootline {font-size:small}
  5.     .special_rootline .s_rootline {background:url(typo3/gfx/arrowright.png) no-repeat;padding-left:16px;font-weight:bold}
  6.     .special_rootline .s_rootline_level_0 {margin-left:0px}
  7.     .special_rootline .s_rootline_level_1 {margin-left:8px}
  8.     .special_rootline .s_rootline_level_2 {margin-left:16px}
  9.     .special_rootline .s_rootline_level_3 {margin-left:24px}
  10.     .special_rootline .s_rootline_level_4 {margin-left:32px}
  11.     .special_rootline .s_rootline_level_5 {margin-left:40px}
  12.     .special_rootline .s_rootline_level_6 {margin-left:48px}
  13.   </style>
  14. )
  15.  
  16. page.10 = HMENU
  17. page.10 {
  18.   wrap = <div class="special_rootline">|</div>
  19.   special = rootline
  20.   1 = TMENU
  21.   1.NO.linkWrap = |*| <div class="s_rootline s_rootline_level_0">|</div> || <div class="s_rootline s_rootline_level_1">|</div> || <div class="s_rootline s_rootline_level_2">|</div> || <div class="s_rootline s_rootline_level_3">|</div> || <div class="s_rootline s_rootline_level_4">|</div> || <div class="s_rootline s_rootline_level_5">|</div> || <div class="s_rootline s_rootline_level_6">|</div> |*|
  22.   1.CUR < .1.NO
  23.   1.CUR = 1
  24.   1.CUR.doNotLinkIt = 1
  25. }

Normales Menu mit Option Split

The following Menu shows how option split is used with different itemStates.

Here option split is used to mark the items first, normal and last separated by |*|:
xyz.1.NO.wrapItemAndSub = <li class="first NO"> | </li> |*| <li class="normal NO"> | </li> |*| <li class="last NO"> | </li>

When you want to assign two classes per item you can use the following TS, in my example each item has one of the classes [first|normal|last] assigned, furthermore each item gets the current itemState as class too:

  1.  
  2. xyz = HMENU
  3. xyz {
  4.   wrap = <ul id="yacbddm" class="firstLevel"> | </ul>
  5.   1 = TEMNU
  6.   1.noBlur = 1
  7.   1.NO.wrapItemAndSub = <li class="first NO"> | </li> |*| <li class="normal NO"> | </li> |*| <li class="last NO"> | </li>
  8.  
  9.   1.IFSUB < .1.NO
  10.   1.IFSUB = 1
  11.   1.IFSUB.wrapItemAndSub = <li class="first IFSUB"> | </li> |*| <li class="normal IFSUB"> | </li> |*| <li class="last IFSUB"> | </li>
  12.  
  13.   1.ACT < .1.NO
  14.   1.ACT = 1
  15.   1.ACT.wrapItemAndSub = <li class="first ACT"> | </li> |*| <li class="normal ACT"> | </li> |*| <li class="last ACT"> | </li>
  16.  
  17.   1.CUR < .1.NO
  18.   1.CUR = 1
  19.   ###### Optional: Don't link current item ######
  20.   1.CUR.doNotLinkIt = 1
  21.   1.CUR.wrapItemAndSub = <li class="first CUR"> | </li> |*| <li class="normal CUR"> | </li> |*| <li class="last CUR"> | </li>
  22.  
  23.   2 < .1
  24.   2.wrap = <ul class="level_2">|</ul>
  25.  
  26.   3 < .1
  27.   3.wrap = <ul class="level_3">|</ul>
  28.  
  29.   4 < .1
  30.   4.wrap = <ul class="level_4">|</ul>
  31. }

For the itemStates in the moment it doesn't make any sense to write 1.IFSUB < .1.NO but when .1.NO is more complicated all properties of .1.NO automatically are assigned to the other itemStates too.

For the classes of li-elements you can assign other classnames also only one name, but combining different names makes CSS easier because you can manage two different classes independent from hirarchy.

Below 2 < .1, 3 < .1, ... you can overwrite defined properties that are taken from .1, so you needn't define the whole TMENU new for each level.

The result only has the normal page-CSS assigned and looks like that:

The produced HTML-Source-Code of the Template looks like this:

  1. <ul id="yacbddm" class="firstLevel">
  2.   <li class="first IFSUB"><a href=" ... " >Leistungen</a></li>
  3.   <li class="normal NO"><a href=" ... " >Referenzen</a></li>
  4.   <li class="normal ACT">
  5.     <a href=" ... " >Support</a>
  6.     <ul class="level_2">
  7.       <li class="first ACT">
  8.         <a href=" ... " >TYPO3</a>
  9.         <ul class="level_3">
  10.           <li class="first NO"><a href=" ... " >TYPO3 - Beschreibung</a></li>
  11.           <li class="normal ACT">
  12.             <a href=" ... " >Tipps und Tricks</a>
  13.             <ul class="level_4">
  14.               <li class="first NO"><a href=" ... " >Erweiterung: chc_forum</a></li>
  15.               <li class="normal NO"><a href=" ... " >Backend Fehlermeldungen</a></li>
  16.               <li class="normal NO"><a href=" ... " >Bugfixing mit "diff" und "patch"</a></li>
  17.               <li class="normal IFSUB"><a href=" ... " >Installation</a></li>
  18.               <li class="normal CUR">Navigation</li>
  19.               <li class="normal NO"><a href=" ... " >Mehrsprachigkeit</a></li>
  20.               <li class="normal NO"><a href=" ... " >class.tslib_pibase</a></li>
  21.               <li class="last NO"><a href=" ... " >UTF-8 in TYPO3</a></li>
  22.             </ul>
  23.           </li>
  24.           <li class="last IFSUB"><a href=" ... " >Snippets</a></li>
  25.         </ul>
  26.       </li>
  27.       <li class="normal IFSUB"><a href=" ... " >CSS</a></li>
  28.       <li class="normal NO"><a href=" ... " >HTML</a></li>
  29.       <li class="normal NO"><a href=" ... " >JavaScript</a></li>
  30.       <li class="normal NO"><a href=" ... " >Glossar</a></li>
  31.       <li class="normal IFSUB"><a href=" ... " >Windows</a></li>
  32.       <li class="normal NO"><a href=" ... " >Thunderbird</a></li>
  33.       <li class="normal NO"><a href=" ... " >Content Managementen Systeme</a></li>
  34.       <li class="normal NO"><a href=" ... " >Barrierefreiheit</a></li>
  35.       <li class="normal IFSUB"><a href=" ... " >Programmierung</a></li>
  36.       <li class="last IFSUB"><a href=" ... " >Forum</a></li>
  37.     </ul>
  38.   </li>
  39.   <li class="normal NO"><a href=" ... " >Kontakt</a></li>
  40.   <li class="last NO"><a href=" ... " >Impressum</a></li>
  41. </ul> 

Combinig two independent menus

Sometimes two independent menus have to be combined. You can create two pages (ABC, XYZ) inside pagetree somewhere you like and also you needn't care that both pages are on same level. Inside these containerpages add all your contentpages - optionally with subpages:

- Root
-- ABC
--- Page ABC 1
--- Page ABC 2
--- Page ABC 3
--- Page ABC 4
--- Page ABC 5
-- XYZ
--- Page XYZ 1
--- Page XYZ 2
--- Page XYZ 3
--- Page XYZ 4

  1. lib.menu.combined = COA
  2. lib.menu.combined {
  3.      ### Outer Menu-Container:
  4.      wrap = <div class="combined_menu">|</div>
  5.  
  6.      ### first Menu:
  7.      10 = HMENU
  8.      10 {
  9.          special = directory
  10.          special.value = 1001
  11.          wrap= <ul class="Menu_ABC">|</ul>
  12.          1 = TMENU
  13.          1 {
  14.             noBlur = 1
  15.             expAll = 1
  16.             NO.wrapItemAndSub = <li class="first">|</li> |*| <li>|</li>
  17. |*| <li class="last">|</li>
  18.             ACT < .NO
  19.             ACT = 1
  20.             ACT.ATagParams = class="active"
  21.          }
  22.          2 < .1
  23.          2.wrap = <ul>|</ul>
  24.          3 < .2
  25.      }
  26.  
  27.      ### Optionale divider-line, comment out to disable:
  28.      15 = TEXT
  29.      15.value = <hr />
  30.  
  31.      ### second Menu:
  32.      20 < .10
  33.      20.special.value = 869
  34.      20.wrap= <ul class="Menu_XYZ">|</ul>
  35. }
  36.  
  37. page.100 < lib.menu.combined

The produced HTML looks like this:

  1. <div class="combined_menu">
  2.  
  3.   <ul class="Menu_ABC">
  4.     <li class="first">
  5.       <a href=" ... " >PHP</a>
  6.       <ul>
  7.         <li class="last"><a href=" ... " >Funktion strtotime multilingual</a></li>
  8.       </ul>
  9.     </li>
  10.     <li class="last"><a href=" ... " >Links</a></li>
  11.   </ul>
  12.  
  13.   <hr />
  14.  
  15.   <ul class="Menu_XYZ">
  16.     <li class="first"><a href=" ... " >TYPO3 - Beschreibung</a></li>
  17.     <li>
  18.       <a href=" ... " class="active">Tipps und Tricks</a>
  19.       <ul>
  20.         <li class="first"><a href=" ... " >Erweiterung: chc_forum</a></li>
  21.         <li><a href=" ... " >Backend Fehlermeldungen</a></li>
  22.         <li><a href=" ... " >Bugfixing mit "diff" und "patch"</a></li>
  23.         <li>
  24.           <a href=" ... " >Installation</a>
  25.           <ul>
  26.             <li class="last"><a href=" ... " >Image Processing</a></li>
  27.           </ul>
  28.         </li>
  29.         <li><a href=" ... " class="active">Navigation</a></li>
  30.         <li><a href=" ... " >Mehrsprachigkeit</a></li>
  31.         <li><a href=" ... " >class.tslib_pibase</a></li>
  32.         <li class="last"><a href=" ... " >UTF-8 in TYPO3</a></li>
  33.       </ul>
  34.     </li>
  35.     <li class="last">
  36.       <a href=" ... " >Snippets</a>
  37.       <ul>
  38.         <li class="last"><a href=" ... " >t3lib</a></li>
  39.       </ul>
  40.     </li>
  41.   </ul>
  42.  
  43. </div>