解析した人
Laboradian.com
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以上の場合
- 「サイドバー(大)」と、「サイドバー(小)」が切り替わる。
- ウィンドウ幅が991px以下の場合
Sidebar内の項目の折りたたみ、展開処理
- jQuery の
slideUp()
,slideDown()
を使っている。