プログラミング

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

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

JavaScript

JavaScriptで画面上の文字列をクリップボードにコピーする方法

目次1. はじめに2. Clipboard API and events を使う方法3. Selection API を使う方法(1) 基礎知識(2) プログラムの書き方(3) サンプルページ4. お …

Webサーバーの知識

分かりやすかった資料(外部サイト) 知っているようで知らないWebサーバアーキテクチャ // Speaker Deck

no image

Pug(旧Jade)テンプレートファイル内で、npmでインストールしたモジュールを使う方法

Pug(旧Jade)というJavaScriptのテンプレートエンジンがありますが、このテンプレートファイル内では JavaScriptが使えるので、複雑なHTMLを生成することができます。 但しデフォ …

Python

Python でファイルを読み込み何か加工した結果を出力するコードの雛形

Python でファイルを読み込んで、何か加工した結果を出力するコードの雛形を紹介します。

JavaScript でスロットマシーンを作ってみました(Canvas版)

JavaScript でスロットマシーンを作ってみました。 前回 とは違い、今回は Canvas を使っています。 目次1. スクリーンショット2. デモページ3. 内容4. ソースコード5. 参考情 …