SE学院 / CSS / Materialize / Sidenav

Materialize SideNav

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

テンプレート

Sidenavを使うには、MaterializeJavaScript モジュールをインポートする必要があります。ウェブブラウザの初期レンダリングを遅延させないため、</body>の直前などに配置するのがよいでしょう。

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

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <!-- Google icon font -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Materialize CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  </head>
  <body>
    <!-- Materialize JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <!-- Initialize sidenav -->
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        var elems = document.querySelectorAll('.sidenav');
        var instances = M.Sidenav.init(elems, {});
      });
    </script>
  </body>
</html>

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

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <!-- Google icon font -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Materialize CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous">
    </script>
  </head>
  <body>
    <!-- Materialize JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <!-- Initialize sidenav -->
    <script>
      $(document).ready(function(){
        $('.sidenav').sidenav();
      });
    </script>
  </body>
</html>

オプション

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とは、左側から飛び出してくるナビゲーション・メニューです。

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

ナビゲーション・メニューのコンテンツを作成するには、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

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

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