Javascript
【Javascript】CSS&JavaScriptを使用したオフキャンバスナビゲーションJS Off-Canvas Responsive Navigation
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>