Bootstrap3のメニューバー(CSS/JavaScript)についての質問です。

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

回答の条件
  • 1人10回まで
  • 13歳以上
  • 登録:2015/07/28 11:48:01
  • 終了:2015/07/29 17:16:33

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4522ベストアンサー獲得回数18792015/07/28 16:16:32

ポイント500pt

.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

他1件のコメントを見る
id:a-kuma3

Project name(.navbar-brand)の非表示と.navbar-right の右上表示が、メニュー(.collapse)表示後に行われるため、動きが緩慢でぎごちなく見えてしまいます。

回答に追記しました。

2015/07/29 11:34:06
id:icta

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

2015/07/29 17:16:18

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません