jQuery

【jQuery】レスポンシブでも使えるオフスクリーンナビゲーションプラグイン。okayNav

February 22, 2016
okaynav

okayNavはレスポンシブにも対応したオフスクリーンナビゲーションプラグイン。

HTML

<header id="header">
    <a class="site-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 -->

CSS

<link rel="stylesheet" href="css/okayNav.css" media="screen">

JS

<script src="js/jquery.okayNav.min.js"></script>

オプション

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 />',
    beforeopen : function() {}, // Will trigger before the nav gets opened
    open : function() {}, // Will trigger after the nav gets opened
    beforeclose : function() {}, // Will trigger before the nav gets closed
    close : function() {}, // Will trigger after the nav gets closed
});

ライセンスはMIT