Side Navigation

左横に表示するタイプのナビメニューです。
本ページにも使用しています。
Class
kk-sidenav-container サイドナビ用コンテナ
kk-sidenav-menu サイドナビ用メニュー領域
kk-sidenav-main サイドナビ用メイン領域
Attribute
theme="panel" パネルデザイン
shadow 影付きデザイン
menu-normal
menu-active		 マウスオーバーで表示を切り替えたい場合に使用します。
li要素配下の2階層まで有効。
使い方は下のサンプルコードを参照ください。

Sample

サンプル

下記の設定を変更することで、本ページのメニューでデザインをお試しいただけます。 
<div id="sidenav_container" class="kk-sidenav-container" theme="panel">
  <div id="sidenav_menu" class="kk-sidenav-menu kk-font-bold" shadow>
    <ul>
      <li><a href="./">
        <i class="material-icons kk-margin-right-ss">touch_app</i>
        <span menu-normal>Getting Started</span>
        <span menu-active>はじめに</span>
      </a></li>
      <li class="kk-divider"></li>
      <li>
        <div class="kk-accordion">
          <i class="material-icons">view_quilt</i>
          <span menu-normal>Layout</span>
          <span menu-active>レイアウト系</span>
        </div>
        <ul>
          <li><a href="./webfont.html">
            <span menu-normal>Web Font</span>
            <span menu-active>Webフォント</span>
          </a></li>
          <li><a href="./container.html">
            <span menu-normal>Container</span>
            <span menu-active>コンテナ</span>
          </a></li>
        </ul>
      </li>
    </ul>
  </div>
  <div class="kk-sidenav-main kk-padding-leftl@s kk-padding-s">
    メインコンテンツ
  </div>
</div>