サイドバー (Sidenav)

Materialize CSSフレームワークでは、画面を左から右へスワイプすると現れるサイドバーを提供しています。

準備

Sidenavを使うには、MaterializeのJavaScriptモジュールをインポートする必要があります。

ウェブブラウザの初期レンダリングを遅延させないため、</body>の直前などに配置するのがよいでしょう。

    <!--JavaScript at end of body for optimized loading-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  </body>
</html>

初期化

Sidenavを初期化するために、JavaScriptコードが必要です。

document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('.sidenav');
  var instances = M.Sidenav.init(elems, {});
});

jQueryを使っている場合は、もっと簡潔にSidenavを初期化できます。

$(document).ready(function(){
  $('.sidenav').sidenav();
});

オプション

Sidenav.initの第2引数には、次のプロパティを指定できます。

プロパティ 説明
edge Sidenavが表示される画面の側面
draggable Sidenavを開閉するスワイプジェスチャーを許可します。
inDuration 入力遷移のミリ秒単位の長さ。
outDuration 終了遷移のミリ秒単位の長さ。
preventScrolling Sidenavが開いているときにページがスクロールしないようにします。

Sidenavを右から出てくるようにするには、次のようにします。

document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('.sidenav');
  var instances = M.Sidenav.init(elems, {
    "edge" : "right"
  });
});

Sidenavの使い方

Sidenavとは、左側から飛び出してくるナビゲーション・メニューです。

スマホであれば、左端から右へスワイプすると現れてきます。

<ul id="slide-out" class="sidenav">
  <li>
    <a href="/css/materialize/">Materialize</a>
  </li>
  <li>
    <a href="#">
      <i class="material-icons">mail_outline</i>お問い合わせ
    </a>
  </li>
</ul>

スマホであればスワイプでSidenavを表示することができますが、パソコンではスワイプ動作ができません。

パソコンからでもSidenavにアクセスできるようにするためには、リンクを使います。

<a href="#" data-target="slide-out" class="sidenav-trigger">
  <i class="material-icons">menu</i>
</a>

menu

ここでは説明の都合上、メニューのアイコンを本文中に配置しましたが、一般的にはトップメニューの中などに配置します。

スマホの場合であっても、ウェブページがスワイプ動作に対応していることがわかりづらいので、ほかのアクセス手段を提供することは効果的です。