Share
La oss ta en titt på topplinjen inkludert i stiftelsens rammeverk. Ettersom det er ganske mye å dekke, bryter vi det ned i enkle biter.
Stiftelsens topplinje er en veldig nyttig liten komponent, men det er ikke påkrevd å bruke det i byggene dine. Jeg vil anslå at jeg har brukt det i rundt 40% av prosjektene jeg har bygget med Foundation. Vær nøye med å vurdere om det passer til prosjektets behov eller ikke. Den øverste linjekomponenten er like lett å stil som noen andre, men samspillet er ganske mye satt.
For å begynne å bygge opp den øverste linjen trenger vi en tag, med den nødvendige klassen av "topp-bar".
Inne som ligger a 's, hvorav en vil holde vår tittel / logo den andre vår "mobile" meny.
Merk: Du kan fjerne enten klassen "meny-ikon" eller innholdet "Meny", hvis du foretrekker å ha bare en av de to visningene.
Å legge til foreldreforbindelser er vårt neste mål, så før vår lukkede nav-tag legger til i en med klassen "topp-bar-delen". I denne delen må vi legge til en uordnet liste med flere listeposter.
Foundation har en nyttig klasse "divider" som kan brukes på tomme listeposter, slik at du kan skille hver menykobling med en attraktiv linje. De brukes i følgende eksempel for å dele våre menylinker.
Du vil også legge merke til at ul har "venstre" -klassen brukt på den, som sender ting til venstre. Du kan for eksempel ha to sett med menyforbindelser, en flytende venstre og en (ved hjelp av "høyre" klassen) flyter til høyre.
- Hovedelement 1
- Hovedelement 2
Alle linkene vi har lagt til så langt vil bli vist horisontalt langs linjen. På mindre skjermer blir de en rullegardin, aktivert av menyknappen vi la til tidligere.
Hvert listepunkt kan inneholde en nestet, uordnet liste for undermenyer. For at dette skal fungere og bli vist riktig, må "has-dropdown" -kategorien brukes på overordnet lenke, idet klassen "dropdown" blir brukt på den nestede, uordnede listen:
Merk: For å markere gjeldende sidelink aktiv, legg til en "aktiv" klasse.
Undermenyer vises som en standard rullegardin under "storskjerm" omstendigheter. På mindre skjermer skyver de inn fra "off screen".
Til tross for å bli referert til som "topp" bar, kan du plassere denne komponenten hvor som helst i oppsettet. Hvis du trenger linjen for å holde fast på siden mens du ruller, kan du pakke topplinjen i div med klassen "fast". Alternativt, hvis du vil beholde topplinjen i hovedbeholderen, kan du sette bredden på topplinjen til rutenettbredden ved å bruke klassen "hold til rutenett". Heldigvis kan du bruke begge disse klassene ("contain-to-grid" og "fixed") i kombinasjon.
La oss si at du vil ha den øverste linjen i midten av oppsettet, men trenger linjen til å holde seg til toppen av siden når brukeren ruller ned. Dette er mulig ved å pakke topplinjen i "hold-til-grid" og "klebrig" klassene.
Hvis alle de praktiske funksjonene ikke var nok, vil du kanskje også legge til et innspill som du kan bruke til å søke, eller en oppføringsliste, eller hva du vil. Når du legger til formelementer i et menylisteelement, må vi legge til en klasse med "has-form". Du kan se fra koden nedenfor at vi faktisk bruker nettverket innenfor den øverste linjen. Dette gjør plassering av elementene enkle - og selvfølgelig lydhør, da kolonnene skifter layout på små skjermer.
Breadcrumbs er vanlige på CMS-baserte nettsteder, for eksempel Wordpress, der flere nivåhierarkier kan bli litt komplekse. Disse kan brukes i ethvert grunnprosjekt ved å bare legge til "breadcrumbs" -klassen til enten a stikkord. Når du bruker den uordnede listen, må alle koblinger være i listeposter, mens koblingene i navelementet må være ankeretiketter.
De eneste tilleggsklassene som inngår i breadcrumb-markeringen er "utilgjengelige" og "nåværende".
Den øverste linjen er svært fleksibel og er enkel nok til å innlemme i noen av dine grunnlagsbaserte prosjekter. I neste del av denne sesjonen snakker vi om knapper, rullegardiner og clearing-plugin.
Accentsconagua