仕事が忙しくなってくると部屋がちらかってきます。
今やっている仕事が落ち着いたら片付けよう・・・と考えているんだが、次から次へやることがでてきて中々部屋が片付きません。
もちろん、片付けもちゃんとタスクに入れて優先順位付けてやらなければいけないんですが、こういう思考の階層化が僕は少し苦手なのかもしれません。
片付けが常に最優先になっている嫁が言うのは、「片付けできないのはダメ人間」なのだそうです。
そんな階層化が苦手な人でも、WEBページ作成においては、Bootstrapを使うと簡単にめんどくさい階層化機能が実装できるので、簡単なやり方をメモしておきます。
ちなみに、WEBでググればDropDown機能のやり方ページがたくさん出てくるんですが、バージョンが少し変わっただけで使えなくなるサイトばかりだったので、あまり変則的なことをせずにできるやり方を載せておきます。
Bootstrap最新版
2017年７月現在の最新版は「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ファイルを解答したものです。
ソースコード
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Bootstrap-dropdown</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap-theme.css">
<script src="./jquery-1.11.3.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</head>
<body style="padding-top:50px;">
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a href="http://localhost/tools/myntstudio/" class="navbar-brand">MyntStudio</a>
<ul class="nav navbar-nav">
<li class="dropdown" style="display:inline;">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="download">Account <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="download">
<li><a href="?s=Account_edit">Setting</a></li>
<li class="divider"></li>
<li><a href="javascript:void(0)" onclick="location.href='?mode=logout'">Logout</a></li>
</ul>
</li>
<li style="display:none;">
<a href="?s=login">Login</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<h1>Bootstrap-Dropdown-Demo</h1>
</body>
</html>
解説
今回のポイントは２つだけで、「読み込みモジュール」と「階層メニューの記述」です。
読み込みモジュール
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap-theme.css">
<script src="./jquery-1.11.3.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
階層メニューの記述
<ul class="nav navbar-nav">
<li class="dropdown" style="display:inline;">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="download">Account <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="download">
<li><a href="?s=Account_edit">Setting</a></li>
<li class="divider"></li>
<li><a href="javascript:void(0)" onclick="location.href='?mode=logout'">Logout</a></li>
</ul>
</li>
<li style="display:none;">
<a href="?s=login">Login</a>
</li>
</ul>
ポイント
モジュールの読み込みで重要なのは、「bootstrap-theme.css」を読み込んでおくことです。
dropdown.jsが必要と解説しているページもありましたが、基本機能だけでできるので、いらないモジュールを入れるのは避けたほうがいいでしょう。
メニュー部分の記述については、今回はヘッダーメニューでの記述にしてますが、コンテンツ内でも使えるし、dropdownはページ内でいくつでも設定できるようなので、UIに長けたページ構成を作りましょう。
デモ
DropDownデモ
最後に
Bootstrapは本当に痒いところに手が届くツールというのを再認識できました。
日々、自分の自宅や仕事のデスク周りも常に整理して、モノの階層化をキチンとしなければいけないと、考えさせられました。
