現在、スマホで見た時、メニューバー左にメニューアイコン、中央にプロジェクトネームが表示、メニューアイコンをクリックすると、.navbar-navと.navbar-rightのリンクが上下に並んで表示されます。
これを、メニューアイコンをクリックすると、プロジェクトネームを非表示、.navbar-navのリンクはそのままで、.navbar-rightのリンクをメニューバー右に表示したいのです。
どのようにCSS/JavaScriptを記載すれば良いのでしょうか?
数日間、試行錯誤しましたが、解決できません。
完全なコードを回答していただいた方には500ポイントを差し上げます。よろしくお願いいたします。
HTML,CSSは▼こちらです。
http://www.bootply.com/laro1SHOBl#
.navbar-right をメニューバーの右に表示するのは、CSS だけでいけます。
質問の http://www.bootply.com/laro1SHOBl で追加した CSS に以下を追記してください。
@media (max-width: 768px) { ... .navbar-right { position: absolute; /* 位置は、お好みで調整してください */ top: 0; right: 1em; } }
Project name (.navbar-brand) の非表示は javascript で制御しないと駄目だと思います。
$('.navbar-collapse') .on('shown.bs.collapse', function() { $('.navbar-brand').hide(); }) .on('hidden.bs.collapse', function() { $('.navbar-brand').show(); });
質問のサンプルを Fork して、これらのコードを追記したのがこちらです。
http://www.bootply.com/Imbfz6io2T
Project name(.navbar-brand)の非表示と.navbar-right の右上表示が、メニュー(.collapse)表示後に行われるため、動きが緩慢でぎごちなく見えてしまいます。
javascript を、少し変更してみました。
$('.navbar-collapse') .on('show.bs.collapse', function() { $('.navbar-brand').hide(); $('.navbar-right').hide(); }) .on('shown.bs.collapse', function() { $('.navbar-right').show(); }) .on('hide.bs.collapse', function() { $('.navbar-brand').show(); $('.navbar-right').hide(); });
.nav-right の位置決めがメニュー表示後に確定するっぽいので、多少マシになった程度でなのですが。
http://www.bootply.com/DidFodfWct
回答に追記しました。
2015/07/29 11:34:06a-kuma3さん、完璧です!思い描いていた通りの動きでした。親切丁寧に教えていただき感謝いたします。本当にありがとうございました。
2015/07/29 17:16:18