Hoe schuifdeuren te gebruiken in CSS zonder tabbladen

Cascading Style Sheets is een type stijlbladtaal die stijl toevoegt aan webcontent geschreven in een opmaaktaal zoals XML, HTML of XHTML. De techniek van de schuifdeuren in CSS gaat over het creëren van een dynamisch effect met behulp van twee afzonderlijke achtergrondafbeeldingen. Het bovenste beeld ligt over het onderste beeld om een ​​illusie te creëren zonder het onderste beeld te verduisteren. De truc om de schuifdeurtechniek zonder tabbladen te implementeren, is om tekstgebaseerde navigatie-elementen te genereren met lijsten die zijn ontworpen met CSS.

1.

Begin met het maken van een ongeordende lijst van uw navigatie-elementen die zijn ingesloten in de tag "DIV". Bijvoorbeeld:

• Startpagina
• producten en diensten
• Neem contact met ons op

In dit voorbeeld bevat de lijst anchor- en span-tags. De ankertags gebruiken het kenmerk 'href' om te linken naar de specifieke locatie van de navigatie-elementen. Het gebruikt ook de tag om de stijl van de tekst in de navigatie-elementen te regelen.

2.

Voeg wat styling toe aan de navigatie-elementen door de achtergrondkleur te definiëren, zwevend in te schakelen, marges op te geven, overloop naar automatisch in te stellen en de lijststijl voor lijstitems uit te schakelen. Float is een CSS-eigenschap waarmee een element horizontaal naar links of rechts kan worden verplaatst, zodat andere elementen eromheen kunnen wikkelen. De eigenschap overloop bepaalt hoe een object zich zou moeten gedragen als de inhoud groter wordt dan het rechthoekige kader. Door overloop in te stellen op automatisch, wordt de overloop verborgen maar kan een schuifbalk worden toegevoegd om de overloopinhoud te bekijken.

3.

Pas geselecteerde achtergrondafbeeldingen toe op de anker- en spanstijlen om de schuifdeurtechniek te voltooien en produceer een zweefeffect voor de navigatie-elementen.