Share
Zurb's Foundation 4 beschikt over een schitterende bovenste balk die bijna symbolisch is geworden voor het bouwen van een Foundation-site. Vandaag gaan we bekijken hoe je het op een andere manier kunt implementeren, elders op de pagina kunt plaatsen, waardoor je een aangepast en responsief horizontaal navigatiemenu krijgt.
Ten eerste hebben we de nieuwste Foundation nodig. Unzip en plaats alle bestanden in uw werk- of testdirectory. We gebruiken alleen index.html en maken onze eigen style.css waarin we de verschillende klassen van de Top Bar negeren om onze aangepaste navigatie te maken.
Download ook de bovenstaande achtergrondafbeelding. We zullen dit voor het menu gebruiken, dus plaats dat in je map "img". Alles hebben? Steek dan je favoriete editor aan en dan gaan we aan de slag!
Het indexbestand in uw download wordt geleverd met een vooraf ingestelde HTML. U kunt alles laten zoals u het in de header-tag vindt en u kunt de scriptkoppelingen (vóór de afsluitende body-tag) achterlaten waar ze zich bevinden. We hebben dat allemaal nodig om ervoor te zorgen dat de Grid en de Top Bar echt werken.
U kunt de rest van de dummy-inhoud opruimen. We gaan hier voor een ontwerp van volledige breedte, niets te gecompliceerd, gewoon iets om een beter idee te krijgen van waar we mee werken.
Oké, laten we het koptekst-, navigatie-, inhouds- en voettekstgebied instellen en een aantal dummy-inhoud plaatsen voor het vullen. We zullen elk gebied een klasse van "volledige breedte" geven, daarna zullen we in elk gebied een div plaatsen met een, een div met een en. Hiermee wordt een basisrasterstructuur opgezet.
Notitie: Zie Foundation for Beginners: The Grid System voor meer informatie over hoe het raster werkt
Foundation-4 Custom Top Bar
Lorem ipsum dolor sit amet, consectetur adipiserende elit. Harum, asperiores, voluptas, veniam commodi belemmeren 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 nihil inventore ullam aspernatur corporis veritatis quia dolorum? Sed, hic, eos quis quibusdam eum aut optio repudiandae at! Eligendi, neque ratione alias enim quae magnam dolores esse pariatur earum laborum reiciendis nobis sunt sequi sapiente ducimus iure ipsam. Sapiente, minima, rerum, facere quos saepe pariatur magni dolorem cum amet nemo quis laborum ipsa dignissimos ducimus inventore modi rem cumque quibusdam quam asperiores! Optio, nobis suscipit 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 deleniti quasi!
© 2013
Voordat we de vormgeving krijgen, zullen we de essentiële HTML-structuur uiteenzetten om de Foundation Top Bar naar behoren te laten werken. We hebben vijf basiselementen nodig om de motor te laten draaien:
Accentsconagua
nav metul metli met = om het menu in mobiele lay-out uit te breiden sectie metul met en ul met Laten we nu deze basisbeginselen instellen en de vijf elementen implementeren.
Notitie: In dit voorbeeld van een zelfstudie willen we een aangepast navigatiemenu maken, waarmee de titel wordt verwijderd (die meestal het logo bevat, in tekst- of afbeeldingsvorm). Om dit te doen, laten we eenvoudigweg de li met de lege leeg.
Laten we ook enkele menu-elementen en een vervolgkeuzemenu toevoegen terwijl we bezig zijn. Als u een vervolgkeuzelijst wilt toevoegen, voegt u de klasse "has-dropdown" toe aan het li-element dat u de vervolgkeuzelijst wilt laten bevatten, en voert u een nieuwe ul in met een klasse "dropdown". Om de momenteel actieve pagina aan te geven, kunnen we ons huidige menu-item een klasse "actief" geven op het li-element. We kunnen de ul leeg laten. Normaal zou u dit gebied gebruiken om een knop of een zoekinvoerformulier toe te voegen. Zie Foundation for Beginners: The Top Bar voor meer informatie over de details van de opmaak van de bovenste balk.
Kijk naar de volgende HTML, de opmerkingen leggen uit hoe het is opgebouwd.
Bekijk de resultaten in uw browser. We hebben nu een basis-fundamenteel raamwerk opgezet met behulp van de bovenste balk om een horizontaal menu te maken. Om het ergens anders te plaatsen dan in de top van de browser is het eenvoudig om de navigatie in een rij en kolommen op te delen.
Wanneer u de browser opnieuw aanpast, kunt u zien dat het menu verandert op het vooraf gedefinieerde breekpunt.
De volgende stap is om het allemaal een aangepaste stijl te geven. We zullen ons concentreren op hoe we de Top Bar kunnen stylen en welke klassen daarvoor worden gebruikt.
Maak een nieuw CSS-bestand, noem het style.css en plaats het in de css-map van uw Foundation-download als u dat nog niet hebt gedaan. Vergeet niet om het op te nemen in de header-tag in uw indexbestand, verwijzend naar het onder de foundation.css als volgt:
Stichting 4
Als je het niet onder de foundation.css plaatst, zal het niet de Top Bar-klassen overschrijven.
Oké, laten we eerst een basisstijl krijgen in de koptekst, navigatie, inhoud en voettekst. Voor het navigatiegebied gebruiken we een achtergrondafbeelding die u eerder hebt gedownload. Het algemene ontwerp is niet zo ingewikkeld, kijk eens naar de onderstaande CSS. We voegen een klasse met volledige breedte toe aan elk gebied om ervoor te zorgen dat deze de volledige breedte van de browser vult.
body achtergrondkleur: #ccc; / ** Stel de achtergronden in voor de verschillende secties ** / .header-area background-color: # 2d465c; minimale hoogte: 160 px; .navigatiegebied background-image: url ('... /img/navigation-container.jpg'); achtergrondherhaling: repeat-x; .content-area opvulling: 50px 0 70px 0; .footer-area background-color: # 1f1f1f; kleur: #fff; min-hoogte: 50px; opvulling: 20px 0 0 0; .volle breedte min-breedte: 100%; positie: relatief; h2 color: #fff; font-gewicht: normaal; margin-top: 50px; Als je nu naar de resultaten kijkt, ziet het menu er nog steeds een beetje misplaatst uit. Dat komt omdat het nog steeds de standaard CSS gebruikt. Laten we het oplossen!
Er zijn een aantal CSS-klassen die we moeten behandelen om de gewenste resultaten te krijgen. Eerst zullen we een deel van de zwarte achtergrond op de .top-bar-klasse en de sectielijsten verwijderen en de hoogte en lijnhoogte wijzigen in 58px (hoogte van het navigatiegebied). Bekijk de opmerkingen voor verdere uitleg.
/ ** Wijzigt achtergrondkleur, hoogte en marge van de rand ** / .top-bar background: none; hoogte: 58px; regelhoogte: 58px; marge-bodem: 0; / ** Verwijdert zwarte achtergrond op de menubalk ** / .top-bar-section ul background: none; text-transform: hoofdletters; / ** Verwijdert zwarte achtergrond op menu-item ** / .top-bar-gedeelte li a: not (.button) background: none; regelhoogte: 58px; opvulling: 0 27px;
We hebben de standaard zwarte achtergrond van het nav verwijderd, de sectielijsten en het menu verankert. We passen de hoogte, lijnhoogte en opvulling aan en transformeren de tekst in hoofdletters om het allemaal te laten passen in ons aangepaste ontwerp.
Als u uw browser vernieuwt, ziet u dat deze begint vorm te krijgen. Laten we doorgaan met de vervolgkeuzemenu's, menu-items, actieve en zweeftoestanden. Bekijk de CSS hieronder en lees nogmaals de commentaartekst voor uitleg:
/ ** Verandert het actieve menu-item van standaard zwart in een verloop ** / .top-bar-sectie ul li.active> a background: rgb (0, 0, 0); achtergrond: lineair verloop (naar beneden, rgba (0, 0, 0, 0,4) 0%, rgba (0, 0, 0, 0,7) 100%) herhaal scroll 0 0 transparant; kleur: #fff; / ** Wijzigt de hover-status van niet-actieve menu-items ** / .top-bar-sectie li: hover a background: linear-gradient (to bottom, rgba (0, 0, 0, 0.4) 0%, rgba (0, 0, 0, 0,7) 100%) herhaal scroll 0 0 transparant; kleur: #fff; / ** Wijzigt niet-actieve menu-items tekstkleur in zwart ** / .top-bar-section ul li> a color: # 2d2d2d; / ** Wijzigt de hover-status van vervolgkeuzemenu-items ** / .top-bar-section ul.dropdown li a: hover: not (.button) background: none repeat scroll 0 0 rgba (0, 0, 0, 0,9); / ** BELANGRIJK invullen voor de ul dropdown-container ** / .top-bar-section ul.dropdown background: # 333; kleur: #fff; / ** Hiermee worden de positie en de kleur van de vervolgkeuzepijl ** / .top-bar-sectie .has-dropdown> a: na border-color: rgba (0, 0, 0, 1) transparant transparant; margin-top: 2.5px;
We hebben hier verschillende wijzigingen aangebracht in ons menu. Ten eerste hebben we de standaard zwarte achtergrond van het actieve menu-item gewijzigd in een CSS-verloop. Vervolgens gaven we de niet-actieve menu-items een hover-status die lijkt op elkaar. Om de niet-actieve menu-items duidelijker zichtbaar te maken, veranderen we de tekstkleur in een donkergrijs. De aangebrachte wijzigingen .top-bar-sectie li: hover a houdt de status van het vervolgkeuzemenu op zwevend wanneer u met de muis over de vervolgkeuzemenu's gaat. Om de CSS te voltooien, hebben we de ul dropdown-container een achtergrondvulling gegeven en de standaardpositie van de vervolgkeuzepijl aangepast, vanwege onze opvulinstellingen in de bovenste balksectie.
Ververs je browser en bekijk de resultaten tot nu toe. We zijn nog niet helemaal klaar; we moeten er nog steeds voor zorgen dat alles er goed uitziet als we de schermgrootte van onze browsers aanpassen (of, als we het op een kleiner apparaat bekijken). Om dat mogelijk te maken, voegen we een aantal Media Queries toe aan ons CSS-bestand.
Er zijn een aantal dingen die we moeten aanpassen om het menu te laten werken met ons aangepaste ontwerp wanneer de schermgrootte wordt verkleind. Dit gaat meestal over het toevoegen van wat opvulling, lijnhoogte, tekstkleuren en achtergrondkleuren. Bekijk de CSS hieronder en bekijk de opmerkingen om uitleg te krijgen voor elke sectie.
@media only screen en (max-width: 942px) / * Maakt het responsieve menu passend in de navigatiecontainer en wijzigt de achtergrond in black * / .top-bar ul background-color: rgba (0, 0, 0, 0.5); padding-bottom: 13px; / * Wijzig niet-actieve menu-itemkleur in zwart * / .top-bar-sectie ul li> a color: #fff; / * Geeft de vervolgkeuzelijst een zwarte vulling * / .top-bar-section ul background: # 000; / * Geef de knop BACK nadat je in een submenu de juiste vulling hebt geopend * / .top-bar-section .dropdown li.title h5 a line-height: 57px; / * Hiermee worden de positie en de kleur van de vervolgkeuzepijl * / .top-bar-sectie .has-dropdown> a: na border-color: rgba (255, 255, 255, 1) transparant transparant; margin-top: 2.5px; / * einde mediaquery * /
Sla het bestand op, vernieuw uw browser en speel rond met de grootte van de browser. Zoals je ziet past het menu mooi in ons ontwerp.
Dus, dat over wraps van onze tutorial over hoe we een aangepast responsief menu kunnen maken met behulp van de Top Bar van het kader van Stichting 4. En vergeet niet dat het menu niet bovenaan de pagina hoeft te staan. Wikkel het gewoon in zijn eigen rij en div kolommen, dan kun je het praktisch overal neerzetten waar je maar wilt!
Foundation is een geweldig hulpmiddel om snel responsieve ontwerpen te ontwikkelen, en wanneer u de weg weet, kunt u er vrijwel alles mee doen zoals u wilt. Veel plezier!
