Typo3 - Navigation: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
 
(Eine dazwischenliegende Version desselben Benutzers wird nicht angezeigt)
Zeile 1: Zeile 1:
 
In diesem Artikel sollen anhand von Beispielen verschiedene Navigations-Menüs mittels TypoScript gezeigt werden. Der Schwerpunkt liegt auf den Konzepten und Erklärungen. Einige vorgefertigte und aktuelle Navigationen finden sich im [[Typo3 - Baukasten]]
 
In diesem Artikel sollen anhand von Beispielen verschiedene Navigations-Menüs mittels TypoScript gezeigt werden. Der Schwerpunkt liegt auf den Konzepten und Erklärungen. Einige vorgefertigte und aktuelle Navigationen finden sich im [[Typo3 - Baukasten]]
 +
== Verschachtelte Menüstruktur für Dropdown Menüs ==
 +
<syntaxhighlight lang="typoscript">
 +
# navigation-bar 2020
 +
lib.nav.dropdown = HMENU
 +
lib.nav.dropdown {
 +
  special = directory
 +
  special.value = 400
 +
  1 = TMENU
 +
  1 {
 +
    expAll = 1
 +
    wrap = <ul class="nav" role="menu">|</ul>
 +
    NO = 1
 +
    NO {
 +
      wrapItemAndSub = |*|<li class="level-1">|</li>|*|<li class="level-1 last">|</li>
 +
      ATagParams = class="level-1 btn-flat"
 +
    }
 +
 +
    IFSUB < .NO
 +
    IFSUB = 1
 +
    IFSUB {
 +
      wrapItemAndSub = |*|<li class="l1 dd">|</li>|*|<li class="level-1 dd last"> | </li>
 +
      ATagParams = class="level-1 btn-flat dd-btn"
 +
      stdWrap.append = TEXT
 +
      stdWrap.append.value = <i class="material-icons right">arrow_drop_down</i>
 +
    }
 +
 +
    ACT < .NO
 +
    ACT = 1
 +
    ACT {
 +
      wrapItemAndSub = |*|<li class="level-1 active">|</li>|*|<li class="level-1 active last">|</li>
 +
      ATagParams = class="level-1 active btn-flat"
 +
    }
 +
 +
    ACTIFSUB < .NO
 +
    ACTIFSUB = 1
 +
    ACTIFSUB {
 +
      wrapItemAndSub = |*|<li class="dd active level-1">|</li>|*|<li class="dd active level-1 last">|</li>
 +
      ATagParams = class="dd-btn active level-1 btn-flat"
 +
      stdWrap.append = TEXT
 +
      stdWrap.append.value = <i class="material-icons right">arrow_drop_down</i>
 +
    }
 +
  }
 +
 +
  2 = TMENU
 +
  2 {
 +
    wrap = <ul class="dd-content level-2">|</ul>
 +
    NO = 1
 +
    NO {
 +
      wrapItemAndSub = |*|<li class="level-2">|</li>|*|<li class="level-2 last">|</li>
 +
      ATagParams = class="level-2"
 +
      stdWrap.htmlSpecialChars = 1
 +
    }
 +
 +
    ACT = .NO
 +
    ACT {
 +
      wrapItemAndSub = |*|<li class="active level-2">|</li>|*|<li class="active level-2 last">
 +
      ATagParams = class="active level-2"
 +
    }
 +
  }
 +
}
 +
</syntaxhighlight>
 
== Standard Textmenü mit mehreren Leveln ==  
 
== Standard Textmenü mit mehreren Leveln ==  
−
<syntaxhighlight lang="javascript">
+
<syntaxhighlight lang="typoscript">
 
lib.nav.main = HMENU
 
lib.nav.main = HMENU
 
# Falls das Menü nicht bei der obersten Ebene anfangen soll
 
# Falls das Menü nicht bei der obersten Ebene anfangen soll

Aktuelle Version vom 2. Mai 2020, 18:20 Uhr

