Guide d'utilisation du plug-in de menu jQuery Superfish_jquery

Adresse de téléchargement : http://plugins.jquery.com/project/Superfish

Description de la documentation :http://users.tpg.com.au/j_birch/plugins/superfish/#getting-started

Quelques fonctionnalités et effets de Superfish :

Utilisez du CSS pur pour obtenir des effets dynamiques, multi-navigateurs, prenez en charge le pire navigateur IE6
Vous pouvez configurer le menu déroulant pour qu'il se masque automatiquement lorsque la souris quitte l'écran. La valeur par défaut est 800 millisecondes
Prise en charge des animations de fondu d'entrée et de sortie
Prise en charge de la réponse du clavier
Ajouter automatiquement des flèches d'invite aux menus parents contenant des sous-menus
Prend en charge les effets d'ombre, mais nécessite une bonne prise en charge des navigateurs, tels que Firefox, Chrome... le pire navigateur, IE6, est exempté
Fonction js de rappel facultative

Mode d'emploi

1. 1. Tout d'abord, introduisez les fichiers Jquery et Superfish dans la page

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

2. 2. Deuxièmement, utilisez ul li pour créer le contenu du menu

<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. Enfin, créez le menu d'initialisation et définissez l'effet

  $(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(){}  // 子菜单隐藏时回调函数
  });
 });

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.