人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

Bootstrap3のメニューバー(CSS/JavaScript)についての質問です。
現在、スマホで見た時、メニューバー左にメニューアイコン、中央にプロジェクトネームが表示、メニューアイコンをクリックすると、.navbar-navと.navbar-rightのリンクが上下に並んで表示されます。
これを、メニューアイコンをクリックすると、プロジェクトネームを非表示、.navbar-navのリンクはそのままで、.navbar-rightのリンクをメニューバー右に表示したいのです。
どのようにCSS/JavaScriptを記載すれば良いのでしょうか?
数日間、試行錯誤しましたが、解決できません。
完全なコードを回答していただいた方には500ポイントを差し上げます。よろしくお願いいたします。
HTML,CSSは▼こちらです。
http://www.bootply.com/laro1SHOBl#

●質問者: icta
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
●500ポイント ベストアンサー

.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


ictaさんのコメント
a-kuma3さん、前回に引き続き今回もご回答ありがとうございます。ほぼ期待通りの動作を確認できました。少しだけ気になる所があるのですが、変更可能なものでしょうか? Project name(.navbar-brand)の非表示と.navbar-right の右上表示が、メニュー(.collapse)表示後に行われるため、動きが緩慢でぎごちなく見えてしまいます。 メニューアイコンクリック直後にこの2点を実行、それからメニューを表示するように変更するのは難しいでしょうか? もし不可能なものならあきらめもつきますので、教えていただければ幸いです。

a-kuma3さんのコメント
>> Project name(.navbar-brand)の非表示と.navbar-right の右上表示が、メニュー(.collapse)表示後に行われるため、動きが緩慢でぎごちなく見えてしまいます。 << 回答に追記しました。

ictaさんのコメント
a-kuma3さん、完璧です!思い描いていた通りの動きでした。親切丁寧に教えていただき感謝いたします。本当にありがとうございました。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