jQuery menu plug-in superfish guide_jquery

Alamat muat turun: http://plugins.jquery.com/project/Superfish

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

Beberapa ciri dan kesan Superfish:

Gunakan CSS tulen untuk mencapai kesan dinamik, pelayar silang, menyokong pelayar IE6 yang paling teruk
Anda boleh menetapkan menu lungsur untuk bersembunyi secara automatik apabila tetikus pergi. Lalai ialah 800 milisaat
Sokong animasi fade-in dan fade-out
Sokong respons papan kekunci
Tambah anak panah gesaan secara automatik pada menu induk yang mengandungi submenu
Menyokong kesan bayang-bayang, tetapi memerlukan sokongan penyemak imbas yang baik, seperti Firefox, chrome...pelayar IE6 yang paling teruk dikecualikan
Fungsi js panggil balik pilihan

Arahan penggunaan

1. Mula-mula, perkenalkan fail Jquery dan Superfish ke dalam halaman

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

2. 2. Kedua, gunakan ul li untuk membuat kandungan 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 Akhir sekali, buat menu permulaan dan tetapkan kesan

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

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.