[Bootstrap] メニューを階層化できるDropDown機能を簡単に使う方法

presentation-1794128_1280
LINEで送る
Share on GREE
Share on LinkedIn

仕事が忙しくなってくると部屋がちらかってきます。
今やっている仕事が落ち着いたら片付けよう・・・と考えているんだが、次から次へやることがでてきて中々部屋が片付きません。
もちろん、片付けもちゃんとタスクに入れて優先順位付けてやらなければいけないんですが、こういう思考の階層化が僕は少し苦手なのかもしれません。
片付けが常に最優先になっている嫁が言うのは、「片付けできないのはダメ人間」なのだそうです。

そんな階層化が苦手な人でも、WEBページ作成においては、Bootstrapを使うと簡単にめんどくさい階層化機能が実装できるので、簡単なやり方をメモしておきます。

ちなみに、WEBでググればDropDown機能のやり方ページがたくさん出てくるんですが、バージョンが少し変わっただけで使えなくなるサイトばかりだったので、あまり変則的なことをせずにできるやり方を載せておきます。

Bootstrap最新版

2017年7月現在の最新版は「Bootstrap ver4」ですが、安定版として「3.3.7」を使っています。
Bootstrap Top-page
 

ここで最新版をダウンロードして使ってください。

ファイル構成

今回のデモのファイル構成は以下の通りです。

/
┣index.html
┣jquery-1.11.3.min.js
┗bootstrap-3.3.7-dist/

「bootstrap-3.3.7-dist」は先程ダウンロードしたzipファイルを解答したものです。

ソースコード

解説

今回のポイントは2つだけで、「読み込みモジュール」と「階層メニューの記述」です。

読み込みモジュール

階層メニューの記述

ポイント

モジュールの読み込みで重要なのは、「bootstrap-theme.css」を読み込んでおくことです。
 

dropdown.jsが必要と解説しているページもありましたが、基本機能だけでできるので、いらないモジュールを入れるのは避けたほうがいいでしょう。
 

メニュー部分の記述については、今回はヘッダーメニューでの記述にしてますが、コンテンツ内でも使えるし、dropdownはページ内でいくつでも設定できるようなので、UIに長けたページ構成を作りましょう。
 

デモ

DropDownデモ
 

スクリーンショット 2017-07-23 9.17.08
 
スクリーンショット 2017-07-23 9.17.15

最後に

Bootstrapは本当に痒いところに手が届くツールというのを再認識できました。
 

日々、自分の自宅や仕事のデスク周りも常に整理して、モノの階層化をキチンとしなければいけないと、考えさせられました。

Leave a Reply

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


*