プログラミング

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

投稿日:2018年1月4日 更新日:

1. はじめに

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

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

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

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

2. サイドバーの形態

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

  1. サイドバー(大)
  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.jscustom.css を編集するだけで済みそうです。必要なら圧縮して使用すればよいでしょう(custom.min.js, custom.min.css として)。

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

関連

Bootstrap

ボタンを押した直後に BootstrapのTooltipを数秒間表示する方法

2016.11.03

webpack 3 を使ったウェブページ開発手順

2017.06.30

スポンサードリンク

📂-プログラミング
-, ,

執筆者:labo


comment

メールアドレスが公開されることはありません。

関連記事

定期的にDOM要素をアニメーションするサンプルを用意しました

定期的にDOM要素をアニメーションするサンプルを用意しました。 DOM要素が対象ですので、div要素や img要素などが動かせます。 目次1. デモ2. ソースコード3. まとめ4. 参考 1. デモ …

Firebase

Firebase を利用する手順

Firebase を利用する手順について説明しています。

Web Storage を使ったサンプルページを作りました

Web Storage を使ったサンプルページを作りました。 目次1. スクリーンショット2. デモページ3. 動作4. ソースコード5. 参考情報 1. スクリーンショット スクリーンショット 2. …

Python

Pythonのバージョンを切り替える pyenv の使い方

Pythonのバージョンを切り替える pyenv の使い方について説明します。

Web Components

Web Components のサンプルコード

Web Components を使ったサンプルコードを紹介します。