So verwenden Sie Schiebetüren in CSS ohne Registerkarten

Cascading Style Sheets ist eine Art Stylesheet-Sprache, die Webinhalten, die in einer Markup-Sprache wie XML, HTML oder XHTML geschrieben wurden, Stil verleihen. Bei der Schiebetürtechnik in CSS geht es darum, mit zwei separaten Hintergrundbildern einen dynamischen Effekt zu erzeugen. Das obere Bild liegt über dem unteren Bild, um eine Illusion zu erzeugen, ohne das untere Bild zu verdecken. Der Trick bei der Implementierung der Schiebetürtechnik ohne Registerkarten besteht darin, textbasierte Navigationselemente mithilfe von Listen zu erstellen, die mit CSS erstellt wurden.

1

Erstellen Sie zunächst eine ungeordnete Liste Ihrer Navigationselemente, die im Tag „DIV“ eingeschlossen sind. Zum Beispiel:

• Startseite
• Produkte
• Kontaktiere uns

In diesem Beispiel enthält die Liste Anker- und Spannweiten-Tags. Die Ankertags verwenden das Attribut „href“, um eine Verknüpfung mit der jeweiligen Position der Navigationselemente herzustellen. Das Tag wird auch verwendet, um den Stil des Texts in den Navigationselementen zu steuern.

2

Fügen Sie den Navigationselementen Stil hinzu, indem Sie die Hintergrundfarbe definieren, Float aktivieren, Ränder festlegen, den Überlauf auf automatisch setzen und den Listenstil für Listenelemente deaktivieren. Float ist eine CSS-Eigenschaft, mit der ein Element horizontal nach links oder rechts verschoben werden kann, sodass andere Elemente es umschließen können. Die Überlaufeigenschaft definiert, wie sich ein Objekt verhalten soll, wenn der Inhalt über das rechteckige Feld hinaus erweitert wird. Wenn Sie Überlauf auf automatisch setzen, wird der Überlauf ausgeblendet, aber es kann eine Bildlaufleiste hinzugefügt werden, um den Überlaufinhalt anzuzeigen.

3.

Wenden Sie ausgewählte Hintergrundbilder auf die Anker- und Spannstile an, um die Schiebetürtechnik zu beenden und einen Hover-Effekt für die Navigationselemente zu erzeugen.