Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen gezeigt.

Link zu der Vergleichsansicht

typo3:superfish-menue_typoscript_fuer_die_navigation [13.07.2014 19:00] (aktuell)
wolfgang angelegt
Zeile 1: Zeile 1:
 +===== Superfish-Menü:​ Typoscript für die Navigation =====
  
 +==== Typoscript für die Navigation ====
 +
 +Das erste Typoscript erzeugt eine verschachtelte Liste, die mit dem Superfish-Javascript kompatibel ist.
 +
 +<code typoscript>​
 +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>​
 +}
 +</​code>​
 +
 +==== Benötigte Javascripts einbinden ====
 +
 +Im Header oder Footer der Seite müssen dann bestimmte Javascripts eingebunden werden.
 +
 +<code html>
 +<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.
 +-->
 +</​code>​