≡ハンバーガーメニューは終わり!スマホサイトのメニュー表現の決定版※JSなし

スマホといえば、3本線のハンバーガーメニューが使用されるようになっていますが、そのユーザビリティについては様々な調査から見直しが求められています。
スマホでよく使われるハンバーガーメニュー≡のABテスト結果とは? | Skan
今回紹介するParadeiserを利用するとJavaScriptなしのCSSのみで上部固定のメニューを簡単に導入可能です。

sponsors

使用方法

Paradeiserからファイル一式をダウンロード。
CSSを読み込みます。
<link rel="stylesheet" href="paradeiser.css">
メニューを下記のように記述します。

	<!-- 各メニュー -->
<nav class="paradeiser">
    <a href="#">
        <img src="logo.png" alt="Logo" class="paradeiser_logo">
    </a>
    <a href="#">
        <span>Home</span>
    </a>

    <!-- ドロップダウンメニュー -->
    <div class="paradeiser_dropdown">
        <a href="#paradeiser-more" id="paradeiser-dropdown">
            <span>More</span>
        </a>
        <!-- 出てくるメニュー -->
        <ul class="paradeiser_children" id="paradeiser-more">
            <li><a href="#">Terms of Service</a></li>
            <li><a href="#">About Us</a></li>
        </ul>
    </div>
</nav>
上記でメニューは完成です。
またスクロール時にメニューを隠すには下記の記述を</body>直上に加えます。

<script src="//cdnjs.cloudflare.com/ajax/libs/headroom/0.7.0/headroom.min.js"></script>
<script>
    document.getElementById("paradeiser-dropdown").addEventListener("click", function(event){
        event.preventDefault();
        document.getElementById("paradeiser-more").classList.toggle("open");
    });
    document.getElementById("greybox").addEventListener("click", function(event){
        event.preventDefault();
        document.getElementById("paradeiser-more").classList.remove("open");
    });

    var myElement = document.querySelector(".paradeiser");
    var headroom  = new Headroom(myElement, {
        tolerance : 5,
        onUnpin : function() {
            document.getElementById("paradeiser-more").classList.remove("open");
        }
    });
    headroom.init();
</script>

サンプル


Javascriptサンプルページ一覧
skuare.net

sponsors