プログラミング

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

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

関連記事

no image

ウェブプログラミングの知識があるとできること(その1)

先日、あるブログを見ていたら最新の記事だけが表示されない仕組みになっていました。 ウェブプログラミングの知識があるとこんなことができますという例として、その仕組を調べた時の過程を紹介します。 目次きっ …

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

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

Web Programming

ソフトウェアにおける日付・時刻フォーマット

目次ソフトウェアにおける日付・時刻フォーマット参考情報ISO 8601RFC 5322RFC 7231Common Log Format ソフトウェアにおける日付・時刻フォーマット ソフトウェア(特に …

React Redux

React + Redux の最小限の雛形コード

ここに載せている JavaScriptのコードは、React + Redux を使っています。 但し、まだ何も意味のある処理を書いていないので、このままだと 属性 id=”root” を持った要素内に …

Web Programming

素のJavaScript と Sass で Webページを作成するための雛形

素のJavaScript と Sass で Webページを作成するための雛形を紹介します(あくまで一例です)。