Share
Zurb's Foundation 4 har en glimrende topplinje som er blitt nesten symbolsk for en stiftelsesbygning. I dag skal vi se på hvordan du kan implementere den på en annen måte, plassere den andre steder på siden, og gi deg en tilpasset og responsiv horisontal navigasjonsmeny.
Først opp, trenger vi den nyeste stiftelsen. Unzip og legg alle filene i arbeids- eller testkatalogen. Vi vil bare bruke index.html, lage vår egen style.css der vi vil overstyre de forskjellige klassene i topplinjen for å gjøre vår egendefinerte navigasjon.
Last ned også bakgrunnsbildet ovenfor. Vi bruker dette til menyen, så legg det i mappen "img". Har alt? Deretter brann opp din favorittredaktør og la oss komme i gang!
Indeksfilen i nedlastingen leveres med forhåndsdefinert HTML. Du kan legge alt etter som du finner det i header-taggen, og du kan forlate skriptlenkene (før den avsluttende kroppstegnet) der de er. Vi trenger alt for å sikre at rutenettet og topplinjen faktisk fungerer.
Du kan fjerne resten av dummy innholdet. Vi går for en full bredde design her, ingenting er for komplisert, bare noe for å få en bedre ide om hva vi jobber med.
OK, la oss sette opp toppteksten, navigasjons-, innholds- og bunntekstområdet og legge inn noe dummyinnhold for fylling. Vi vil gi hvert område en klasse med "full bredde", så i hvert område vil vi plassere en div med a, en div med a og. Dette setter opp en grunnleggende rutenettstruktur.
Merk: For mer informasjon om hvordan nettet fungerer, ta en titt på Foundation for Beginners: The Grid System
Foundation-4 Custom Top Bar
Kjæresten er dum i sitt hjem, og er en avgjørende forfatter. Harum, asperiores, voluptas, veniam commodi impedit tenetur dolores cumque facere explicabo esse quaerat veritatis laboriosam eius modi amet maxime non officia nemo? Iste, quisquam, voluptatum, dolor nam reiciendis unde aliquam numquam necessitatibus odio et perspiciatis facere nil inventor ullam aspernatur corporis veritatis quia dolorum? Sånn, hil, eos quis quibusdam ei aut optio repudiandae at! Eligendi, neque ratione alias enim quae magnam dolores disse pariatur earum laborum reiciendis ingen sunt sequi sapiente ducimus iure ipsam. Sapiente, minima, rerum, facere quos sae pariatur magni dolorem cum amet nemo qui laborum ipsa dignissimos ducimus inventore modi rem cumque quibusdam quam asperiores! Optio, ikke oppnådde molestias voluptas veritatis aspernatur accusamus excepturi rem quaerat impedit animi voluptate at facilis aliquid cum fugit labore omnis provident recusandae autem. Doloribus, mollitia quos officiis quas sapiente nam dolor praesentium maxime cupiditate illum? Rem, esse, nulla vitae adipisci sequi deliti quasi!
© 2013
Før vi får styling, legger vi ut den essensielle HTML-strukturen for å få Foundation Top Bar til å fungere skikkelig. Vi trenger fem grunnleggende elementer for å få motoren til å løpe:
Accentsconagua
nav medul medli med = å utvide menyen i mobil layout seksjon medul med og ul med La oss nå sette opp disse grunnleggende og implementere de fem elementene.
Merk: I dette opplæringseksemplet vil vi lage en egendefinert navigasjonsmeny, og dermed fjerne tittelen i den (som vanligvis inneholder logoen, i tekst eller bildeform). For å gjøre dette forlater vi bare li med i ul med den tomme.
La oss også legge til noen menyelementer og en rullegardinmeny mens vi er på den. For å inkludere en rullegardin, legg til klassen "har-rullegardin" til li-elementet du vil inneholde rullegardinmenyen, og ta deretter inn en ny ul med en klasse av "rullegardin". For å indikere den aktive siden kan vi gi vårt nåværende menyelement en klasse av "aktiv" på li-elementet. Vi kan forlate ul tom. Vanligvis vil du bruke dette området til å legge til en knapp eller et søkeinnsendingsskjema. For mer informasjon om spesifikasjonene til topprampen, ta en titt på Stiftelsen for nybegynnere: Top Bar.
Se på følgende HTML, kommentarene forklarer hvordan den bygger opp.
Se på resultatene i nettleseren din. Vi har nå opprettet en grunnleggende rammeverk ved hjelp av topplinjen for å opprette en horisontal meny. For å plassere det et annet sted enn i toppen av nettleseren, er å bare sette naven på rad og kolonner div.
Når du omformler nettleseren, kan du se at menyen endres på det forhåndsdefinerte brytepunktet.
Det neste trinnet er å gi alt en tilpasset styling. Vi fokuserer på hvordan vi kan style topplinjen og hvilke klasser som brukes til det.
Hvis du ikke har allerede, opprett en ny CSS-fil, gi den navnet style.css og legg den i css-mappen til Foundation-nedlasting. Ikke glem å inkludere den i header-koden i indeksfilen din, og referer den under foundation.css slik:
Stiftelse 4
Hvis du ikke legger det under foundation.css, vil det ikke overstyre topplinjeklassene.
OK, la oss først få grunnleggende styling på topptekst, navigasjon, innhold og bunntekst. For navigasjonsområdet bruker vi et bakgrunnsbilde som du tidligere har lastet ned. Det generelle designet er ikke så stort av en avtale, ta en titt på CSS nedenfor. Vi legger til en full bredde klasse til hvert område for å sikre at den fyller hele bredden av nettleseren.
kropp bakgrunnsfarge: #ccc; / ** Angi bakgrunnen for de forskjellige seksjonene ** / .header-området bakgrunnsfarge: # 2d465c; min høyde: 160px; .navigasjonsområde bakgrunnsbilde: url ('... /img/navigation-container.jpg'); bakgrunnsrepetisjon: gjenta-x; .området polstring: 50px 0 70px 0; .footer-område bakgrunnsfarge: # 1f1f1f; farge: #fff; min høyde: 50px; polstring: 20px 0 0 0; .full bredde min-bredde: 100%; stilling: relativ; h2 farge: #fff; font-weight: normal; margin-topp: 50px; Hvis du ser på resultatene nå, ser menyen fremdeles litt ut av sted. Det er fordi det fortsatt bruker standard CSS. La oss fikse det opp!
Det er et par CSS-klasser vi må adressere for å få de ønskede resultatene. Først fjerner vi noe av den svarte bakgrunnen i topp-bar-klassen, og delen viser og endrer høyden og linjens høyde til 58px (høyde på navigasjonsområdet). Sjekk ut kommentarene for ytterligere forklaring.
/ ** Endrer bakgrunnsfargen, høyden og marginen på grensen ** / .top-bar bakgrunn: ingen; høyde: 58px; linjehøyde: 58px; margin-bunn: 0; / ** Fjerner svart bakgrunn på menylinjen ** / .tangestang ul bakgrunn: ingen; tekst-transformer: store bokstaver; / ** Fjerner svart bakgrunn på menyelementet ** / .bjelkenhet li a: ikke (.button) bakgrunn: ingen; linjehøyde: 58px; polstring: 0 27px;
Vi har fjernet standard svart bakgrunn fra naven, delen er listet og menyen anker. Vi justerer høyden, linjens høyde og polstring og forvandler teksten til store bokstaver for å gjøre alt i orden med vårt tilpassede design.
Hvis du oppdaterer nettleseren din, ser du at den begynner å ta form. La oss fortsette med rullegardinmenyene, menyelementene, aktive og svingestater. Ta en titt på CSS igjen og igjen, les kommentert tekst for forklaring:
/ ** Endrer det aktive menyelementet fra standard svart til en gradient ** / .tangestang ul li.active> a bakgrunn: rgb (0, 0, 0); bakgrunn: lineær gradient (til bunn, rgba (0, 0, 0, 0.4) 0%, rgba (0, 0, 0, 0,7) 100%) Gjenta rulle 0 0 gjennomsiktig; farge: #fff; / ** Endrer sveverstatusen for ikke-aktive menyelementer ** / .tangestang li: svever en bakgrunn: lineær gradient (til bunn, rgba (0, 0, 0, 0.4) 0%, rgba (0, 0, 0, 0.7) 100%) Gjenta rull 0 0 gjennomsiktig; farge: #fff; / ** Endrer ikke-aktive menyelementer tekstfarge til svart ** / .stangsavsnitt ul li> a color: # 2d2d2d; / ** Endrer svevertilstanden i rullegardinmenyelementene ** / .bjelken ul.dropdown li a: svever: ikke (.button) bakgrunn: ingen gjentatt rulle 0 0 rgba (0, 0, 0, 0,9); / ** VIKTIG fyll på ul dropdown-containeren ** / .bjelk-delen ul.dropdown bakgrunn: # 333; farge: #fff; / ** Dette korrigerer stillingen og fargen på rullegardinpilen ** / .tv-bar-delen .has-dropdown> a: etter border-color: rgba (0, 0, 0, 1) transparent transparent; margin-topp: 2,5px;
Vi har gjort flere endringer i menyen vår her. For det første endret vi standard svart bakgrunn av det aktive menyelementet til en CSS-gradient. Deretter ga vi de ikke-aktive menypunktene en liknende svingstilstand. For å gjøre de ikke-aktive menypunktene tydeligere, endrer vi tekstfargen til mørkegrå. Endringene gjort på .øverste strekning li: svever en vil holde tilstanden på rullegardinmenyen på hovered når musen beveger seg over rullegardinene. For å fullføre CSS ga vi ul dropdown-containeren en bakgrunnsfylling og reposisjonert standardposisjonen til rullegardinpilen, på grunn av våre polstringsjusteringer til topplinjen.
Oppdater nettleseren din og se på resultatene så langt. Vi er ikke helt ferdige ennå; vi må fortsatt sørge for at alt ser bra ut når vi endrer størrelsen på nettleserens skjermstørrelse (eller, for den saks skyld, når vi ser på det på en mindre enhet). For å få det til å skje, legger vi til noen medieforespørsler til vår CSS-fil.
Det er et par ting vi må justere for å få menyen til å fungere med vår egendefinerte design når skjermstørrelsen blir redusert. Dette innebærer for det meste å legge til noen polstring, linjehøyde, tekstfarger og bakgrunnsfarger. Ta en titt på CSS nedenfor og se på kommentarene for å få en forklaring for hver seksjon.
@media bare skjerm og (maksimal bredde: 942px) / * Gjør den responsive menyen tilpas i navigasjonsbeholderen og endre bakgrunnen til svart * / .top-bar ul bakgrunnsfarge: rgba (0, 0, 0, 0,5); polstring-bunn: 13px; / * Endre ikke-aktiv menyelementfarge til svart * / .stangsdel ul li> a color: #fff; / * Gir dropdown ul en svart fylling * / .tangestang ul bakgrunn: # 000; / * Gi TILBAKE-knappen etter at du har gått i en undermeny med riktig fylling * / .stangs-del .Dropdown li.title h5 a linjehøyde: 57px; / * Dette korrigerer stillingen og fargen på rullegardinpilen * / .tangstangelen .has-dropdown> a: etter border-color: rgba (255, 255, 255, 1) transparent gjennomsiktig; margin-topp: 2,5px; / * avslutte mediesøk * /
Lagre filen, oppdater nettleseren din og spill av med nettleserens størrelse. Som du kan se, passer menyen godt inn i vårt design.
Så, om hvordan du kan lage en tilpasset responsiv meny ved hjelp av topplinjen fra Foundation 4-rammen. Og husk, menyen trenger ikke å være øverst på siden. Bare pakk det i sin egen rad og kolonner div, så kan du praktisk talt plassere den hvor du vil!
Stiftelsen er et godt verktøy for å raskt utvikle responsive design, og når du kjenner deg rundt, kan du stort sett forme det på en måte du vil. Ha det gøy!