In diesem Artikel sollen anhand von Beispielen verschiedene Navigations-Menüs mittels TypoScript gezeigt werden. Der Schwerpunkt liegt auf den Konzepten und Erklärungen. Einige vorgefertigte und aktuelle Navigationen finden sich im Typo3 - Baukasten

Verschachtelte Menüstruktur für Dropdown Menüs[Bearbeiten]

# navigation-bar 2020
lib.nav.dropdown = HMENU
lib.nav.dropdown {
  special = directory
  special.value = 400
  1 = TMENU
  1 {
    expAll = 1
    wrap = <ul class="nav" role="menu">|</ul>
    NO = 1
    NO {
      wrapItemAndSub = |*|<li class="level-1">|</li>|*|<li class="level-1 last">|</li>
      ATagParams = class="level-1 btn-flat"
    }
 
    IFSUB < .NO
    IFSUB = 1
    IFSUB {
      wrapItemAndSub = |*|<li class="l1 dd">|</li>|*|<li class="level-1 dd last"> | </li>
      ATagParams = class="level-1 btn-flat dd-btn"
      stdWrap.append = TEXT
      stdWrap.append.value = <i class="material-icons right">arrow_drop_down</i>
    }
 
    ACT < .NO
    ACT = 1
    ACT {
      wrapItemAndSub = |*|<li class="level-1 active">|</li>|*|<li class="level-1 active last">|</li>
      ATagParams = class="level-1 active btn-flat"
    }
 
    ACTIFSUB < .NO
    ACTIFSUB = 1
    ACTIFSUB {
      wrapItemAndSub = |*|<li class="dd active level-1">|</li>|*|<li class="dd active level-1 last">|</li>
      ATagParams = class="dd-btn active level-1 btn-flat"
      stdWrap.append = TEXT
      stdWrap.append.value = <i class="material-icons right">arrow_drop_down</i>
    }
  }
 
  2 = TMENU
  2 {
    wrap = <ul class="dd-content level-2">|</ul>
    NO = 1
    NO {
      wrapItemAndSub = |*|<li class="level-2">|</li>|*|<li class="level-2 last">|</li>
      ATagParams = class="level-2"
      stdWrap.htmlSpecialChars = 1
    }
 
    ACT = .NO
    ACT {
      wrapItemAndSub = |*|<li class="active level-2">|</li>|*|<li class="active level-2 last">
      ATagParams = class="active level-2"
    }
  }
}

Standard Textmenü mit mehreren Leveln[Bearbeiten]

lib.nav.main = HMENU
# Falls das Menü nicht bei der obersten Ebene anfangen soll
#lib.nav.main.entryLevel = 1
# Bei Bedarf einzelne Seiten aus dem Menü ausschließen
#lib.nav.main.excludeUidList = 1,2,3
special = directory
special.value = {$nav.main.id}

lib.nav.main.1 = TMENU
lib.nav.main.1 {
  wrap = <ul role="navigation" id="nav-mobile" class="nav side-nav grey darken-3 grey-text text-lighten-5"><li><i class="material-icons left nav-close">close</i><br/></li>|</ul>
  #noBlur = 1
	NO = 1
  NO {
    wrapItemAndSub = |*| <li class="no"> | </li>|*|<li class="no last"> | </li>
    stdWrap.htmlSpecialChars = 1
    ATagTitle.field = abstract // description
  }
	# Einstellungen für Seiten, die sich in der Rootline befinden
  ACT = 1
  ACT {
    wrapItemAndSub = |*| <li class="act"> | </li> |*| <li class="act last"> | </li>
    stdWrap.htmlSpecialChars = 1
    ATagTitle.field = abstract // description
  }
	# Einstellungen für die aktuelle Seite
  CUR = 1
  CUR {
    wrapItemAndSub = |*| <li class="cur"> | </li> |*| <li class="cur last"> | </li>
    stdWrap.htmlSpecialChars = 1
    doNotLinkIt = 0
  }
}
# Gleiche Einstellungen für die nächsten Ebenen

lib.nav.main.2 = TMENU
lib.nav.main.2 < lib.nav.main.1
lib.nav.main.2.wrap = <ul class="l2">|</ul>

lib.nav.main.3 = TMENU
lib.nav.main.3 < lib.nav.main.2
lib.nav.main.2.wrap = <ul class="l3">|</ul>


lib.nav.main.4 = TMENU
lib.nav.main.4 < lib.nav.main.2
lib.nav.main.2.wrap = <ul class="l4">|</ul>

grafisches CSS-Flyout Menü basierend auf Georg Ringer[Bearbeiten]

Dieses Menü ist valide gemäß xhtml Trans 1.0 und hat ein GMENU in der 1. Ebene, also ähnlich dem GMENU_LAYER.

Typo3 - vertikales Menü mit GMENU in Ebene 1


CSS-Flyout Menü basierend auf Marlies Cohen[Bearbeiten]

Typo3 - CSS-Flyout Menü

accessible CSS-Flyout Menü basierend auf CSS-Play[Bearbeiten]

Todo

TMenu_Layer, GMenu_Layer[Bearbeiten]

Bei den Layer Menüs gibt es das Problem bei variablen Designs (z.B. Mittig positioniert) dass man die Layer nicht absolut positionieren kann, denn je nach Fenstergröße verändern sich die x und y Werte. Tipps dafür gibt es im Deutschen Typo3 Newgroup und bei Marlies Cohen (mcuniverse.com):

[1]

[2]

grafisches Layer Menu[Bearbeiten]

Ein Beispiel für ein Menü mit grafischen Hauptpunkten und Grafischen-Layern für die 2. Ebene von archkom.de: 

 ###################
 ### DHTML Navigation ###
 ################### 

 includeLibs.gmenu_layers = media/scripts/gmenu_layers.php
 temp.navi_gLayer = HMENU
 temp.navi_gLayer.special = directory
 temp.navi_gLayer.special.value = 2
 ### Level 1 ###
 temp.navi_gLayer.1 = GMENU_LAYERS
 temp.navi_gLayer.1 {
    hideMenuWhenNotOver =10
    hideMenuTimer = 2000
    #Syle für den Layer vom Untermenü (Level2)
    layerStyle = position:absolute;left:0px;top:249px;width:20px;VISIBILITY:hidden;  
    #xPosOffset = -113 #von links insgesamt
    lockPosition = x
    expAll=1
    NO = 1
    NO {
       backColor = #5980B8
       XY = 114, 23
       10 = TEXT
       10{
          text.field = title
          fontFile = fileadmin/fonts/arialbd.ttf
          fontSize=14
          fontColor = #FFFFFF
          align = center
          offset = 0,16
       }
    } #NO Ende
    RO < .NO
    RO.10.fontColor= #FFDF00
    ACT < .RO
 } 

 ###  2. Level   ###
 temp.navi_gLayer.2 = GMENU
 temp.navi_gLayer.2.wrap = |<br>
 temp.navi_gLayer.2 {
 #   hideMenuWhenNotOver = 8
 #   hideMenuTimer = 300
    NO = 1
    NO {
       XY = 113, 20
       5 = BOX
       5{
          dimensions = 0,0,113,20
          color = #5980B8
       }
       7 = BOX
       7{
          dimensions = 0,19,113,1
          color = #FFFFFF
       }
       10 = TEXT
       10{
          fontSize = 11
          text.field = title
          align = center
          offset = 0,14
          fontColor = #FFFFFF
       }
    } #NO Ende
    RO < .NO
    RO.10.fontColor = #FFDF00
    ACT < .RO
 }

Text Layer Menu[Bearbeiten]

Eine Variante mit Text Layern 

