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 を使用するか、より優先度の高いメソッドを使用することができます: !payment.

! 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の仕組みを勉強する必要がありそうです。