CSS3 メディア クエリを jQuery と組み合わせてレスポンシブ ナビゲーションを実装

この記事では主に、レスポンシブ ナビゲーションを実装するための CSS3 メディア クエリを詳しく紹介します。興味のある方は参考にしてください。

画面の幅が大きい場合にレスポンシブ ナビゲーションを実装します。 700px の場合、効果は次のとおりです:

画面幅が 700px 未満の場合、ナビゲーションは小さなボタンになり、クリックするとメニューがゆっくりとプルダウンします:

アイデア:

1. 順序 メニューにイベントをバインドした後、DOM に余分なノードを追加せずに、大きな画面に表示されるナビゲーションと小さな画面に表示されるドロップダウン ナビゲーションは 1 つである必要があります。

そこで私はナビゲーションを絶対に配置することにしました。

2. 画面幅が700px未満の場合はデフォルトのナビゲーションリストが表示され、画面幅が700pxを超える場合は位置が表示されます。あるいは、デフォルトのナビゲーション リストは非表示になり、画面幅が 700 ピクセルより大きい場合は右側に表示され、700 ピクセルより小さい場合は非表示になります。

問題:

最初に、デフォルトで表示されることを選択しましたが、問題が発生しました。ボタンが押されている限り、画面がズームインされた後、ナビゲーション リストが再度表示されなくなります。

コードは次のとおりです:

<p class="nav-box">
    <ul class="nav">
     <li><a href="javascript:void(0);" class="toHome active">Home</a></li>
     <li><a href="javascript:void(0);" class="toPort">Portfolio</a></li>
     <li><a href="javascript:void(0);" class="toCont">Contact</a></li>
    </ul>
    <a href="javascript:void(0);" class="nav-btn">...</a>
</p>

.nav-box {
  position: relative;
}
.nav-btn {
  display: none;
  color: #DE6B73;
  float: right;
  line-height: 20px;
  margin: 35px 0;
}
.nav {
  display: block ;
  border-top: none;
  position: absolute;
  right: 0;
}
@media(max-width:700px){
  .nav-btn{
    display: inline-block;
  }
}
@media(max-width:700px){
 .nav {
  display: none;
  top: 80px;
  background-color: #F79C9C;
  border-top: 1px solid #FFF;
  line-height: 60px;
 }  
}

window.onload=function(){
  $(".nav-btn").click(function(){
    $(".nav").slideToggle(500);
  });
}

それで、私の考え方に何か問題があると思い、デフォルトの彼を隠す方法に変更しました。結果は同じで、一度ボタンを押すと二度と現れません。そこで私は jQuery を疑い始めました。

解決策:

その後、ボタンを押した後、F12 で次のようなスタイルになることがわかりました:

これはすべて、スライドのコンテンツを設定する slideToggle によって引き起こされていることが判明しました。リンクされたスタイルは要素を非表示にします。このメソッドで設定されたスタイルは 3 つのメソッドの中で最も優先されるため、CSS で設定されたブロックはまったく役に立ちません。

この問題を解決するには、js を使用するか、より優先度の高いメソッドを使用できます: ! important

! important を使用することを選択した場合は、デフォルトでナビゲーション リストが非表示になるように設定する必要があります。それ以外の場合は、ナビゲーション リストが非表示になります。決して隠されてはなりません。

最終的な CSS コードは次のとおりです:

.nav {
  display: none;
  position: absolute;
  right: 10%;
  top: 80px;
  background-color: #F79C9C;
  border-top: 1px solid #FFF;
  line-height: 60px;
}
.nav-btn {
  display: none;
  color: #DE6B73;
  float: right;
  line-height: 20px;
  margin: 35px 0;
}
@media(max-width:700px){
  .nav-btn{
    display: inline-block;
  }
}
@media(min-width:700px){
  .nav {
    display: block !important;
    border-top: none;
    top: 15px;
    right: 0;
  }
}

概要:

その原理を真に理解せずにフレームワークを使用することは非常に危険です。

次に、jQuery の .css() メソッドを試しました。これにより、インライン要素のスタイルも変更されました。

jQueryを適用する際の動作を理解するには、jQueryの仕組みを勉強する必要がありそうです。