目次
1. はじめに
Gentelella Alela! は、Bootstrap v3 を使ったダッシュボードテンプレートです。
今回、このテンプレートのサイドバー部分について簡単な解析を行いました。
実際にこのテンプレートを使って新たなページを追加し、その画面内にメモをとりました。
ちゃんとした説明になっておらず申し訳ありませんが、簡単なまとめをここにも書いておこうと思います。
2. サイドバーの形態
サイドバーの形態は以下の3種類となっています。
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
として)。
以上、ポイントとなりそうな部分について書きました。