Maison > interface Web > js tutoriel > le corps du texte

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

WBOY
Libérer: 2016-05-16 16:02:46
original
1866 Les gens l'ont consulté

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>
Copier après la connexion

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>
Copier après la connexion

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(){}  // 子菜单隐藏时回调函数
  });
 });
Copier après la connexion

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

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal