プログラミング

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

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

関連記事

web development

Web Development for Beginners を読む:レッスン3

目次1. はじめに2. Lesson 3: Creating Accessible WebpagesTools to useScreen readersContrast checkersLightho …

web development

User Timing API を使って、特定の処理に掛かった時間を計測する

目次1. User Timing API について2. サンプルコード3. デモページ4. 参考仕様MDNブラウザの対応状況 1. User Timing API について User Timing L …

プログラミング

Rubyのように書け、Cのように速いプログラム言語 Crystal の基本的な使い方

Crystal というプログラミング言語の基本的な使い方について紹介します。 実際に「使ってみたい」「試してみたい」といった方に向けて、コードを書き始めるまでの導入方法について書きました。文法の説明な …

Milkcocoa のチュートリアルを試す

Milkcocoa のチュートリアルをやってみました。 目次Milkcocoa とは?チュートリアル1. アカウント登録する2. ログインする3. アプリを作成する4. スマートフォン側のWebページ …

Canvasでの回転

Canvas に回転した画像を表示するサンプルページを作りました

Canvas に回転した画像を表示するサンプルページを作りました。 Canvas の標準の機能では用意されていない操作なので、自分でこの処理を書く場合は少々面倒な記述が必要になります。 目次1. スク …