jQuery-Menü-Plug-in Superfish-Nutzungsanleitung_jquery

Download-Adresse: http://plugins.jquery.com/project/Superfish

Dokumentationsbeschreibung:http://users.tpg.com.au/j_birch/plugins/superfish/#getting-started

Einige Funktionen und Effekte von Superfish:

Verwenden Sie reines CSS, um dynamische und browserübergreifende Effekte zu erzielen, und unterstützen Sie den schlechtesten Browser IE6
Sie können das Dropdown-Menü so einstellen, dass es beim Verlassen der Maus automatisch ausgeblendet wird. Der Standardwert ist 800 Millisekunden
Unterstützt Ein- und Ausblendanimationen
Unterstützen Sie die Tastaturantwort
Fügen Sie automatisch Eingabeaufforderungspfeile zu übergeordneten Menüs hinzu, die Untermenüs enthalten
Unterstützt Schatteneffekte, erfordert jedoch eine gute Browserunterstützung, z. B. Firefox, Chrome ... der schlechteste Browser IE6 ist ausgenommen
Optionale Callback-JS-Funktion

Gebrauchsanweisung

1. 1. Führen Sie zunächst Jquery- und Superfish-Dateien in die Seite ein

<script src="Jquery.js" type="text/javascript"><!--mce:0--></script>
<script src="superfish.js" type="text/javascript"><!--mce:1--></script>

2. Zweitens verwenden Sie ul li, um Menüinhalte zu erstellen

<ul class="sf-menu">
 <li><a href="#aa">menu item that is quite long</a></li>
 <li class="current">
    <a href="#ab">menu item →</a>
<ul>
 <li class="current"><a href="#">menu item</a></li>
 <li><a href="#aba">menu item</a></li>
 <li><a href="#abb">menu item</a></li>
</ul>
</li>
</ul>

3. Erstellen Sie abschließend das Initialisierungsmenü und stellen Sie den Effekt ein

  $(document).ready(function(){
  $("ul.sf-menu").superfish({
    hoverClass:  'sfHover', //当鼠标掠过时的class
    pathClass:   'overideThisToUse', // 激活的菜单项的class
    pathLevels:  1,    // 菜单级数
    delay:     800,    // 下拉菜单在鼠标离开时自动隐藏时间。默认是800毫秒
    animation:   {opacity:'show'}, // 动画效果，参考Jquery的动画jQuery's .animate()
    speed:     'normal',  // 动画速度， 参考Jquery的动画jQuery's .animate()
    dropShadows:  true,   // 阴影效果，关闭用‘false'
    onInit:    function(){},  // 初始化的回调函数
    onBeforeShow: function(){}, // 子菜单显示前回调函数
    onShow:    function(){}, // 子菜单显示时回调函数
    onHide:    function(){}  // 子菜单隐藏时回调函数
  });
 });

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.