FlexNav jQuery 插件技术文档

2024-12-28 12:09:47作者：裘旻烁

1. 安装指南

引入CSS样式

在 HTML 文档的 <head> 标签内引入 flexnav.css 文件：

<link href="css/flexnav.css" rel="stylesheet" type="text/css" />

引入jQuery和插件脚本

在 HTML 文档的 <body> 标签结束前引入 jQuery 库和 jquery.flexnav.min.js 脚本：

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.flexnav.min.js"></script>

初始化插件

在文档加载完毕后，通过以下代码初始化 FlexNav 插件：

<script>
    $(document).ready(function() {
        $(".flexnav").flexNav();
    });
</script>

2. 项目使用说明

基本结构

使用一个简单的无序列表作为菜单结构，并添加 flexnav 类和 data-breakpoint 属性：

<ul class="flexnav" data-breakpoint="800">
    <li>...</li>
</ul>

添加菜单按钮

在小屏幕上显示的菜单按钮应放置在导航标记之外：

<div class="menu-button">菜单</div>

单页应用

对于单页应用，在 <body>、.menu-button 和 flexnav <ul> 上添加 .one-page 类：

<ul class="flexnav one-page" data-breakpoint="800">
    <li>...</li>
</ul>

3. 项目API使用文档

配置选项

以下是一些可用的配置选项：

$(".flexnav").flexNav({
    'animationSpeed':     250,            // 默认下拉动画速度
    'transitionOpacity':  true,           // 默认透明度动画
    'buttonSelector':     '.menu-button', // 默认菜单按钮类名
    'hoverIntent':        false,          // 使用 hoverIntent 插件时设置为 true
    'hoverIntentTimeout': 150,            // hoverIntent 默认超时时间
    'calcItemWidths':     false,          // 动态计算顶级导航项宽度
    'hover':              true            // 是否启用悬停支持
});