So verbergen Sie die Navigationsleiste mithilfe von CSS

Wie wir alle wissen, ist die Navigationsleiste ein sehr wichtiger Teil der Website. Es kann Benutzern helfen, besser durch Website-Inhalte zu navigieren und ein benutzerfreundliches Bedienerlebnis zu bieten. In einigen Sonderfällen müssen wir jedoch manchmal die Navigationsleiste ausblenden, um die Webseite einfacher und schöner zu gestalten. In diesem Artikel wird erläutert, wie Sie mithilfe von CSS die Navigationsleiste ausblenden.

1. CSS-Anzeigeattribut

Das Anzeigeattribut von CSS wird verwendet, um anzugeben, wie Elemente im Dokument angezeigt werden. Darunter kann display:none; das Element vollständig ausblenden und keinen Platz im Dokumentfluss belegen, wie unten gezeigt:

nav {
  display: none;
}

Durch die Anwendung des obigen CSS-Codes auf ein Navigationsleistenelement wird die Navigationsleiste vollständig ausgeblendet durch das Element. Allerdings hat diese Methode einen erheblichen Nachteil: Sobald wir das Navigationsleistenelement mit dieser Methode ausgeblendet haben, können wir die Anzeige dieses Elements nicht wiederherstellen. Daher ist diese Methode in einigen Situationen, in denen eine dynamische Steuerung der Elementanzeige erforderlich ist, nicht sehr geeignet.

2. CSS-Sichtbarkeitseigenschaft

Die Sichtbarkeitseigenschaft von CSS wird verwendet, um die Sichtbarkeit von Elementen im Dokument festzulegen. Unter anderem kann Visibility:hidden; das Element im Dokument ausblenden, aber das Element belegt weiterhin Platz im Dokumentfluss, wie unten gezeigt:

nav {
  visibility: hidden;
}

Durch die Verwendung des Sichtbarkeitsattributs zum Ausblenden des Navigationsleistenelements kann der von ihm belegte Platz beibehalten werden das Element, das erforderlich ist. Sehr nützlich in Szenarien, in denen Navigationsleistenelemente erneut angezeigt werden. Versteckte Elemente verschwinden jedoch nicht mehr, was sich auf das Layout der Webseite auswirken kann.

3. Verwenden Sie CSS-Positionierungseigenschaften

Wenn wir das Navigationsleistenelement ausblenden, aber das Layout der Webseite nicht beeinflussen möchten, können wir dies mithilfe von CSS-Positionierungseigenschaften erreichen. Die spezifische Methode besteht darin, zuerst die Höhe des Navigationsleistenelements auf 0 zu setzen und dann die Navigationsleiste mithilfe der absoluten Positionierung oben auf dem Bildschirm zu positionieren, wie unten gezeigt:

nav {
  height: 0;
  position: absolute;
  top: 0;
}

Auf diese Weise wird das Navigationsleistenelement angezeigt wird ausgeblendet und hat keinen Einfluss auf andere Elemente. Die Position des Elements im Dokumentfluss. Es ist zu beachten, dass diese Methode für Situationen geeignet ist, in denen die Höhe der Navigationsleiste bekannt ist. Wenn die Höhe der Navigationsleiste unsicher ist, müssen Sie möglicherweise JavaScript verwenden, um die Höhe der Navigationsleiste zu ermitteln.

4. Verwenden Sie CSS3-Eigenschaften

In CSS3 können wir auch einige Eigenschaften verwenden, um die Anzeige oder das Ausblenden von Elementen flexibler zu steuern. Die beiden am häufigsten verwendeten Eigenschaften sind Opazität und Transformation.

• Opacity-Attribut

Das Opazitätsattribut wird verwendet, um die Opazität eines Elements anzugeben. Sein Standardwert ist 1, was völlig undurchsichtig bedeutet. Wenn wir die Deckkraft eines Elements auf 0 setzen, verschwindet das Element vollständig, nimmt jedoch weiterhin Platz im Dokumentfluss ein, wie unten gezeigt:

nav {
  opacity: 0;
}

• Transformationsattribut

Das Transformationsattribut wird verwendet, um die Transformation anzugeben Die beiden am häufigsten verwendeten Verformungseffekte sind Skalierung und Verschiebung. Wenn wir ein Element skalieren (0) oder übersetzen (-100 %), verschwindet das Element vollständig, nimmt aber immer noch Platz im Dokumentfluss ein, wie unten gezeigt:

nav {
  transform: scale(0);
  // 或
  transform: translate(-100%);
}

Auf diese Weise können wir die Vorteile von CSS3-Eigenschaften nutzen Steuern Sie das Ein- und Ausblenden von Elementen flexibler.

Zusammenfassend können wir einige einfache CSS-Eigenschaften verwenden, um das Navigationsleistenelement auszublenden. Die gebräuchlichste Methode besteht darin, CSS-Positionierungseigenschaften zu verwenden, um die Navigationsleiste oben auf dem Bildschirm zu positionieren. Wenn wir das Anzeigen oder Ausblenden von Elementen in einer dynamischen Szene steuern müssen, können wir natürlich CSS3-Eigenschaften wie Opazität oder Transformation verwenden, um dies zu erreichen.

Das obige ist der detaillierte Inhalt vonSo verbergen Sie die Navigationsleiste mithilfe von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!