2017-05-16 23 views
0

私はフロントエンドコーディングには全く新しいです。私はBootstrap 3を使用して私自身の反応性のあるウェブサイトを作成しています。サイズ変更時にNavbarヘッダーの色を変更します

電話画面のサイズをシミュレートするようブラウザウィンドウのサイズを変更すると、ナビゲーションバーの色(ナビゲーションヘッダーの色?)をメニューアイコンクリック。

ページの読み込み時に透過的になりたいと思っています。私はスクロール中にヘッダーを白に変えたいと思っています。ハンバーガーメニューアイコンがクリックされると、折りたたみ可能なナビゲーションヘッダーがドロップされてメニュー項目が表示されますが、背景は透明になり、メニュー項目が下のコンテンツの上に表示されます。

次のスクリプトを書きましたが、うまくいかないようです。誰にでも提案はありますか?

<script> 
    var windowsize = $(window).width(); 
    $(window).resize(funtion() { 
     windowsize = $(window).width(); 
      if (windowsize < 440) { 
       $("#myNavbar").click(function() { 
        $(".navbar-header").css({"background-color": "#ffffff", "-webkit-box-shadow": "0px 1px 4px 0px rgba(180, 180, 180, 0.5)", "-moz-box-shadow": "0px 1px 4px 0px rgba(180,180,180, 0.5)", "box-shadow": "0px 1px 4px 0px rgba(180,180,180, 0.5)"}); 
       }); 
      }; 
     }); 
</script> 
+1

イベントにイベントを入れないでください。 – Huelfe

+0

メディアクエリーでは、「メニューバーのアイコンをクリックしたときにナビゲーションバーの色を白に変更します。」 – AndrewR

+0

'.resize()'コールの "function"に "c"がありません...元のスクリプトにどうなっているのか、それともちょっとタイプミスですか? – freginold

答えて

0

あなたが必要なもののためにあなたのCSSファイルでMedia Queriesを使用することができます。

@media screen and (max-width: 300px) { 
    nav { 
     background-color: #ffffff; 
    } 
} 
1

クリックで色を変更するだけなので、window.resize()イベントは必要ありません。

<script> 
    $("#myNavbar").click(function() { 
     windowsize = $(window).width(); 

     if (windowsize < 440) { 
      $(".navbar-header").css({"background-color": "#ffffff", "-webkit-box-shadow": "0px 1px 4px 0px rgba(180, 180, 180, 0.5)", "-moz-box-shadow": "0px 1px 4px 0px rgba(180,180,180, 0.5)", "box-shadow": "0px 1px 4px 0px rgba(180,180,180, 0.5)"}); 
     } 
    }); 

</script> 

ダイナミックCSSを変更することをお勧めします。 JSは$(".navbar-header").addClass("active");に変更され、cssファイルでアクティブなクラスを定義することができます。解像度未満440であるとき、大雑把に、このような

+0

私はすべての回答からの入力を取って問題を解決しました。カスタムCSSクラスの使用について提案しました。ありがとうございました。しかし、私はまだクラスを追加したり削除したりする必要がありました。 – Bhuvana

0

は、クリックでナビゲーションバーは白になります: - メディアクエリを使用して

<script> 
 
     $('.navbar').click(function() { 
 
      $(this).toggleClass('open'); 
 
     }); 
 
</script>
@media only screen and (max-width: 440px) { 
 
    .navbar.open { 
 
     background-color: #ffffff; 
 
     -webkit-box-shadow: 0px 1px 4px 0px rgba(180, 180, 180, 0.5); 
 
     -moz-box-shadow: 0px 1px 4px 0px rgba(180,180,180, 0.5); 
 
     box-shadow: 0px 1px 4px 0px rgba(180,180,180, 0.5); 
 
    } 
 
}
<div class="navbar"></div>

+1

実際にはtoggleClassがうまく機能しました。あなたのご意見ありがとうございます。 – Bhuvana

+0

良い点@Bhuvana - 私は自分の答えを更新しました。うまくいけばうれしいよ:) –

0

上のCSSプロパティを依存させるための最善の方法です画面サイズ。ここで

は、あなたのニーズに合うかもしれないいくつかのコードです:画面の幅が420px以下の場合

.nav-bar { 
    @media only screen and (max-width: 420px) {background:#fff;} 
} 

これは、ナビゲーション・バーの白になります。

+0

問題を解決しました。ヘッダーの色だけでなく、折りたたみ可能なメニューの背景も変更する必要がありました。だから私はヘッダーカラーに使用したのと同じロジックを使用しました。折りたたみ可能なナビゲーションバーのクリック機能をキャプチャし、色を切り替える。最後のコードは次のとおりです: Bhuvana

0

は、以下のことを試してみてください。

$("#myNavbar").click(function() { 
 
    $(".navbar-header").addClass("navbar-header-mobile"); 
 
});
/* Extra Small Devices, Phones */ 
 
    @media only screen and (min-width : 480px) { 
 
     .navbar-header-mobile { 
 
     background-color: #ffffff; 
 
     -webkit-box-shadow: 0px 1px 4px 0px rgba(180, 180, 180, 0.5); 
 
     -moz-box-shadow: 0px 1px 4px 0px rgba(180,180,180, 0.5); 
 
     box-shadow: 0px 1px 4px 0px rgba(180,180,180, 0.5); 
 
     } 
 
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

あなたはちょうどあなたがしたい場合は、電話でそれを削除する何かを追加する必要があります。

0

JSのクラストグルとCSSメディアクエリを使用してこれを行います。

JS -

$("#myNavbar").click(function() { 
    $(".navbar-header").toggleClass('.active-nav') 
}); 

CSS -

@media only screen and (min-width:440px) { 
    .navbar-header.active-nav { 
     background-color: #ffffff; 
     -webkit-box-shadow: 0px 1px 4px 0px rgba(180, 180, 180, 0.5); 
     -moz-box-shadow: 0px 1px 4px 0px rgba(180, 180, 180, 0.5); 
     box-shadow: 0px 1px 4px 0px rgba(180, 180, 180, 0.5); 
    } 
} 
+0

toggleClassはすばらしい提案でした。私はそれを動作させるために使用しました。しかし、私は@media only..Just(window).width()を使わなかった。 – Bhuvana

0

は、問題を解決しました。ヘッダーの色だけでなく、折りたたみ可能なメニューの背景も変更する必要がありました。だから私はヘッダーカラーに使用したのと同じロジックを使用しました。折りたたみ可能なナビゲーションバーのクリック機能をキャプチャし、色を切り替える。最後のコードは次のとおりです。

関連する問題