page.includeLibs.tmenu_layers = media/scripts/tmenu_layers.php

   # Top Navigation
   temp.naviLinks = HMENU
   temp.naviLinks.special = directory
   temp.naviLinks.special.value = 2 
   temp.naviLinks.1 = TMENU_LAYERS
   temp.naviLinks.1 {
      layerStyle = position:absolute;VISIBILITY:hidden; 
      lockPosition = x
      relativeToParentLayer=1 
      relativeToTriggerItem=1
      topOffset=20
      leftOffset=-12 
      hideMenuWhenNotOver = 50
      hideMenuTimer = 70
      expAll=1 
      wrap = <table border="0" cellspacing="0" cellpadding="0"><tr>|</tr></table>
      NO.allWrap = <td class="topnav"> | </td>
      ACT = 1
      ACT.allWrap =  <td class="topnav_act"> | </td>
   }

   # Top Navigation 2nd Level
   temp.naviLinks.2 = TMENU_LAYERS
   temp.naviLinks.2 {
      layerStyle = position:absolute;VISIBILITY:hidden; 
      lockPosition = x
      relativeToParentLayer=1 
      relativeToTriggerItem=1
      hideMenuWhenNotOver=1 
      topOffset=13 
      leftOffset=15 
      expAll=1 
      wrap = <div class="navLevel2"> | </div>
      NO.allWrap = <span class="topnav1"> | </span>
      ACT = 1
      ACT.allWrap =  <span class="topnav1_act"> | </span>   
   }

Ausführliches Text Layer Menu[Bearbeiten]

Da ist ziemlich viel drin besser wäre eins mit CSS:


TypoScript: 


##############################
 HAUPTEMENU: MENU_MAIN
##############################

   # Benoetigte Libaries einfuegen
   page.includeLibs.tmenu_layers = media/scripts/tmenu_layers.php

   # Menu erzeugen
   temp.MENU_MAIN = HMENU

   ################
   # MENU EBENE 1 #
   ################
     # Ebene 1 erzeugen
     temp.MENU_MAIN.1 = TMENU_LAYERS
     # Eigenschaften Ebene 1
     temp.MENU_MAIN.1 {
 
                layerStyle = position:absolute;VISIBILITY:hidden;
 
                # Menu verankern, damit es nicht der Maus folgt
                lockPosition = x

                # Position wo sich die naechste Ebene oeffnen soll (Ebene 2)
                relativeToParentLayer=1
                relativeToTriggerItem=1
                topOffset=16
                leftOffset=0
                # Angabe wann sich die naechste Ebene wieder schliessen soll
                hideMenuWhenNotOver = 50
                hideMenuTimer = 70

                # alle Menuepunkte anzeigen
                expAll=1

                # Darstellung der aktuellen Ebene
                wrap = <table border="0" cellspacing="0" cellpadding="0" class="menu1_main"><tr>|</tr></table>
                # Darstellung im Normalmodus
                NO {
                    allWrap = <td class="menu1_main"> | </td>
                   }
                # Darstellung wenn Aktiv
                ACT = 1
                ACT {
                     allWrap =  <td class="menu1_main_act"> | </td>
                     }

                # Ende Ebene 1
                }


   ################
   # MENU EBENE 2 #
   ################
     # Ebene 1 erzeugen
     temp.MENU_MAIN.2 = TMENU_LAYERS
     # Eigenschaften Ebene 1
     temp.MENU_MAIN.2 {
 
                layerStyle = position:absolute;VISIBILITY:hidden;
 
                # Menu verankern, damit es nicht der Maus folgt
                lockPosition = x

                # Position wo sich die naechste Ebene oeffnen soll (Ebene 2)
                relativeToParentLayer=1
                relativeToTriggerItem=1
                topOffset=0
                leftOffset=140


                # alle Menuepunkte anzeigen
                expAll=1

                # Darstellung der aktuellen Ebene
                wrap = <table border="0" cellspacing="0" cellpadding="0">|</table>
                # Darstellung im Normalmodus
                NO {
                    allWrap = <tr><td class="menu1_main2"> | </td></tr>
                   }
                # Darstellung wenn Aktiv
                ACT = 1
                ACT {
                     allWrap =  <tr><td class="menu1_main2_act"> | </td></tr>
                    }
                # Darstellung fuer Unterpunkte mit Subpunkten
                IFSUB = 1
                IFSUB {
                     allWrap =  <tr><td class="menu1_main2_sub"> | </td></tr>
                    }

                # Ende Ebene 2
                }



   ################
   # MENU EBENE 3 #
   ################
     # Ebene 1 erzeugen
     temp.MENU_MAIN.3 = TMENU
     # Eigenschaften Ebene 1
     temp.MENU_MAIN.3 {
 

                # Darstellung der aktuellen Ebene
                wrap = <table border="0" cellspacing="0" cellpadding="0">|</table>
                # Darstellung im Normalmodus
                NO {
                    allWrap = <tr><td class="menu1_main2"> | </td></tr>
                   }
                # Darstellung wenn Aktiv
                ACT = 1
                ACT {
                     allWrap =  <tr><td class="menu1_main2_act"> | </td></tr>
                     }

                # Ende Ebene 3
                }

