Javascript

【Javascript】レスポンシブフルスクリーンナビゲーションchips

October 6, 2018
chips.js

Chips.jsはレスポンシブフルスクリーンナビゲーションメニュー。

Get it now!

CSS:

<link rel="stylesheet" href="css/chipsjs.min.css">

JavaScript:

<script src="js/chipsjs.js"></script>
<script type="text/javascript">

    $(function() {
        $('.chipsjs').chipsjs();
    });

</script>

HTML (example):

<button class="chipsjs__trigger" aria-expanded="false" aria-controls="menu-list" aria-label="show or hide menu">
    <span class="chipsjs__trigger-icon"></span>
</button>

<nav class="chipsjs">
    <ul id="menu-list" class="chipsjs__ul" role="menubar">

        <li class="chipsjs__li" role="menuitem">
            <a href="#" aria-haspopup="false" data-href="http://example.com/home">Home</a>
        </li>

        <li class="chipsjs__li" role="menuitem">
            <a href="#" aria-haspopup="true" aria-expanded="false" data-href="http://example.com/about-us">Vegetables</a>
            <ul class="chipsjs__ul-nested" role="menu" aria-hidden="true">
                <li class="chipsjs__li" role="menuitem"><a href="#">Potato</a></li>
                <li class="chipsjs__li" role="menuitem"><a href="#">Tomato</a></li>
                <li class="chipsjs__li" role="menuitem"><a href="#">Bean</a></li>
                ...
            </ul>
        </li>

        <li class="chipsjs__li" role="menuitem">
            <a href="#" aria-haspopup="true" aria-expanded="false" data-href="http://example.com/blog">Frruit</a>
            <ul class="chipsjs__ul-nested" role="menu" aria-hidden="true">
                <li class="chipsjs__li" role="menuitem"><a href="#">Apple</a></li>
                <li class="chipsjs__li" role="menuitem"><a href="#">Banana</a></li>
                <li class="chipsjs__li" role="menuitem"><a href="#">Orange</a></li>
                ...
            </ul>
        </li>

        <li class="chipsjs__li" role="menuitem">
            <a href="#" aria-haspopup="true" aria-expanded="false" data-href="http://example.com/shop">Clothes</a>
            <ul class="chipsjs__ul-nested" role="menu" aria-hidden="true">
                <li class="chipsjs__li" role="menuitem"><a href="#">Coat</a></li>
                <li class="chipsjs__li" role="menuitem"><a href="#">Dress</a></li>
                <li class="chipsjs__li" role="menuitem"><a href="#">Hat</a></li>
                ...
            </ul>
        </li>

        <li class="chipsjs__li" role="menuitem" tabindex="0">
            <a href="#" aria-haspopup="false" data-href="http://example.com/contact">Contact</a>
        </li>
    </ul>
</nav>