Sidebar の動作を解析する

puikinsh/gentelella: Free Bootstrap 3 Admin Template の Sidebar menu がよくできているので解析する。

ポイントとなるコード

HTML 
<!-- はじめは nav-mid をセットしておく -->
<body class="nav-md">

</body>
CSS 
.nav-md {
  /* サイドバー（大）のスタイルを記述する（width > 991px） */
}
.nav-sm {
  /* サイドバー（小）のスタイルを記述する（メディアクエリーは関係ない） */
}
@media (max-width: 991px) {
  /* サイドバーを非表示にするスタイルを記述する（width <= 991px） */
  /* display: none など */
}
JavaScript 
/*
 * トグルアイコンのクリックイベントハンドラを登録
 */
$MENU_TOGGLE.on('click', function() {

  // nav-mid がセットされている場合
    // active な第二階層のサイドバーメニューを非表示にする。
    // ..
  // nav-sm がセットされている場合
    // active な第二階層のサイドバーメニューを表示する。
    // ..
  // nav-mid と nav-sm を入れ替える
  // ..
});

/*
 * サイドバー上の全てのa要素に対するクリックイベントハンドラを登録
 */
$SIDEBAR_MENU.find('a').on('click', function(ev) {

 // activeクラスは、1階層目のliだけではなく、2階層目のliにもセットされることがある
 // 但し、2階層目のliにactiveがセットされた後は画面がリロードされ、activeはクリアされる

  // activeなliをクリックした場合
    // その下の2階層目を折りたたむ（あれば）
  // activeでないliの場合
    // 全てのliをactiveではないようにする
    // 2階層目を全てたたむ
  // bodyのクラス属性値に nav-sm が含まれていた場合
    // 全てのliをactiveではないようにする
    // 2階層目を全てたたむ

  // 現在対象としているli要素に activeクラスを追加する

  // 対象項目の2階層目を展開する（あれば）

});

// カレントページのメニュー項目に、current-page クラスをセットする
// (この下でも同じことをしているが必要なのか？)
$SIDEBAR_MENU.find('a[href="' + CURRENT_URL + '"]').parent('li').addClass('current-page');

// カレントページのメニュー項目に、current-page や active クラスをセットして項目を展開する
$SIDEBAR_MENU.find('a').filter(function () {
  return this.href == CURRENT_URL;
}).parent('li').addClass('current-page').parents('ul').slideDown(function() {
  setContentHeight();
}).parent().addClass('active');

メモ

全般

  • HTML, CSS, JavaScript をうまく使っている。
  • JavaScriptもかなり利用している。
  • いろいろなタイミングで、setContentHeight()関数を実行して、右側コンテンツ領域（ここ）の高さを調整している。（そうしないと、一番下に背景色が表示されてしまうためだと思われる）
  • JavaScript で「現在のURLと一致するSidebar内項目」の判別処理をしているが、index.html に対してスラッシュだけでアクセスした時に対応するには、Sidebar内のリンクURLもそれに合わせておくこと。
  • h1 タグがない。

toggle ボタン

  • toggle ボタンをクリックする度に、bodyタグのclass属性値 nav-md, nav-sm を入れ替えている。
  • 画面がロードされた時点では、必ず nav-mid になっている。

Sidebar のステータス

  • サイドバー（大）
    • nav-mid クラス
    • CSSで設定されている。
  • サイドバー（小）
    • nav-sm クラス
    • CSSで設定されている。
  • サイドバー非表示
    • nav-mid クラス
    • CSS (with メディアクエリー)で設定されている。

Sidebar のステータス変化

  • デフォルト
    • ウィンドウ幅が991px以下であれば、「サイドバー非表示」
    • ウィンドウ幅が992px以上であれば、「サイドバー（大）」
  • トグルアイコンをクリックした時
    • ウィンドウ幅が991px以下の場合
      • 「サイドバー非表示」と、「サイドバー（小）」が切り替わる。
    • ウィンドウ幅が992px以上の場合
      • 「サイドバー（大）」と、「サイドバー（小）」が切り替わる。

Sidebar内の項目の折りたたみ、展開処理

  • jQuery の slideUp(), slideDown() を使っている。