# Marker durch Menü ersetzten:
subparts.MENU_MAIN < temp.MENU_MAIN

CSS 

*MENUES */
.menue_main
{
        background: #000099;
        text-align: left;
        height: 16 px;
        width: 602 px;
               
}

/*MENU_MAIN */
.menu1_main
{       
        background-color: #000099;     
}




.menu1_main A, .menu1_main A:visited {
        color: #ffffff; 
        text-decoration: none;
        display: block;
        background-color: #000099;
        padding-left: 10px;
        padding-right: 10px;
        border-right: 1px solid #ffffff;
        font-weight: bold;
        font-size: 10pt;
        font-family: verdana;      
}

.menu1_main A:hover, .menu1_main A:bb:hover {
        color: #000000;
        font-weight: bold;
        text-decoration: none;
        display: block;
        background-color: #FFCC00;
        padding-left: 10px;
        padding-right: 10px;
        border-right: 1px solid #ffffff;
        font-weight: bold;
        font-size: 10pt;
        font-family: verdana;
       
}

.menu1_main_act A, .menu1_main_act A:visited {
        color: #000099;
        font-weight: bold;
        text-decoration: none;
        display: block;
        background-color: #CCCCEB;
        padding-left: 10px;
        padding-right: 10px;
        border-right: 1px solid #ffffff;
        font-weight: bold;
        font-size: 10pt;
        font-family: verdana;
       
}

.menu1_main_act A:hover, .menu1_main_act A:bb:hover {
        color: #000000;
        font-weight: bold;
        text-decoration: none;
        display: block;
        background-color: #FFCC00;
        padding-left: 10px;
        padding-right: 10px;
        border-right: 1px solid #ffffff;
        font-weight: bold;
        font-size: 10pt;
        font-family: verdana;
       
}
 

/* MENU_MAIN LEVEL 2 */

.menu1_main2 A, .menu1_main2 A:visited {
        color: #009900;
        font-weight: bold;
        text-decoration: none;
        background: #CCEBCC;
        border-bottom: 1px solid #009900;
        padding-left: 5px;
        width: 140px;
        padding-top: 2px;
        padding-bottom: 2px;
        font-weight: bold;
        font-size: 8pt;
        font-family: verdana;
}

.menu1_main2 A:hover, .menu1_main2 A:bb:hover {
        color: #000000;
        font-weight: bold;
        text-decoration: none;
        background: #FFCC00;
        border-bottom: 1px solid #009900;
        padding-left: 5px;
        width: 140px;
        padding-top: 2px;
        padding-bottom: 2px;
        font-weight: bold;
        font-size: 8pt;
        font-family: verdana;
}


.menu1_main2_act A, .menu1_main2_act A:visited {
        color: #ffffff;
        font-weight: bold;
        text-decoration: none;
        background: #009900;
        border-bottom: 1px solid #009900;
        padding-left: 5px;
        width: 140px;
        padding-top: 2px;
        padding-bottom: 2px;
        font-weight: bold;
        font-size: 8pt;
        font-family: verdana;
}

 .menu1_main2_act A:hover, .menu1_main2_act A:bb:hover {
        color: #000000;
        font-weight: bold;
        text-decoration: none;
        background: #FFCC00;
        border-bottom: 1px solid #009900;
        padding-left: 5px;
        width: 140px;
        padding-top: 2px;
        padding-bottom: 2px;
        font-weight: bold;
        font-size: 8pt;
        font-family: verdana;
}

