Share
Een van de belangrijkste aspecten van een front-end framework is de manier waarop navigatie wordt afgehandeld. In dit deel van Foundation for Beginners bekijken we verschillende navigatievormen, plus enkele JavaScript-tools die extra floreren. Ik zal je ook laten kennismaken met een andere handige tool die je helpt om een betere Foundation-ontwikkelaar te worden.
Een van de beste JavaScript-aanbiedingen van de Foundation komt in de vorm van een sectie; een plug-in voor het bouwen van verschillende navigatievormen, zoals accordeons, tabbladen, verticale en horizontale navigatie.
Hier is een voorbeeld van een opmaak:
Sectie 1
Inhoud van deel 1.
Sectie 2
Inhoud van deel 2.
Dit ziet er misschien wat ingewikkelder uit dan we eerder hebben behandeld, dus laat me het voor je op een rijtje zetten.
Elke sectie die u maakt, ongeacht of het een accordeon is, of tabbladen, of zelfs een navigatiebalk, begint met een div die de sectie-container les gevolgd door de auto klasse. Voeg op dezelfde div een leeg toe data-sectie attribuut. Dit attribuut bepaalt met wat voor soort sectie we te maken hebben, standaard gaat Foundation ervan uit dat we een accordeon willen. Als u een bepaald type sectie wilt gebruiken, wijzigt u eenvoudig de auto les naar tabs, accordeon, verticale-nav of horizontale-nav. Voeg ten slotte dezelfde klasse toe als de data-sectie attribuut waarde. Dit zorgt ervoor dat u het juiste type sectie voor uw behoeften weergeeft.
Nadat de wrapper is ingesteld, kunnen we wat inhoud toevoegen. Voor elke sectie in uw verpakking heeft u een titel nodig en om die titel aan de inhoud te koppelen:
Sectie 1
Inhoud van deel 1.
We kunnen hier zien dat elke sectie is ingepakt in een tag (wat dingen gemakkelijk maakt, hoewel je een div zou kunnen gebruiken). Binnen elk van deze secties hebben we een label met een klasse van titel die de link naar de overeenkomstige sectie omsluit. Onder de alineatag bevindt zich de div die de inhoud voor de sectie bevat; dit heeft een klasse van inhoud. Als u de bovenstaande code dupliceert, wordt elk van uw secties in de wrapper van uw sectie gemaakt.
Notitie: Het toevoegen van de verticale-nav klasse geeft een verticale navigatie op grote schermen weer, maar schakelt over naar een accordeon wanneer deze zich op kleine schermen bevindt. Het toevoegen horizontale-nav zal hetzelfde gedrag oproepen.
Stel dat u wilt linken naar het tweede gedeelte van uw sectiewrapper, maar wanneer u de pagina opent, wordt standaard het eerste gedeelte weergegeven. Wees niet bang! Foundation heeft een ingebouwde oplossing in de vorm van Deep Linking. Om dit te laten werken, moeten we een nieuw kenmerk aan onze wrapper toevoegen: gegevens-options =”deep_linking: true”. Dit vertelt Foundation dat wanneer een gebruiker een URL bezoekt met een fragment-ID zoals deze "http://www.website.com/#section3", deze de pagina met die sectie moet laden die wordt weergegeven.
Sectie 1
Inhoud van deel 1.
Sectie 2
Inhoud van deel 2.
Zoals u kunt zien, hebben we de optie voor deep-linking data toegevoegd en ook de data-slug attribuut aan de inhoud div. Deze datastlug instrueert Foundation welk gedeelte moet worden weergegeven bij het laden van de pagina.
Foundation's Side Nav (een eenvoudige manier om verticale menu's weer te geven) gaat hand in hand met secties. De HTML-structuur is heel eenvoudig en biedt waar nodig verdelingen. Laten we naar de opmaak kijken.
Dit is een standaard ongeordende lijst, bestaande uit lijstitems met links naar ... en wat u maar wilt. Het toevoegen van de side-nav klasse voor de actief klasse kan worden gebruikt om te laten zien welke link momenteel in gebruik is. Als u uw lijstitems wilt verdelen, voegt u een leeg lijstitem toe met een klasse van verdeler. Gemakkelijk.
Subnavigatie van de Foundation wordt meestal gebruikt voor dingen zoals het filteren van inhoud. De opmaak is net zo rechtlijnig als Side Nav, maar verschilt daarin dat het een beschrijvingslijst gebruikt in plaats van een ongeordende lijst. Dit geeft u de mogelijkheid om een termijn samen met jouw Omschrijving tags die uw links bevatten. Er zijn geen verdelers in de Sub Nav maar u kunt nog steeds gebruik maken van de actief klasse. Dit is de opmaak:
Paginering is ook een vorm van navigatie; in feite moet paginering echt vervat zitten in een element. Laten we eens kijken naar de markup van sommige paginakoppelingen in Foundation:
Het schoppen van je lijstitems moet een pijl zijn, waarvoor de klasse vereist is pijl. Misschien wilt u een van beide gebruiken « of ‹ of misschien zelfs ←. Neem een kijkje op unicode-table.com voor meer voorbeelden die u zou kunnen gebruiken.
Het pagineringstype Paginering stelt ons in staat klassen te vermelden niet beschikbaar en stroom, waarbij de laatste sterk lijkt op de actieve klasse die we eerder hebben bezocht. U kunt ook een pijl toevoegen aan uw laatste lijstitem, deze keer met een van beide » of ›, of misschien zelfs →.
Omdat dit een eenvoudige opmaak is, is het toevoegen aan een content management systeem zoals Wordpress vrij eenvoudig.
Bonus: U zou de paginering kunnen centreren door de ul-tag in een nav met de te wikkelen -Paginering centered klasse. Zoals met alle basiselementen, is paginering responsief en gemakkelijk in model te brengen.
Het gebruik van een responsief framework zoals Foundation is een snelle manier om uw project er geweldig uit te laten zien op alle apparaten, maar testen is nog steeds een hele klus. Om die pijn te verzachten, heb ik een tool gemaakt met de naam Respondr, waarmee je een url aan een smartphone, tablet en desktop kunt toevoegen, zodat je problemen snel en gemakkelijk kunt opvangen..
Tot nu toe hebben we het rastersysteem behandeld, blokkeringen, de schuifregelaar voor de schuifregelaar Orbit, de sectie-plugin en drie navigatietypen. De volgende keer concentreren we ons op de plug-in Top Bar, broodkruimels en nog een ander handig hulpmiddel.
Accentsconagua