ついに、このブログも投稿数が100を超えてきたので、headerの機能を少し追加しようと思い追加しました。CSSのフレームワーク「Bootstrap3」を使用しているので、ほとんどBootstrap3のnavbarのまま追加しています。
Bootstrap3は簡単にパーツを追加できるのが良いですよね。1から作成するとなると…大変…
Bootstrap3のnavbar
まずは公式サイトのnavbarのサンプルHTMLを簡素にしたものです。
<nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Logo</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">favorite</a></li> <li><a href="#">食べ物</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">音楽<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">邦楽</a></li> <li role="separator" class="divider"></li> <li><a href="#">洋楽</a></li> </ul> </li> </ul> </div> </div> </nav>
このままでも十分に使用できる感じですよね。ただ、上記のnavbarではメニューの項目の幅が均等にならない…
そして、何よりheaderの項目は均等幅にしたいってことが多いと思います。
しかし、Bootstrap3の公式ページでも
Justified navbar nav links are currently not supported.
と対応していないことが記載されています。カスタマイズするしかない!!
Bootstrap3のnavbarをカスタマイズ
CSSのdisplayの「table」と「table-cell」を使用してメニューの項目の幅を均等にしていきます。
上記のnavbarではメニューの項目の幅が均等になっています。横幅をcalcでnav内が綺麗に一段に収まるように調節をしています。文字が段落ちしないように横幅を調整してあげれば、綺麗に収まると思います。スマホ表示時は、そのままBootstrap3にお任せです。
CSSのコード下記の通り。clacの値は、navbar-brandの横幅を入れてあげれば一段に収まるように調節できるはず。
<style> @media (min-width: 768px) { .le-navbar-table { display: table; table-layout: fixed; text-align: center; width: calc(100% - navbar-brandの横幅); } .le-navbar-table > li { float: none !important; display: table-cell; vertical-align: middle; } } </style>
<ul class=”nav navbar-nav navbar-right”>の箇所にle-navbar-tableのクラスを追加すればOKです。
これで、Bootstrap3のnavbarのメニューの項目の幅を均一にカスタマイズできました。
日々勉強!!このブログも少しずつかっこよくしていきたい!!