Share
Zurb's Foundation 4 har en lysande toppstång som blivit nästan symbolisk för en stiftelsens byggande. Idag ska vi titta på hur du kan implementera det på ett annat sätt, placera det på annat håll på sidan, vilket ger dig en anpassad och lyhörd navigationsmeny.
Först måste vi ha den senaste stiftelsen. Unzip och placera alla filer i ditt arbets- eller testkatalog. Vi kommer bara att använda index.html, skapa vår egen style.css där vi kommer att åsidosätta de olika klasserna i topplinjen för att göra vår egen navigering.
Ladda ner också bakgrundsbilden som anges ovan. Vi använder det här för menyn, så lägg det i din "img" -mapp. Har allt? Slå sedan upp din favoritredaktör och låt oss gå igång!
Indexfilen i din nedladdning levereras med vissa förinställda HTML-filer. Du kan lämna allt som du hittar i header-taggen, och du kan lämna manuslänkarna (före den slutliga kroppstaggen) där de är. Vi behöver allt för att se till att Grid och Top Bar faktiskt fungerar.
Du kan rensa ut resten av dummy-innehållet. Vi går för en fullbreddsdesign här, inget för komplicerat, bara något för att få en bättre uppfattning om vad vi jobbar med.
Okej, låt oss ställa in rubriken för sidhuvud, navigering, innehåll och sidfot och lägga in lite dummyinnehåll för fyllnadsändamål. Vi kommer att ge varje område en klass av "full bredd", då kommer vi i varje område att placera en div med a, en div med a och. Detta skapar en grundläggande rutnätstruktur.
Notera: För mer information om hur nätverket fungerar, ta en titt på Foundation for Beginners: The Grid System
Foundation-4 Custom Top Bar
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, asperiores, voluptas, veniam commodi impedit tenetur dolores cumque facere explicabo esse quaerat veritatis laboriosam ei modi amet maxime non officia nemo? Iste, quisquam, voluptatum, dolor namnet reiciendis unde aliquam numquam necessitatibus odio et perspiciatis facere nil inventore ullam aspernatur corporis veritatis quia dolorum? Säg, hic, eos quis quibusdam ei aut optio repudiandae at! Eligendi, neque ratione alias enim quae magnam dolores essi pariatur earum laborum reiciendis nobis sunt sequi sapiente ducimus iure ipsam. Sapiente, minima, rerum, facere quos sae pariatur magni dolorem cum amet nemo quis laborum ipsa dignissimos ducimus inventore modi rem cumque quibusdam quam asperiores! Optio, inte förlora molestias voluptas veritatis aspernatur accusamus exceptus rem quaterat impedit animi voluptate vid facili aliquid cum fugit labore om provid provident recusandae autem. Doloribus, mollitia quos officiis quas sapiente nam dolor praesentium maxime cupiditate illum? Rem, esse, nulla vitae adipisci sequi deliti quasi!
© 2013
Innan vi får styling lägger vi ut den nödvändiga HTML-strukturen för att stiftelsen Top Bar ska fungera korrekt. Vi behöver fem grundläggande element för att få motorn att springa:
Accentsconagua
nav medul medli med = att expandera menyn i mobillayout avsnitt medul med och ul med Nu, låt oss sätta upp dessa grunder och genomföra de fem elementen.
Notera: I det här handledningsexemplet vill vi göra en anpassad navigeringsmeny, så att titeln i den tas bort (som vanligtvis innehar logotypen, i text eller bildform). För att göra detta lämnar vi bara Li med i ul med den tomma.
Låt oss också lägga till några menyelement och en rullgardinsmeny medan vi är på den. För att inkludera en rullgardinsmeny lägg till klassen "has-dropdown" till li-elementet som du vill innehålla rullgardinsmenyn och ta sedan in ett nytt ul med en klass av "dropdown". För att ange den aktuella aktiva sidan kan vi ge vårt nuvarande menyalternativ en klass av "aktiv" på li-elementet. Vi kan lämna ult tomt. Normalt skulle du använda detta område för att lägga till en knapp eller ett sökformulär. För mer information om detaljerna i topprampen, ta en titt på Stiftelsen för nybörjare: Top Bar.
Titta på följande HTML, förklaringarna beskriver hur det bygger upp.
Titta på resultaten i din webbläsare. Vi har nu skapat en grundläggande grundram med hjälp av toppraden för att skapa en horisontell meny. För att placera det någonstans än i toppen av webbläsaren är att helt enkelt placera navet i rad och kolumner div.
När du omformar webbläsaren kan du se att menyn ändras vid den fördefinierade brytpunkten.
Nästa steg är att ge allt anpassat styling. Vi fokuserar på hur vi kan utforma toppraden och vilka klasser som används för det.
Om du inte redan har skapat en ny CSS-fil, namnge den style.css och placera den i css-mappen i din Foundation-nedladdning. Glöm inte att inkludera den i huvudetiketten i din indexfil, hänvisa den under foundation.css som så:
Stiftelsen 4
Om du inte placerar den under foundation.css kommer den inte att åsidosätta Top Bar-klasserna.
Okej, låt oss först få några grundläggande styling på sidhuvudet, navigering, innehåll och sidfot. För navigationsområdet använder vi en bakgrundsbild som du tidigare har laddat ner. Den allmänna designen är inte så stor av en affär, ta en titt på CSS nedan. Vi lägger till en fullbreddsklass för varje område för att se till att den fyller hela webbläsarens bredd.
kropp bakgrundsfärg: #ccc; / ** Ställ in bakgrunden för de olika sektionerna ** / .header-området bakgrundsfärg: # 2d465c; minhöjd: 160px; .navigeringsområde bakgrundsbild: url ('... /img/navigation-container.jpg'); bakgrundsrepetition: repetera-x; .Innehållsområde vaddering: 50px 0 70px 0; .footer-område bakgrundsfärg: # 1f1f1f; färg: #fff; minhöjd: 50px; vaddering: 20px 0 0 0; .full bredd min-bredd: 100%; position: relativ; h2 färg: #fff; typsnitt: normal; marginal-topp: 50px; Om du tittar på resultaten nu ser menyn fortfarande lite ut ur platsen. Det beror på att det fortfarande använder standard CSS. Låt oss fixa det!
Det finns ett par CSS-klasser som vi behöver adressera för att få de önskade resultaten. Först tar vi bort en del av den svarta bakgrunden i klassen. Topplister och avsnittet listar och ändrar höjd och linjens höjd till 58px (navigeringshöjdens höjd). Kolla in kommentarerna för ytterligare förklaring.
/ ** Ändrar bakgrundsfärg, höjd och marginal på gränsen ** / .top-bar bakgrund: none; höjd: 58px; linjehöjd: 58px; marginalbotten: 0; / ** Tar bort svart bakgrund på menyraden ** / .tangstångsdel ul bakgrund: ingen; text-transform: stor bokstav; / ** Avlägsnar svart bakgrund på menyalternativet ** / .tradivsnitt li a: inte (.knapp) bakgrund: ingen; linjehöjd: 58px; vaddering: 0 27px;
Vi har tagit bort den vanliga svarta bakgrunden från naven, sektionslistorna och menyn ankrar. Vi justerar höjden, linjens höjd och vadderingen och omvandlar texten till stora bokstäver för att passa alla med vår anpassade design.
Om du uppdaterar webbläsaren ser du att den börjar ta form. Låt oss fortsätta med rullgardinsmenyerna, menyalternativen, aktiva och svävarstillstånden. Ta en titt på CSS om och om igen, läs den kommenterade texten för förklaring:
/ ** Ändrar det aktiva menyobjektet från standard svart till en gradient ** / .stångsektion ul li.active> a bakgrund: rgb (0, 0, 0); bakgrund: linjär gradient (till botten, rgba (0, 0, 0, 0,4) 0%, rgba (0, 0, 0, 0,7) 100%) upprepa rull 0 0 transparent; färg: #fff; / ** Ändrar svängningsstatusen för icke aktiva menyalternativ ** / .stångsektion li: svänga en bakgrund: linjär gradient (till botten, rgba (0, 0, 0, 0.4) 0%, rgba (0, 0, 0, 0.7) 100%) Repetera rull 0 0 transparent; färg: #fff; / ** Ändrar icke-aktiva menyalternativ textfärg till svart ** / .stångsektion ul li> a color: # 2d2d2d; / ** Ändrar svängläge i rullgardinsmenyalternativen ** / .stångsektion ul.dropdown li a: svävar: inte (.knapp) bakgrund: ingen upprepa bläddra 0 0 rgba (0, 0, 0, 0,9); / ** VIKTIGT fyll i för nedrullningsbehållaren ul ** / .fältet sektion ul.dropdown bakgrund: # 333; färg: #fff; / ** Det här fixar positionen och färgen på rullgardinsmenyn ** / .tv.fältet .has-dropdown> a: efter border-color: rgba (0, 0, 0, 1) transparent transparent; margin-top: 2.5px;
Vi har gjort flera ändringar i vår meny här. Först avstängde vi den vanliga svarta bakgrunden för det aktiva menyalternativet till en CSS-gradient. Därefter gav vi de icke-aktiva menyalternativen en likvärdig svävarstillstånd. För att göra de icke-aktiva menyalternativen tydligare kan vi ändra textfärgen till en mörkgrå. Ändringarna gjordes den .Top-bar-sektion li: svävar en kommer att hålla statusen på rullgardinsmenyn svävad när musen rör sig över listrutorna. För att slutföra CSS gav vi nedrullningsbehållaren ul en bakgrundsfyllning och ompositionerade standardpositionen för nedrullningspilen på grund av våra stoppningsjusteringar till toppfältet.
Uppdatera din webbläsare och ta en titt på resultaten hittills. Vi är inte helt färdiga än vi måste fortfarande se till att allt ser bra ut när vi ändrar storleken på vår webbläsares skärm (eller, för den delen, när vi tittar på den på en mindre enhet). För att få det att hända lägger vi till några Media Queries i vår CSS-fil.
Det finns ett par saker som vi behöver justera för att få menyn att fungera med vår egen design när skärmstorleken minskas. Det handlar mestadels om att lägga till några vadderingar, linjehöjd, textfärger och bakgrundsfärger. Ta en titt på CSS nedan och titta på kommentarerna för att få en förklaring för varje avsnitt.
@media bara skärm och (max bredd: 942px) / * Gör den lyhörda menyn passande i navigeringsbehållaren och ändra dess bakgrund till svart * / .storlek ul bakgrundsfärg: rgba (0, 0, 0, 0,5); vadderande-botten: 13px; / * Ändra ej aktiv menyalternativsfärg till svart * / .stångsektion ul li> a color: #fff; / * Ger dropdown ul en svart fill * / .tangstång sektion ul bakgrund: # 000; / * Ge tillbaka BACK-knappen efter att ha gått i en undermeny med lämplig fyllning * / .stång-sektion .dropdown li.title h5 a linjehöjd: 57px; / * Detta fixar positionen och färgen på rullgardinsmenyn * / .tangstång .has-dropdown> a: efter border-color: rgba (255, 255, 255, 1) transparent transparent; margin-top: 2.5px; / * avsluta medieförfrågan * /
Spara filen, uppdatera din webbläsare och spela runt med webbläsarens storlek. Som du kan se passar menyn i vår design snyggt.
Så om det handlar om vår handledning om hur vi kan skapa en anpassad responsiv meny med hjälp av Top Bar från Foundation 4-ramen. Och kom ihåg att menyn inte behöver vara högst upp på sidan. Bara vikla den i sin egen rad och kolumner div, så kan du praktiskt placera den där du vill!
Stiftelsen är ett utmärkt verktyg för att snabbt utveckla lyhörda mönster, och när du känner din väg kan du forma det på ett sätt som du vill. Ha så kul!
