jquery.okayNav.js 自适应响应式导航菜单插件-BFW插件库

jquery.okayNav.js 自适应响应式导航菜单插件

使用方式：

第一步引入bfwone 加载依赖项jquery

第二步use插件及css和主题css

第三步配置参数

var navigation = $('#nav-main').okayNav({
    parent : '', // will call nav's parent() by default
    toggle_icon_class : 'okayNav__menu-toggle',
    toggle_icon_content: '<span /><span /><span />',
    align_right: true, // If false, the menu and the kebab icon will be on the left
    swipe_enabled: true, // If true, you'll be able to swipe left/right to open the navigation
    threshold: 50, // Nav will auto open/close if swiped >= this many percent
    beforeOpen : function() {}, // Will trigger before the nav gets opened
    afterOpen : function() {}, // Will trigger after the nav gets opened
    beforeClose : function() {}, // Will trigger before the nav gets closed
    afterClose : function() {}, // Will trigger after the nav gets closed
    itemHidden: function() {}, // Will trigger after an item moves to the hidden navigation
    itemDisplayed: function() {} // Will trigger after an item moves to the visible navigation
});

parent：导航菜单的父元素。
toggle_icon_class：侧边栏菜单切换按钮的class类。
toggle_icon_content：切换按钮的HTML标签。
align_right：切换按钮是否右对齐。
swipe_enabled：是否支持左右滑动来打开导航菜单。
threshold：如果滑动的阈值小于这个值，侧边栏菜单将自动打开或关闭。
beforeOpen：回调函数，在侧边栏菜单打开前触发。
afterOpen：回调函数，在侧边栏菜单打开后触发。
beforeClose：回调函数，在侧边栏菜单关闭前触发。
afterClose：回调函数，在侧边栏菜单关闭后触发。
itemHidden：回调函数，一个菜单项移动到侧边栏菜单时触发。
itemDisplayed：回调函数，一个菜单项从侧边栏菜单移动到菜单时触发。

方法

navigation.okayNav('openInvisibleNav');：打开侧边栏菜单。
navigation.okayNav('closeInvisibleNav');：关闭侧边栏菜单。
navigation.okayNav('toggleInvisibleNav');：切换侧边栏菜单。
navigation.okayNav('recalcNav');：重新计算菜单项是显示还是隐藏。
navigation.okayNav('getParent');：获取菜单的父元素。
navigation.okayNav('getVisibleNav');：获取可见的导航菜单。
navigation.okayNav('getInvisibleNav');：获取隐藏的导航菜单。
navigation.okayNav('getNavToggleIcon');：获取切换按钮图标。
navigation.okayNav('getChildrenWidth');：获取导航菜单子元素的总宽度。
navigation.okayNav('destroy');：销毁插件。

完整示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>

    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["jquery.okayNav", "okayNav-base|okayNav-theme"], function() {
                var navigation = $('#nav-main').okayNav();
            });
        });
    </script>
    <style>
        * {
            box-sizing: border-box
        }
        *:before, *:after {
            box-sizing: inherit
        }

        html {
            font-size: 62.5%;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            font-family: @font-family-base;
        }

        body {
            font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
            font-size: 1.4rem;
            line-height: 1.42857143;
            color: #555;
            background-color: #f7f7f7;
        }

        a {
            text-decoration: none
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        main {
            margin-top: 10rem;
            text-align: center;
        }
    </style>
</head>
<body>
    <header id="header" class="okayNav-header">
        <a class="okayNav-header__logo" href="#">
            Logo
        </a>

        <nav role="navigation" id="nav-main" class="okayNav">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Shop</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contacts</a></li>
                <li><a href="#">About us</a></li>
                <li><a href="#">Testimonials</a></li>
            </ul>
        </nav>
    </header>
    <!-- /header -->

    <main>
        <h1>缩放窗体大小查看效果</h1>
      
    </main>

</body>
</html>