メニュー

左揃えリンク

ナビゲーションバーのリンクを左揃えにするには、それらを含む <ul> に left クラスを追加するだけです。



  <nav>
    <div class="nav-wrapper">
      <a href="#" class="brand-logo right">Logo</a>
      <ul id="nav-mobile" class="left hide-on-med-and-down">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">Components</a></li>
        <li><a href="collapsible.html">JavaScript</a></li>
      </ul>
    </div>
  </nav>

ロゴを中央揃えにする

ロゴは、中型以下の画面では自動的に中央に配置されますが、ロゴを常に中央に配置したい場合は、<a class="brand-logo"> に center クラスを追加します。これを使用する場合は、リンクが重ならないように自分で確認する必要があります。



  <nav>
    <div class="nav-wrapper">
      <a href="#" class="brand-logo center">Logo</a>
      <ul id="nav-mobile" class="left hide-on-med-and-down">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">Components</a></li>
        <li><a href="collapsible.html">JavaScript</a></li>
      </ul>
    </div>
  </nav>

アクティブな項目

現在のページを示すために、li タグに active クラスを追加します。



  <nav>
    <div class="nav-wrapper">
      <a href="#!" class="brand-logo center">Logo</a>
      <ul class="left hide-on-med-and-down">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">Components</a></li>
        <li class="active"><a href="collapsible.html">JavaScript</a></li>
      </ul>
    </div>
  </nav>

アイコンリンク


リンクにアイコンを追加できます。アイコンのみのリンクには、追加のクラスは必要ありません。i タグを挿入するだけで機能します。


  <nav>
    <div class="nav-wrapper">
      <a href="#!" class="brand-logo"><i class="material-icons">cloud</i>Logo</a>
      <ul class="right hide-on-med-and-down">
        <li><a href="sass.html"><i class="material-icons">search</i></a></li>
        <li><a href="badges.html"><i class="material-icons">view_module</i></a></li>
        <li><a href="collapsible.html"><i class="material-icons">refresh</i></a></li>
        <li><a href="mobile.html"><i class="material-icons">more_vert</i></a></li>
      </ul>
    </div>
  </nav>


テキストリンクにアイコンを追加するには、アイコンを配置したい場所に応じて、アイコンに left または right クラスを追加する必要があります。


  <nav>
    <div class="nav-wrapper">
      <a href="#!" class="brand-logo">Logo</a>
      <ul class="right hide-on-med-and-down">
        <li><a href="sass.html"><i class="material-icons left">search</i>Link with Left Icon</a></li>
        <li><a href="badges.html"><i class="material-icons right">view_module</i>Link with Right Icon</a></li>
      </ul>
    </div>
  </nav>

ボタン


リンクにボタンを追加できます。ボタンの場合、追加のクラスは必要ありません。a タグに .btn クラスを追加するだけです。


  <nav>
    <div class="nav-wrapper">
      <a href="#!" class="brand-logo">Logo</a>
      <ul class="right hide-on-med-and-down">
        <li><a class="waves-effect waves-light btn">Button</a></li>
        <li><a class="waves-effect waves-light btn">Button <i class="material-icons right">cloud</i></a></li>
        <li><a class="waves-effect waves-light btn-large">Large Button</a></li>
      </ul>
    </div>
  </nav>

拡張ナビゲーションバーの中央にある FAB

拡張ナビゲーションバーに中央 FAB を追加します。




  <nav class="nav-extended">
    <div class="nav-wrapper">
      <a href="#!" class="brand-logo">Logo</a>
      <ul class="right hide-on-med-and-down">
        <li><a>A link</a></li>
        <li><a>A second link</a></li>
        <li><a>A third link</a></li>
      </ul>
    </div>
    <div class="nav-content">
      <span class="nav-title">Title</span>
      <a class="btn-floating btn-large halfway-fab waves-effect waves-light teal">
        <i class="material-icons">add</i>
      </a>
    </div>
  </nav>

検索バー


ナビゲーションバーに検索フォームを追加できます。


  <nav>
    <div class="nav-wrapper">
      <form>
        <div class="input-field">
          <input id="search" type="search" required>
          <label class="label-icon" for="search"><i class="material-icons">search</i></label>
          <i class="material-icons">close</i>
        </div>
      </form>
    </div>
  </nav>

モバイル折りたたみボタン


ナビゲーションバーのサイズが変更されると、右側のリンクがハンバーガーアイコン menu に変わることがわかります。この機能を取得するには、以下の例を参照してください。 sidenav-trigger 行全体を nav に追加します。


  <nav>
    <div class="nav-wrapper">
      <a href="#!" class="brand-logo">Logo</a>
      <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
      <ul class="right hide-on-med-and-down">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">Components</a></li>
        <li><a href="collapsible.html">Javascript</a></li>
        <li><a href="mobile.html">Mobile</a></li>
      </ul>
    </div>
  </nav>

  <ul class="sidenav" id="mobile-demo">
    <li><a href="sass.html">Sass</a></li>
    <li><a href="badges.html">Components</a></li>
    <li><a href="collapsible.html">Javascript</a></li>
    <li><a href="mobile.html">Mobile</a></li>
  </ul>

初期化

ナビゲーションバーに sidenav-trigger 行を含めたら、プラグインを初期化するだけです。以下の例では、上記の例のクラスを変更していないと仮定しています。変更した場合は、以下の行のセレクターをそれに合わせて変更してください。


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

  // Or with jQuery

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