Bootstrap3でよくある右側にユーザーのログインとかが固定化されたnavbar
を実装したかったのですが、
公式のサンプルをベースにやったところ中々うまくいきませんでした。
いろいろ試行錯誤して弄っていたら、結果としてそれっぽいのができたのでメモ。
完成系
アニメーションのように画面を縮めてもnavbar
のボタンのレイアウトを変えずに維持できています。
コード
navbar.html
<nav class='navbar navbar-default navbar-static-top'>
<div class='container-fluid'>
<a href='#' class='navbar-brand'>Demo</a>
<ul class="nav navbar-right pull-right" id='header-buttons'>
<li class='navbar-btn'>
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
<span class="glyphicon glyphicon-plus" aria-hidden='true'></span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
</ul>
</li>
<li class='navbar-btn'>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
Menu
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
override_bootstrap.css
.navbar {
min-width: 320px;
}
.navbar-brand {
margin-left: -15px;
}
#header-buttons {
margin: 0px;
}
#header-buttons > li {
margin-left: 10px;
display: inline-block;
}
.navbar-right .dropdown-menu {
left: auto;
right: 0;
}
.navbar-nav .open .dropdown-menu {
position: absolute;
float: none;
width: auto;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.172549) 0px 6px 12px 0px;
margin-top: 2px;
border: 1px solid rgba(0, 0, 0, 0.15)
}
ちょっと解説
まずは、サンプルのレスポンシブになる箇所であるnavbar-header
とnavbar-toggle
、navbar-collapse
などを廃止。
そして、override_bootstrap.css
で縮めた時に変わる要素を基本的にすべて無効化。
あとは、#navbar-buttons
で微調整。
少し特殊な場所が、
<ul class="nav navbar-right pull-right" id='header-buttons'>
の部分。
縮めた時にnavbar-right
がうまく動かなかったのを、pull-right
で無理やり右揃えに。
これでなんとなく、それっぽいのが完成。
最後に
navbar
は依存関係が多く、その使い方から逸脱するような要件を満たそうとしたら、なんとも付け焼刃的な修正になってしまいました。
なんとも不安が多いですが動かして見た感じとしては、うまくいってるようです。
ただ、基本的にmacでChromeのブラウザ上で確認したので、他のブラウザやデバイスで見た場合など細い部分が抜けてるかも。
その辺は、発見次第少しずつ修正しようと思います。