.menu1_main2_sub A, .menu1_main2_sub A:visited {
        color: #009900;
        font-weight: bold;
        text-decoration: none;
        background-image : url(main/images/menu_sub_back.jpg);
        border-bottom: 1px solid #009900;
        padding-left: 5px;
        width: 140px;
        padding-top: 2px;
        padding-bottom: 2px;
        font-weight: bold;
        font-size: 8pt;
        font-family: verdana;
}

 .menu1_main2_sub A:hover, .menu1_main2_sub A:bb:hover {
        color: #000000;
        font-weight: bold;
        text-decoration: none;
        background-image : url(main/images/menu_sub_back_act.jpg);
        border-bottom: 1px solid #009900;
        padding-left: 5px;
        width: 140px;
        padding-top: 2px;
        padding-bottom: 2px;
        font-weight: bold;
        font-size: 8pt;
        font-family: verdana;
}

falls es jemanden interessiert!

opera - problem kann man so lösen

aus der datei jsfunc.layermenu.js (Scripts Verzeichnis) 

this.x= (bw.ns4||bw.op)?this.css.left:this.el.offsetLeft;
this.y= (bw.ns4||bw.op)?this.css.top:this.el.offsetTop;
this.height= (bw.ie4||bw.ie5||bw.ns6)?this.el.offsetHeight:bw.ns4?this.ref.height:bw.op?this.css.pixelHeight:0;
this.width= (bw.ie4||bw.ie5||bw.ns6)?this.el.offsetWidth:bw.ns4?this.ref.width:bw.op?this.css.pixelWidth:0;

ersetzten durch: 

this.x= (bw.ns4)?this.css.left:this.el.offsetLeft;
        this.y= (bw.ns4)?this.css.top:this.el.offsetTop;
        this.height=(bw.ie4||bw.dom)?this.el.offsetHeight:bw.ns4?this.ref.height:0;
        this.width=(bw.ie4||bw.dom)?this.el.offsetWidth:bw.ns4?this.ref.width:0;

bei neueren Typo3 Versionen (>= V3.8) könnte es auch schon so funktionieren ?

Navigation auf CSS Basis als Punktliste[Bearbeiten]

(Variation des Tutorials von Typo3.net)

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: 


 temp.navi_vBulletList = HMENU
 temp.navi_vBulletList {
     stdWrap.case = upper
     special = directory
     # Seitenid für den Einstieg
     special.value = 1
     # Seitenbaumebene ab Level2
     entryLevel = 0
     1 = TMENU
     1 {
        noBlur = 1
        wrap = <ul class="naviL1">|</ul>
        NO = 1
        NO {
           ATagTitle.field = abstract // description // title
           wrapItemAndSub = <li>|</li>
           ATagParams = class="naviL1"
        }
        CUR < .NO
        CUR.doNotLinkIt = 1
        ACT < .NO
        ACT.wrapItemAndSub = <li class=naviL1_act>|</li>
     }
     2 < .1
     3 < .1
  }

Beschreibung des Sourcecodes:

In der Zeile 1 erzeugen wir ein temporäres cObjekt HMENU.

In diesem Beispiel wird der Einstiegspunkt für das Menü auf die Seite mit der ID 1 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.

Ein passendes CSS wäre z.B. folgendes: 

 #navi {
 margin-top:52px;
 margin-left:0;
   float: left;
	width: 220px;
	background-image: url(../images/navi_back.gif);
	background-color: #920026;
 }
 .naviL1 {
   padding-left:10px;
	margin-left:0px;
	color:#4782C6;
	font-weight: bold;
	list-style:none;
	line-height: 20px;

 }

 .naviL1 a:link, .naviL1 a:visited{
	padding-left:0px;
	color:#FFFFFF;
	text-decoration: none;
	font-weight: bold;
 }
 .naviL1 a:hover{
   color:#9F002D;
	text-decoration:none;
	font-weight: bold;
 }
  1. navi ist die id für ein DIV in dem die komplette Navigation liegt.

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

