Sådan bruges skydedøre i CSS uden tabs

Cascading Style Sheets er en type stilarksprog, der tilføjer stil til webindhold skrevet på et markeringssprog som XML, HTML eller XHTML. Skydedørsteknikken i CSS handler om at skabe en dynamisk effekt ved hjælp af to separate baggrundsbilder. Det øverste billede ligger over det nederste billede for at skabe en illusion uden at fuldføre fordybning af bundbilledet. Tricket til at implementere skydeportteknikken uden faner er at generere tekstbaserede navigationselementer ved hjælp af lister, der er designet med CSS.

1.

Start med at oprette en uordnet liste over dine navigationselementer, der er vedlagt i "DIV" -taggen. For eksempel:

• Hjemmeside
• Produkter og tjenester
• Kontakt os

I dette eksempel indeholder listen anker- og spændetiketter. Ankeretiketterne bruger attributten "href" til at linke til navigationselementernes specifikke placering. Det bruger også mærket til at styre stilen på teksten i navigationselementerne.

2.

Tilføj nogle styling til navigationselementerne ved at definere baggrundsfarven, så float, angivelse af margener, indstilling af overløb til auto og deaktivering af listestilen til listeposter. Float er en CSS-egenskab, der gør det muligt for et element at bevæge sig vandret til venstre eller højre, så andre elementer kan ombrydes rundt om det. Egenskaben overløb definerer, hvordan en genstand skal opføre sig, hvis indholdet udvides ud over dets rektangulære boks. Ved at indstille overløb til auto, vil overløbet være skjult, men der kan tilføjes en rullebjælke for at se overløbsindholdet.

3.

Anvend valgte baggrundsbilleder til anker- og spændstilstande for at fuldføre skydeportsteknikken og frembringe en svæveffekt for navigationselementerne.