Typoscript für die Navigation

Das erste Typoscript erzeugt eine verschachtelte Liste, die mit dem Superfish-Javascript kompatibel ist.

lib.nav = HMENU
lib.nav {
  wrap = <ul class="sf-menu">|</ul>
 
  1 = TMENU
  1 {
    expAll = 1 
    noBlur = 1 
    NO = 1
    NO.allWrap= <li>|</li>
    NO.stdWrap.htmlSpecialChars = 1
 
    CUR = 1
    CUR.allWrap = <li class="current">|</li>
    CUR.stdWrap.htmlSpecialChars = 1
 
  }
 
  2 = TMENU
  2 {
    expAll = 1
    noBlur = 1
    NO.wrapItemAndSub = <li>|</li>
    NO.stdWrap.htmlSpecialChars = 1
 
    CUR = 1
    CUR.wrapItemAndSub = <li class="current">|</li>
    CUR.stdWrap.htmlSpecialChars = 1
 
    ACT = 1
    ACT < .CUR
  }
 
  3 < .2
  3.wrap = <ul>|</ul>
}

Benötigte Javascripts einbinden

Im Header oder Footer der Seite müssen dann bestimmte Javascripts eingebunden werden.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://domain.de/fileadmin/templates/js/hoverIntent.js"></script>
<script type="text/javascript" src="http://domain.de/fileadmin/templates/js/superfish.js"></script>
<script type="text/javascript" src="http://domain.de/fileadmin/templates/js/supersubs.js"></script>
 
<script type="text/javascript">
// initialise plugins
$(document).ready(function(){ 
        $("ul.sf-menu").supersubs({ 
            minWidth:    11,   // minimum width of sub-menus in em units 
            maxWidth:    27,   // maximum width of sub-menus in em units 
            extraWidth:  1     // extra width can ensure lines don't sometimes turn over 
                               // due to slight rounding differences and font-family 
        }).superfish({
				animation:   {opacity:'show',height:'show',width:'show'},
				speed: 'fast'
			});  // call supersubs first, then superfish, so that subs are 
                         // not display:none when measuring. Call before initialising 
                         // containing tabs for same reason. 
    }); 
 
</script>
 
<!--
Die Werte minWidth,maxWidth und extraWidth müssen natürlich noch angepasst werden.
 
Achtung:
In diesem Beispiel wird jQuery manuell eingebunden.
Bei Verwendung von Extensions, die eine andere Javascript-Bibliothek verwenden, kann es so natürlich zu Konflikten kommen.
Ebenso kann es sein, dass eine Extensions jQuery nochmal einbindet. Dann muss der Code angepasst oder verändert werden.
-->