メニュー

これはスライドアウトメニューです。折りたたみ可能なコンポーネントを使用することで、サイドバーにドロップダウンを追加できます。デモをご覧になりたい場合は、小さな画面でサイドバーにこれを使用します。全画面ナビゲーションと組み合わせて使用​​するには、同じULの2つのコピーを使用する必要があります。

サイドナビHTMLは、ナビゲーションバーHTML内に含まれていないことに注意してください。

サイドナビデモ 


  <nav> <!-- navbar content here  --> </nav>

  <ul id="slide-out" class="sidenav">
    <li><div class="user-view">
      <div class="background">
        <img src="images/office.jpg">
      </div>
      <a href="#user"><img class="circle" src="images/yuna.jpg"></a>
      <a href="#name"><span class="white-text name">John Doe</span></a>
      <a href="#email"><span class="white-text email">jdandturk@gmail.com</span></a>
    </div></li>
    <li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
    <li><a href="#!">Second Link</a></li>
    <li><div class="divider"></div></li>
    <li><a class="subheader">Subheader</a></li>
    <li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
  </ul>
  <a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>

初期化


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

  // Initialize collapsible (uncomment the lines below if you use the dropdown variation)
  // var collapsibleElem = document.querySelector('.collapsible');
  // var collapsibleInstance = M.Collapsible.init(collapsibleElem, options);

  // Or with jQuery

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

オプション

名前 タイプ デフォルト 説明
edge 文字列 'left' サイドナビが表示される画面の側。
draggable ブール値 true スワイプジェスチャーでサイドナビを開閉できるようにします。
inDuration 数値 250 開始トランジションの長さ（ミリ秒）。
outDuration 数値 200 終了トランジションの長さ（ミリ秒）。
onOpenStart 関数 null サイドナビの開始時に呼び出される関数。
onOpenEnd 関数 null サイドナビの終了時に呼び出される関数。
onCloseStart 関数 null サイドナビの終了開始時に呼び出される関数。
onCloseEnd 関数 null サイドナビの終了時に呼び出される関数。
preventScrolling ブール値 true サイドナビが開いている間、ページのスクロールを防止します。

メソッド

jQueryはもはや依存関係ではないため、すべてのメソッドはプラグインインスタンスで呼び出されます。プラグインインスタンスは次のように取得できます


  var instance = M.Sidenav.getInstance(elem);

  /* jQuery Method Calls
    You can still use the old jQuery plugin method calls.
    But you won't be able to access instance properties.

    $('.sidenav').sidenav('methodName');
    $('.sidenav').sidenav('methodName', paramName);
  */
.open();

サイドナビを開きます。


instance.open();

.close();

サイドナビを閉じます。


instance.close();

.destroy();

プラグインインスタンスを破棄し、ティアダウンします


instance.destroy();

プロパティ

名前 タイプ 説明
el 要素 プラグインが初期化されたDOM要素。
options オブジェクト インスタンスが初期化されたオプション。
isOpen ブール値 サイドナビの開閉状態を示します。
isFixed ブール値 サイドナビが固定されているかどうかを示します。
isDragged ブール値 サイドナビがドラッグされているかどうかを示します。

閉じるトリガー

クラス .sidenav-close をサイドナビ内の要素に追加すると、その要素をクリックするとサイドナビが閉じます。これは、リンクをクリックしてもページが更新されないシングルページアプリケーションで役立ちます。


  <ul id="slide-out" class="sidenav">
      <li><a class="sidenav-close" href="#!">Clicking this will close Sidenav</a></li>
  </ul>
  <a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>

バリエーション

サイドバーに追加できる便利なバリエーションと追加要素をいくつか紹介します。

ドロップダウンHTML構造

サイドバーに折りたたみ可能なメニューを追加します。


    <ul id="slide-out" class="sidenav">
      <li><a href="#!">First Sidebar Link</a></li>
      <li><a href="#!">Second Sidebar Link</a></li>
      <li class="no-padding">
        <ul class="collapsible collapsible-accordion">
          <li>
            <a class="collapsible-header">Dropdown<i class="material-icons">arrow_drop_down</i></a>
            <div class="collapsible-body">
              <ul>
                <li><a href="#!">First</a></li>
                <li><a href="#!">Second</a></li>
                <li><a href="#!">Third</a></li>
                <li><a href="#!">Fourth</a></li>
              </ul>
            </div>
          </li>
        </ul>
      </li>
    </ul>
    <ul class="right hide-on-med-and-down">
      <li><a href="#!">First Sidebar Link</a></li>
      <li><a href="#!">Second Sidebar Link</a></li>
      <li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
      <ul id='dropdown1' class='dropdown-content'>
        <li><a href="#!">First</a></li>
        <li><a href="#!">Second</a></li>
        <li><a href="#!">Third</a></li>
        <li><a href="#!">Fourth</a></li>
      </ul>
    </ul>
    <a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>

フルスクリーンHTML構造

すべての画面サイズでメニューにアクセスできるようにするには、.sidenav-trigger に単純なヘルパークラス show-on-large を追加するだけです。


    <ul id="slide-out" class="sidenav">
      <li><a href="#!">First Sidebar Link</a></li>
      <li><a href="#!">Second Sidebar Link</a></li>
    </ul>
    <a href="#" data-target="slide-out" class="sidenav-trigger show-on-large"><i class="material-icons">menu</i></a>

固定HTML構造

クラス sidenav-fixed を追加すると、サイドナビが固定され、大きな画面で開き、小さな画面では通常の機能に隠れます。左側のサイドナビは、この例です。


    <ul id="slide-out" class="sidenav sidenav-fixed">
      <li><a href="#!">First Sidebar Link</a></li>
      <li><a href="#!">Second Sidebar Link</a></li>
    </ul>
    <a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>

これを使用する予定がある場合は、コンテンツをサイドメニューの幅でオフセットする必要があります。オフセットコンテンツが配置される場所にパディングを配置します。この場合は、ヘッダー、メイン、フッターにあります。


    header, main, footer {
      padding-left: 300px;
    }

    @media only screen and (max-width : 992px) {
      header, main, footer {
        padding-left: 0;
      }
    }