Materialize CSSフレームワークでは、画面を左から右へスワイプすると現れるサイドメニュー（SideNav）を提供しています。
Sidenavを使うには、Materialize の JavaScript モジュールをインポートする必要があります。ウェブブラウザの初期レンダリングを遅延させないため、</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 クラスを指定します。
<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>ここでは説明の都合上、メニューのアイコンを本文中に配置しましたが、一般的にはトップメニューの中などに配置します。
スマホの場合であっても、ウェブページがスワイプ動作に対応していることがわかりづらいので、ほかのアクセス手段を提供することは効果的です。
