Slik bruker du skyvedører i CSS uten tabs

Cascading Style Sheets er en type stilarksspråk som legger til stil til webinnhold skrevet på et oppslagsspråk som XML, HTML eller XHTML. Skyvedørsteknikken i CSS handler om å skape en dynamisk effekt ved hjelp av to separate bakgrunnsbilder. Toppbildet ligger over bunnbildet for å skape en illusjon uten å fullføre obscuring av bunnbildet. Trikset for å implementere skyvedørsteknikken uten faner er å generere tekstbaserte navigasjonselementer ved hjelp av lister som er designet med CSS.

1.

Begynn med å opprette en uordnet liste over navigasjonselementene som følger med i "DIV" -taggen. For eksempel:

• hjemmeside
• Produkter og tjenester
• Kontakt oss

I dette eksemplet inneholder listen anker- og strekkmerker. Ankermerkene bruker "href" -attributtet til å koble til den bestemte plasseringen til navigasjonselementene. Den bruker også taggen til å kontrollere stilen til teksten i navigasjonselementene.

2.

Legg til noen styling i navigasjonselementene ved å definere bakgrunnsfargen, aktivere flyte, angi marginer, sette overløp til automatisk og deaktivere listestilen for listeposter. Float er en CSS-egenskap som gjør at et element kan bevege seg horisontalt til venstre eller høyre slik at andre elementer kan vikle rundt det. Overløpsegenskapen definerer hvordan en gjenstand skal oppføre seg hvis innholdet utvides utover den rektangulære boksen. Ved å sette overløp til automatisk, vil overløpet bli skjult, men en rullebøyle kan legges til for å vise overløpsinnholdet.

3.

Bruk valgte bakgrunnsbilder til anker- og spannstilene for å fullføre skyvedørsteknikken, og opprett en sveveffekt for navigasjonselementene.