CSS3-Medienabfragen kombiniert mit jQuery zur Implementierung einer responsiven Navigation

Dieser Artikel stellt hauptsächlich CSS3-Medienabfragen in Kombination mit jQuery vor, um eine reaktionsfähige Navigation zu implementieren. Er hat einen bestimmten Referenzwert.

Zweck:

Implementieren Sie eine reaktionsfähige Navigation . Wenn die Bildschirmbreite größer als 700 Pixel ist, ist der Effekt wie folgt:

Wenn die Bildschirmbreite weniger als 700 Pixel beträgt, wird die Navigation zu einer kleinen Schaltfläche. Es gibt ein Menü, das sich langsam herunterzieht:

Idee:

1 Um Ereignisse später an das Menü zu binden, und nicht zum DOM. Fügen Sie zusätzliche Knoten hinzu. Die Navigation, die auf dem großen Bildschirm angezeigt wird, und die Dropdown-Navigation auf dem kleinen Bildschirm müssen eins sein.

Deshalb habe ich mich dafür entschieden, die Navigation absolut zu positionieren.

2. Die Standardnavigationsliste wird angezeigt, wenn die Bildschirmbreite weniger als 700 Pixel beträgt, und die Position wird festgelegt. Alternativ ist die Standardnavigationsliste ausgeblendet und wird rechts angezeigt, wenn die Bildschirmbreite mehr als 700 Pixel beträgt, und ausgeblendet, wenn sie weniger als 700 Pixel beträgt.

Problem:

Am Anfang habe ich mich für die Standardanzeige entschieden, und dann ist ein Problem aufgetreten: Solange die Taste gedrückt wird, wird die Navigationsliste nach dem Schließen des Bildschirms nie wieder angezeigt vergrößert.

Der Code lautet wie folgt:

<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);
  });
}

Also dachte ich, dass mit meinem Denken etwas nicht stimmte, also wechselte ich zur Standardmethode, ihn zu verstecken. Das Ergebnis ist immer noch dasselbe, sobald der Knopf gedrückt wird, wird er nie wieder erscheinen. Also begann ich an jQuery zu zweifeln.

Lösung:

Dann habe ich in F12 festgestellt, dass es nach dem Drücken der Taste so aussehen würde:

Es stellt sich heraus, dass dies alles durch slideToggle verursacht wird. Es verbirgt das Element, indem der Inline-Stil des Elements festgelegt wird. Die Priorität des durch diese Methode festgelegten Stils ist die höchste unter den drei Methoden, daher wird er in CSS festgelegt Der Block ist völlig nutzlos.

Um dieses Problem zu lösen, können Sie js oder eine Methode mit höherer Priorität verwenden: !important.

Wenn Sie sich für die Verwendung von !important entscheiden, müssen Sie die Navigationsliste auf einstellen standardmäßig ausgeblendet sein, sonst wäre er nie in der Lage, es auszublenden.

Der endgültige CSS-Code lautet wie folgt:

.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;
  }
}

Zusammenfassung:

Es ist sehr gefährlich, ein Framework zu verwenden, ohne seine Prinzipien wirklich zu verstehen.

Ich habe dann die .css()-Methode von jQuery ausprobiert, die auch den Stil der Elemente inline geändert hat.

Es scheint, dass wir die Funktionsweise von jQuery untersuchen müssen, damit wir sein Verhalten bei der Anwendung verstehen können.