ラボラジアン 目次
1. はじめに
Gentelella Alela! は、Bootstrap v3 を使ったダッシュボードテンプレートです。
今回、このテンプレートのサイドバー部分について簡単な解析を行いました。
実際にこのテンプレートを使って新たなページを追加し、その画面内にメモをとりました。
ちゃんとした説明になっておらず申し訳ありませんが、簡単なまとめをここにも書いておこうと思います。
2. サイドバーの形態
サイドバーの形態は以下の３種類となっています。
- サイドバー（大）
- サイドバー（小）
- サイドバー非表示
3. サイドバーの形態のスタイル定義
それぞれのスタイルは以下のように定義されています。
- サイドバー（大）
nav-midクラスとして定義されています。- サイドバー（小）
nav-smクラスとして定義されています。- サイドバー非表示
- メディアクエリーを使用し、ウィンドウ幅が 991px 以下の場合の
nav-midクラスとして定義されています。
nav-mid, nav-sm クラスは、body タグに対してセットされます。
4. ページを開いた時のデフォルト
body タグに、nav-mid クラスがセットされます。
ですので、ウィンドウ幅によって、「サイドバー（大）」「サイドバー非表示」のどちらかの表示になります。
5. トグルアイコンをクリックした時の動作
クリックする度に、body タグにセットされた nav-mid もしくは nav-sm クラスがもう一方に切り替わります。
ですので、ウィンドウ幅が 992px以上であれば、「サイドバー（大）」と「サイドバー（小）」との切替になり、それ以下のウィンドウ幅であれば、「サイドバー非表示」と「サイドバー（小）」との切替になります。
6. サイドバー内の各メニュー項目をクリックした時の動作
jQuery を使って細かく制御しています。
選択中の項目に active, current-page といったクラスをセット（それ以外からは削除）したり、jQuery の slideUp, slideDown を使って第二階層の項目を開閉したりといった処理を行っています。なかなか地道に処理が記述されています。
7. まとめ
デザインや動作を少し変更したいだけなら、custom.js と custom.css を編集するだけで済みそうです。必要なら圧縮して使用すればよいでしょう（custom.min.js, custom.min.css として）。
以上、ポイントとなりそうな部分について書きました。
関連
スポンサードリンク
