使用superfish.js制作多级导航菜单效果
  • 分享到微信朋友圈
    X
立即下载 查看演示

Superfish 是一款简洁的多级下拉菜单插件，导航是一个完整网站必不可少的一个部分，我们可以使用div+css制作2级导航下拉菜单， 那么如何制作三级下拉菜单呢，使用div+css实现会很麻烦，这里我分享了一个三级下拉菜单效果。 Superfish 这个库以CSS、div和jQuery为基础，提供了优雅的解决方案，使得在网页上实现交互式的下拉菜单变得简单易行。

Superfish 官方给的案例样式非常简单，这里站长自己手写了一个漂亮的多级菜单效果

关键js与说明

初始化菜单使用的js代码非常简单。只需要几句话就可以实现菜单功能。

<script>
    // 初始化 superfish 插件
    $('.nav-menu').superfish({
        animation: {//animation动画效果
            opacity: 'show'
        },
        speed: 400//动画速度
    }); 
</script>

Superfish插件拥有更多的参数设置

参数说明

  • hoverClass: 'sfHover', 当鼠标移动到菜单上的样式

  • pathClass: 'overideThisToUse', the class you have applied to list items that lead to the current page

  • pathLevels: 1, // the number of levels of submenus that remain open or are restored using pathClass

  • delay: 800, //当鼠标移出子菜单后能继续显示的毫秒数

  • animation: {opacity:'show'}, // 相当于jQuery的$ .animate()方法的第一个参数

  • speed: 'normal', // 动画速度. 相当于 jQuery的$ .animate() 方法的第二个参数

  • autoArrows: true, // if true, arrow mark-up generated automatically = cleaner source code at expense of initialisation performance

  • dropShadows: true, // 菜单是否有阴影效果，默认 ture 有阴影

  • disableHI: false, // set to true to disable hoverIntent detection

  • onInit: function(){}, // Superfish 初始化完成后的回调函数 'this' 代表包含的ul标签

  • onBeforeShow: function(){}, // 开始展开动画之前的回调函数 'this' 代表将要开始被展开的 ul 标签

  • onShow: function(){}, // 一旦展开动画完成时的回调函数 'this' 代表被展开的 ul 标签

  • onHide: function(){} // 当子菜单关闭时的回调函数 'this' 代表刚刚被关闭的ul标签