Vi springer bare en teensy bit frem. Dette er en temmelig omfattende screencast-serie, men det er kun omkring 40 timer, og selvfølgelig ligner dette egentlige projekt faktisk mere et par hundrede. I dette tilfælde var springet fremad at oprette en to-siders spredning lidt. Vi gennemgår disse ændringer i begyndelsen.
Venstre og højre side har et delt og et andet holdnavn. Dette er super almindeligt, jeg finder i mange forskellige scenarier inden for webdesign. I dette tilfælde deler siderne den samme gradient og samme størrelse. Men de adskiller sig, når vi anvender en CSS3- skew()transformation. Dette giver os en ret pæn "åben bog" -effekt. Fordi alle disse effekter er skabt med CSS, skaleres de pænt (på en måde som et billede næsten helt sikkert ikke ville).
Vi havde en smart løsning med lige højde på plads, men desværre på grund af vores smarte åbne bog skæv-y ting, går det i stykker. I stedet bruger vi bare et strejf af JavaScript.
For det første, mens vi kigger på JavaScript, skriver vi en linje, der skjuler ethvert af de "bogstaver", der ikke har nogen børn. For eksempel er der ingen vælgere, der starter med "Z", men vi har en offentliggjort side, der hedder det bare for at være omfattende. Vi opdager dem (og skjuler dem derefter) med den ultra-nyttige jQuery- :has()vælger.
For de samme højder måler vi begge de to kolonner, bestemmer hvilken der er højest og sætter dem begge derefter til den højeste. Vi er nødt til at bruge et lidt hacky setTimeout for at det kan fungere korrekt på grund af @ font-face loading tager lidt tid og påvirker højderne. Vi kan i sidste ende bruge en slags tilbagekaldelse af font loader. (Eller det kan være for stort).
Derefter går vi over på enkelte almanaksider. Fortsætter hurtigt nu! Vi har gjort denne slags ting så mange gange nu, det er ikke overraskende, at vi bevæger os hurtigere. Vi pisker i det væsentlige denne skabelon i form på samme måde, som vi stylede et enkelt blogindlæg eller en generisk side eller noget lignende.
Vi bruger en "sort bjælke" til brødkrummerne og cementerer dette designmønster som noget, som vi igen og igen bruger til navigering i webstedsafsnit.