Stagger of Trappenhuis een menu

Ik heb een menu, gemaakt van de gebruikelijke ongeordende lijst, dat ik horizontaal wil opmaken met CSS, zodat elk menu-item iets lager is dan de vorige invoer. Het resultaat zou een trap-effect zijn:

Home
      News
             About
                    Contact

Mijn voorbeeld hierboven toont een volledige verplaatsing voor elk menu-item, maar wat ik eigenlijk wil is pixelniveau-regeling van de trapbehuizing, zodat elk menu-item potentieel slechts een halve of kwart tekenhoogte is verplaatst ten opzichte van het vorige menu-item .

Hoe kan ik deze truc laten werken met CSS, bij voorkeur zonder CSS3 te gebruiken? Meer precies, is er geen manier om te specificeren "dit oppervlak moet op positie X, Y relatief worden gerenderd naar het eerder gerenderde item?"

1

1 antwoord

De eenvoudigste manier zou zijn om handmatig een margin-top toe te voegen aan elke li .

Als u een klasse op elke li hebt:

.first-li  { margin-top: 5px; }
.second-li { margin-top: 10px; }
/* ... */

Zoniet dan:

#menu li:nth-child(1) { margin-top: 5px; }
#menu li:nth-child(2) { margin-top: 10px; }
/* ... */

Oudere browsers ondersteunen geen : nth-child . Daar is een workaround als je oudere browsers wilt ondersteunen en je wil geen klasse toevoegen aan elke li .

1
toegevoegd
Ik heb mijn vraag bijgewerkt, omdat ik nieuwsgierig ben naar een "relatieve plaatsing" -capaciteit waarvan ik dacht dat deze beschikbaar was in CSS. Ik was er zeker van, op basis van ervaringen uit mijn 'vorige leven', dat dit zelfs kon worden gedaan zonder specifieke klassen te maken (bijvoorbeeld '.eerste-li', '.second-li').
toegevoegd de auteur Brent Arias, de bron
Ik denk dat je gelijk hebt. Als ik het gewenste effect ga krijgen, zonder CSS3 en zonder "one-css-class-per-menu", dan zou ik misschien jQuery moeten gebruiken om een ​​array van de nav-elementen te maken en dan de positie te koppelen: relatieve locatie voor elke vermelding in de array.
toegevoegd de auteur Brent Arias, de bron
Er gaat niets boven "ten opzichte van het vorige (broer/zus) element". Er is "relatief aan het bovenliggende element": css-tricks.com/& hellip;
toegevoegd de auteur thirtydot, de bron