jQuery

【jQuery】軽量のドロップダウン付きのタッチメニュープラグインCeNav

February 10, 2017
cenav

CeNavは軽量のドロップダウン付きのタッチメニュープラグイン。

Gettings started

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="jquery.plugin.cenav.1.0.js"></script>

HTML

<ul class="top-level">
    <li><a href="#">Page</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Parent <span></span></a>
        <ul class="sub-menu">
            <li><a href="#">Child</a></li>
            <li><a href="#">Child <span></span></a>
                <ul class="sub-menu">
                    <li><a href="#">Grand Child</a></li>
                    <li><a href="#">Grand Child</a></li>
                </ul>
            </li>
            <li><a href="#">Child</a></li>
            <li><a href="#">Child</a></li>
        </ul>
    </li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Page</a></li>
</ul>

CSS

.active {
    display: block;
}
.close {

}

Finally

$('ul.top-level span').cenav();

Future Versions

// Maintain focus
$('ul.top-level').on('click', function(e){

    e.stopPropagation();

});

// Lose focus
$('html').on('click', function(e){

    $('.close, .active').removeClass('close active');

});

MIT