Beispiele:


Campbell Button Menü[Bearbeiten]

Achtung - als Doctype muß im IE XHTML-Strict angegeben werden sonst gibt es Abstände in den Menüs

TypoScript 

temp.navi_bulletList = HMENU
temp.navi_bulletList {
    #stdWrap.case = upper
    special = directory
    # Seitenid für den Einstieg
    special.value = 26
    # Seitenbaumebene ab Level2
    entryLevel = 0
   1 = TMENU
   1.noBlur = 1
   1.wrap = <ul id="iCampbell">|</ul>
   1.NO = 1
   1.NO.linkWrap = <li>|</li>
   1.ACT = 1
   1.ACT.linkWrap = <li class="akt">|</li>
   1.ACTIFSUB = 1
   1.ACTIFSUB.linkWrap = <li class="akt">|</li>

   2 = TMENU
   2.noBlur = 1
   2.wrap = <ul id="iCampbellL2">|</ul></li>
   2.NO = 1
   2.NO.linkWrap = <li>|</li>
   2.ACT = 1
   2.ACT.linkWrap = <li class="akt">|</li>
   2.ACTIFSUB = 1
   2.ACTIFSUB.linkWrap = <li class="akt">|</li>
}

CSS (horizontale Version) 

/* Claire Campbell - etwas modifiziert */
/*#iCampbellBox {
  background:#28b; margin:0 0 20px; padding:0.6em 0 0 2%; width:400px; height:1.83em;
}*/
ul#iCampbell {
  list-style:none; 
  margin:0 auto; 
  padding:0;/*notwendig sonst im FF mittig*/
  width:100%;
}

ul#iCampbell li {
  display:block; 
  float:left; 
  width:20%; 
  font-size:0.78em; 
  font-weight:bold;
}


ul#iCampbell li a {
  display:block; 
  width:91%; 
  padding: 0.4em 0.5em 0.5em 0.1em;
  border-width:1px; 
  /*border-color:*/
  border-style:solid;
}
#iCampbellBox>ul#iCampbell li span, #iCampbellBox>ul#iCampbell li a {
  width:auto; /*nur nicht IEs*/
}

ul#iCampbell li a:link, ul#iCampbell li a:visited {
	color:black; 
	background:#BBBBBB;
   border-color:#666 #666 #666 #EEE;  
	text-decoration:none;
}
ul#iCampbell li a:hover, ul#iCampbell li a:active,ul#iCampbell li.akt a:visited, ul#iCampbell li.akt a:active, ul#iCampbell li.akt a:link  {
	padding:0.3em 0.6em 0.6em 0.0em;
   border-color:#FFF #666 #D6D5DA #FFF;  
   color:#C80202; 
	background:#D6D5DA; text-decoration:none;
}

ul#iCampbell li a:active {
  color:#C80202; 
  background:#D6D5DA;
}
...

Einfache CSS Navigation (vertikal)[Bearbeiten]

TypoScript 

temp.navi_bulletList = HMENU
temp.navi_bulletList {
    #stdWrap.case = upper
    special = directory
    # Seitenid für den Einstieg
    special.value = 9
    # Seitenbaumebene ab Level2
    entryLevel = 0
   1 = TMENU
   1.noBlur = 1
   1.wrap = <ul class="navi1">|</ul>
   1.NO = 1
   1.NO.linkWrap = <li class="naviL1">|</li>
   1.ACT = 1
   1.ACT.linkWrap = <li class="naviL1_act">|</li>
   1.ACTIFSUB = 1
   1.ACTIFSUB.linkWrap = <li class="naviL1_act">|</li>

   2 = TMENU
   2.noBlur = 1
   2.wrap = <ul class="navi2">|</ul></li>
   2.NO = 1
   2.NO.linkWrap = <li class="naviL2">|</li>
   2.ACT = 1
   2.ACT.linkWrap = <li class="naviL2_act">|</li>
   2.ACTIFSUB = 1
   2.ACTIFSUB.linkWrap = <li class="naviL2_act">|</li>
}

