Share
Laten we een kijkje nemen naar de bovenste balk in het kader van de Foundation. Omdat er nogal wat te dekken valt, splitsen we het op in makkelijke stukjes.
De bovenste balk van Foundation is een erg handig klein onderdeel, maar het is absoluut niet verplicht om het in je builds te gebruiken. Ik schat dat ik er gebruik van heb gemaakt in ongeveer 40% van de projecten die ik met Foundation heb gebouwd. Overweeg zorgvuldig of het al dan niet in de behoeften van uw project past; de component van de bovenste balk is net zo eenvoudig te stylen als elke andere, maar de interactie is behoorlijk ingesteld.
Om te beginnen met het opbouwen van de bovenste balk hebben we een tag, met de vereiste klasse van "top-bar".
Binnen dat ligt een is, waarvan een onze titel / logo zal behouden en de andere ons "mobiele" menu.
Notitie: u kunt het "menupictogram" van de klasse of het inhoudsmenu "verwijderen" als u slechts één van de twee wilt weergeven.
Het toevoegen van bovenliggende links is ons volgende doel, dus voordat onze afsluitende nav-tag wordt toegevoegd in a met de klasse "top-bar-sectie". In deze sectie moeten we een ongeordende lijst met verschillende lijstitems toevoegen.
Stichting heeft een handige klasse "verdeler" die kan worden toegepast op lege lijstitems, waardoor u elke menulink kunt scheiden van een aantrekkelijke regel. Ze worden in het volgende voorbeeld gebruikt om onze menulinks te verdelen.
Je zult ook opmerken dat de ul de "linker" klasse heeft toegepast, die dingen naar links stuurt. U kunt bijvoorbeeld twee sets menulinks hebben, één zwevend links en één (met gebruik van de klasse 'rechts') zwevend rechts.
- Hoofditem 1
- Hoofdartikel 2
Alle links die we tot nu toe hebben toegevoegd, worden horizontaal langs de balk weergegeven. Op kleinere schermen worden ze een vervolgkeuzelijst, geactiveerd door de knop Menu die we eerder hebben toegevoegd.
Elk lijstitem kan een geneste, ongeordende lijst bevatten voor submenu's. Om ervoor te zorgen dat dit werkt en correct wordt weergegeven, moet de klasse "has-dropdown" worden toegepast op de bovenliggende link, waarbij de klasse "dropdown" wordt toegepast op de geneste ongeordende lijst:
Notitie: Als u de huidige actieve paginalink wilt markeren, voegt u een "actieve" klasse toe.
Submenu's worden weergegeven als standaard dropdown onder omstandigheden van "groot scherm". Op kleinere schermen verschijnen ze vanuit "off screen".
Ondanks dat dit de 'bovenste' balk wordt genoemd, kunt u dit onderdeel overal in uw lay-out plaatsen. Als u de balk nodig hebt om op de pagina te blijven terwijl u scrolt, kunt u de bovenste balk in een div omzetten in de klasse "fixed". Als u de bovenste balk in uw hoofdcontainer wilt behouden, kunt u ook de breedte van de bovenste balk instellen op de grid-breedte met behulp van de klasse "bevatten-naar-grid". Gelukkig kun je deze beide klassen ("bevatten-naar-raster" en "vast") in combinatie gebruiken.
Stel dat u de bovenste balk in het midden van de lay-out wilt, maar dat u de balk nodig hebt om aan de bovenkant van de pagina te blijven wanneer de gebruiker naar beneden scrolt. Dit is mogelijk door de bovenste balk in de klassen "bevatten-naar-raster" en "plakkerig" in te pakken.
Als al die handige functies niet genoeg waren, zou je misschien ook een input willen toevoegen die je zou kunnen gebruiken om te zoeken, of om een mailinglijst in te schrijven, of wat je maar wilt. Wanneer u formulierelementen toevoegt in een menu-item, moeten we een klasse "has-form" toevoegen. Je kunt aan de hand van de onderstaande code zien dat we daadwerkelijk gebruik maken van het raster binnen de bovenste balk. Dit maakt plaatsing van de elementen eenvoudig - en natuurlijk responsief, omdat de kolommen de indeling op kleine schermen verschuiven.
Broodkruimels komen veel voor op CMS-gebaseerde websites, zoals Wordpress, waar de paginahiërarchie op meerdere niveaus een beetje ingewikkeld kan worden. Deze kunnen in elk Foundation-project worden gebruikt door eenvoudigweg de klasse 'breadcrumbs' toe te voegen aan een van beide label. Wanneer u de niet-geordende lijst gebruikt, moeten alle koppelingen in lijstitems zijn, terwijl de koppelingen binnen het nav-element ankertags moeten zijn.
De enige aanvullende klassen die in de breadcrumb-markeringen zijn opgenomen, zijn 'niet beschikbaar' en 'actueel'.
De bovenste balk is zeer flexibel en eenvoudig genoeg om op te nemen in een van uw op funderingen gebaseerde projecten. In het volgende deel van deze sessie zullen we het hebben over knoppen, vervolgkeuzemenu's en de clearing-plugin.
Accentsconagua