Gentelella の Sidebar を解析してみました

1. はじめに

Gentelella Alela! は、Bootstrap v3 を使ったダッシュボードテンプレートです。

今回、このテンプレートのサイドバー部分について簡単な解析を行いました。

実際にこのテンプレートを使って新たなページを追加し、その画面内にメモをとりました。

ちゃんとした説明になっておらず申し訳ありませんが、簡単なまとめをここにも書いておこうと思います。

サイドバーの形態は以下の３種類となっています。

それぞれのスタイルは以下のように定義されています。

nav-mid, nav-sm クラスは、body タグに対してセットされます。

body タグに、nav-mid クラスがセットされます。

ですので、ウィンドウ幅によって、「サイドバー（大）」「サイドバー非表示」のどちらかの表示になります。

クリックする度に、body タグにセットされた nav-mid もしくは nav-sm クラスがもう一方に切り替わります。

ですので、ウィンドウ幅が 992px以上であれば、「サイドバー（大）」と「サイドバー（小）」との切替になり、それ以下のウィンドウ幅であれば、「サイドバー非表示」と「サイドバー（小）」との切替になります。

jQuery を使って細かく制御しています。

選択中の項目に active, current-page といったクラスをセット（それ以外からは削除）したり、jQuery の slideUp, slideDown を使って第二階層の項目を開閉したりといった処理を行っています。なかなか地道に処理が記述されています。

デザインや動作を少し変更したいだけなら、custom.js と custom.css を編集するだけで済みそうです。必要なら圧縮して使用すればよいでしょう（custom.min.js, custom.min.css として）。

以上、ポイントとなりそうな部分について書きました。