CSS 

/* navigation haupt */
#navi {
float: left;
padding-left:0px;
padding-top: 3px;
}

.navi1 {
padding:0px;
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
list-style: none;
}

li.naviL1{
	clear:both;
}

.naviL1 {
font-family: Arial, Helvetica, sans-serif;
background-image: url(../images/pfeil.gif);
background-repeat: no-repeat;
   padding:0px;
	margin:0px;
	color:#000000;
	font-weight: normal;
	text-indent: 18px;
	line-height: 16px;
	text-decoration: none;
}

.naviL1 a:link, .naviL1 a:visited {
	color:#000000;
	text-decoration: none;
	font-weight: normal;
	line-height: 16px;
}


.naviL1 a:hover{
   color:#CA0404;
	text-decoration: underline;
	font-weight: normal;
	line-height: 16px;
	background-image: url(../images/pfeil_on.gif);
background-repeat: no-repeat;
float:left;
}

li.naviL1_act{
	clear:both;
}

.naviL1_act {
   color:#CA0404;
	text-decoration: underline;
	font-weight: normal;
	line-height: 16px;
	background-image: url(../images/pfeil_on.gif);
background-repeat: no-repeat;
text-indent: 18px;
}

/* navigation sub */
.navi2 {
padding-left:0px;
padding-top: 2px;
padding-bottom: 2px;
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
list-style: none;
}

li.naviL2{
	clear:both;
}
.naviL2 {
font-family: Arial, Helvetica, sans-serif;
   padding:0px;
	margin:0px;
	color:#000000;
	font-weight: normal;
	text-indent: 18px;
	line-height: 14px;
	text-decoration: none;
}

.naviL2 a:link, .naviL2 a:visited {
font-family: Arial, Helvetica, sans-serif;
	color:#000000;
	text-decoration: none;
	font-weight: normal;
	line-height: 14px;
}

.naviL2 a:hover{
font-family: Arial, Helvetica, sans-serif;
   color:#CA0404;
	text-decoration: underline;
	font-weight: normal;
	line-height: 14px;
}

li.naviL2_act{
	clear:both;
}

.naviL2_act {
font-family: Arial, Helvetica, sans-serif;
   color:#CA0404;
	text-decoration: underline;
	font-weight: normal;
	line-height: 14px;
text-indent: 18px;
}

Einfache Navigation horizontal[Bearbeiten]

Das TS ist fast identisch: 

temp.navi_vBulletList_unten = HMENU
temp.navi_vBulletList_unten {
    #stdWrap.case = upper
    special = directory
    # Seitenid für den Einstieg
    special.value = 12
    # Seitenbaumebene ab Level2
    entryLevel = 0
   1 = TMENU
   1.noBlur = 1
   1.wrap = <ul id="navi2">|</ul>
   1.NO = 1
   1.NO.linkWrap = <li>|&nbsp;&#124;|*|&nbsp;|&nbsp;&#124;|*|&nbsp;|</li>
   1.ACT = 1
   1.ACT.linkWrap = <li class="act">|&nbsp;&#124;|*|&nbsp;|&nbsp;&#124;|*|&nbsp;|</li>
   # evt. jedesmal den kompletten li Tag mit Anfang und Ende notwendig ?
}

Und das CSS... 

/* navigation unten */
#navi2 {
  padding-right:8px;
  margin: 0px;
  list-style: none;
  float: right;
  line-height:22px;
}
 
#navi2 li{
  list-style: none;
  text-decoration: none;
  float: left;
}

#navi2 li a:link, #navi2 li a:visited{
  color:#E9EAEC;
  text-decoration: none;
}

#navi2 li a:hover{
  color:#D3D4D8;
}

#navi2 li.act a{
 color:#C80202;
}

Mehrsprachige Navigation[Bearbeiten]

Typo3 - Mehrsprachige Seiten

Abgerufen von „https://wiki.stephanschlegel.de/index.php?title=Typo3_-_Navigation&oldid=24520“