[CSS]軽量のスタイルシートで、スマホにもデスクトップにも快適で分かりやすいナビゲーション -Paradeiser

サイト構築 -CSS

Post on:2015年9月16日

sponsorsr

スマホで表示すると三本線のアイコンになるハンバーガーメニューは、確かに小さい画面の問題を解決する方法の一つですが、ベストな選択ではありません。

ハンバーガーメニューの良い点を利用し、悪い点を改善した、スクリプト無しでレスポンシブ対応のナビゲーションを実装するスタイルシートを紹介します。

Paradeiser
Paradeiser -GitHub

Paradeiserの特徴
Paradeiserのデモ
Paradeiserの使い方

Paradeiserの特徴

実装は簡単で、超軽量: Paradeiserは1.3KBのスタイルシート1つだけで、簡単に実装できます。
CSS Only: jQueryやスクリプトは使用しません。
レスポンシブ対応: スマホ、タブレット、デスクトップのそれぞれで快適に操作できます。
オーバーフロー: ナビゲーションはコンテンツにオーバーフローで表示されます。
スクロール時の非表示にも対応: 「Headroom.js」を使うことで、スクロール時に自動的に非表示・表示にできます。

Paradeiserのデモ

ハンバーガーメニューの悪い点は分かりにくいアイコンと全てのアイテムが隠されてしまうことです。
参考: The Hamburger Menu Doesn't Work

Paradeiserはこの2つの問題を解決し、スマホでもタブレットでもデスクトップでも快適に操作できるよう設計されたナビゲーションです。
まずは、デスクトップ時の状態で見てみましょう。

デモページ

上部のバーに表示されるナビゲーションにはロゴを含む主要なリンクを3-5個が配置され、それ以外は右端のドロップダウンで表示されます。

デモページ: ドロップダウン

基本的なデザインはスマホ時でも同じで、ロゴを含む重要なリンクは常に表示された状態です。

デモページ: 幅480pxで表示

Paradeiserの使い方

Step 1: 外部ファイル

当スタイルシートを外部ファイルとして記述します。

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

Step 2: HTML

nav要素の中に各アイテムを配置し、ドロップダウンはリスト要素で実装します。

<nav class="paradeiser">
    <a href="#">
        <img src="logo.png" alt="Logo" class="paradeiser_logo">
    </a>
    <a href="#">
        <div class="paradeiser_icon_canvas">
            <img src="img/menu_home.svg" alt="Navigate to Home">
        </div>
        <span>Home</span>
    </a>
    <a href="#">
        <div class="paradeiser_icon_canvas">
            <img src="img/menu_shop.svg" alt="Navigate to Shop">
        </div>
        <span>Shop</span>
    </a>

    <!-- paste in as many links as you want -->

    <!-- and include the dropdown aswell -->
    <span class="paradeiser_dropdown">
        <a href="#paradeiser-more" id="paradeiser-dropdown">
            <div class="paradeiser_icon_canvas">
                <img src="img/menu_overflow.svg" alt="">
            </div>
            <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>
            <li><a href="#">Yolo</a></li>
            <li class="paradeiser-hidden-desktop"><a href="#">Hidden on desktop</a></li>
            <li class="paradeiser-hidden-tablet"><a href="#">Hidden on tablet</a></li>
            <li class="paradeiser-hidden-phone"><a href="#">Hidden on phone</a></li>
            <li id="greybox"><a href="#!"></a></li>
        </ul>
    </span>
</nav>

スクロール時にバーを非表示にする場合

「Headroom.js」を使うことで、下にスクロールした際にバーをアニメーションで上部に隠し、上にスクロールした際にバーを表示させることもできます。

<script src="//cdnjs.cloudflare.com/ajax/libs/headroom/0.7.0/headroom.min.js"></script>
<script>
 // enabling to open the overflow menu as the pure css link
    // would toggle a scroll and therefore hide the menu
    document.getElementById("paradeiser-dropdown").addEventListener("click", function(event){
        // stopping the scroll
        event.preventDefault();
        // toggling the class
        document.getElementById("paradeiser-more").classList.toggle("open");
    });

    // hide the menu on click onto greybox
    document.getElementById("greybox").addEventListener("click", function(event){
        // stopping the scroll
        event.preventDefault();
        // toggling the class
        document.getElementById("paradeiser-more").classList.remove("open");
    });

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