October 9, 2017

JS Off-Canvas Responsive NavigationはCSS＆JavaScriptを使用したオフキャンバスレスポンスナビゲーション

  <nav class="nav-main">

    <!-- row -->
    <div class="row row-nav">

      <!-- container -->
      <div class="grid-container">

        <!-- grid-x -->
        <div class="grid-x grid-padding-x">

          <div class="cell small-12 show-for-small-only">
            <a href="#" class="button-launch-off-canvas-menu vertical-center-left"><i class="material-icons">menu</i></a>
          </div>

          <div class="cell medium-12 hide-for-small-only">
            <ul class="dropdown menu align-center">
              <li><a href="#">One</a></li>
              <li><a href="#">Two</a>
                <ul class="menu nested vertical">
                  <li><a href="#">Item 2A</a></li>
                  <li><a href="#">Item 2B</a></li>
                  <li><a href="#">Item 2C</a></li>
                </ul>
              </li>
              <li><a href="#">Three</a>
                <ul class="menu nested vertical">
                  <li><a href="#">Item 3A</a></li>
                  <li><a href="#">Item 3B</a></li>
                  <li><a href="#">Item 3C</a></li>
                </ul>
              </li>
              <li><a href="#">Four</a></li>
            </ul>
          </div>

        </div>
        <!-- grid-x -->

      </div>
      <!-- container -->

    </div>
    <!-- row -->

  </nav>

  <nav class="nav-off-canvas hide-for-medium hide-for-large">

    <!-- row -->
    <div class="row row-nav row-off-canvas">

      <!-- grid-x -->
      <div class="grid-x grid-padding-x off-canvas-background">
        <div class="cell small-8 cell-off-canvas">
          <a href="#" class="button-exit-off-canvas-menu"><i class="material-icons">close</i></a>
          <ul class="vertical menu accordion-menu align-left">
            <!-- to be appended via JavaScript -->
          </ul>
        </div>
      </div>
      <!-- grid-x -->

    </div>
    <!-- row -->

  </nav>