In een eerdere zelfstudie hebben we geleerd hoe u de basisbibliotheek van Stichting 4 met CSS kunt aanpassen. Sindsdien heeft ZURB Foundation 5 uitgegeven; sneller, slanker en krachtiger dan zijn voorganger. Wat ook opvalt, is dat ZURB de Off Canvas-functionaliteit heeft teruggebracht, die te vinden was in Stichting 3.

Vandaag gaan we de functie buiten doek combineren met onze navigatie op de bovenste balk. Het resultaat is een mooie aangepaste navigatie voor desktopgebruikers en een slank off-invasemenu voor tablet- en mobiele gebruikers.

Notitie: De functionaliteit die we hier gebruiken werkt niet voor IE8 en lager. Ik heb een oplossing voor IE9 opgenomen in de bronnen die aan het einde van de zelfstudie worden vermeld.

Vereisten

Om deze tutorial te kunnen volgen, heb je wat ervaring nodig in het volgende:

• Basisbegrip van Foundation en The Grid System
• Kennis van het werken met een Sass and Compass Foundation Project

Ermee beginnen

De omgeving instellen

Als u dat nog niet hebt gedaan, kunt u Compass en Sass instellen met behulp van de Foundation Sass-documentatie als u aanwijzingen nodig hebt. Als je dat al hebt gedaan, is hier de snelle installatie voor het maken van een nieuw Foundation 5-project met behulp van de opdrachtprompt:

Ruby opdrachtprompt

Ga naar de map van je voorkeur

cd c: / user / your-work-environment

Gebruik deze opdracht om uw project te maken

stichting nieuw uw-project

Ga naar je nieuw gemaakte projectbestand

cd jouw-project

En gebruik deze opdracht om een ​​kompas te krijgen om uw Sass-bestanden te bekijken en te compileren

kompas kijken

Als alles goed is gegaan, ziet uw directory er ongeveer zo uit:

Foundation 5 Project Directory

Er rest slechts één ding en dat is het creëren van onze style.scss. Doe dit door een nieuw bestand in de map scss te maken en dat bestand style.scss te benoemen. We hebben dit bestand later nodig. Als je Compass draait, moet je style.scss al gecompileerd zijn naar astyle.cssbestand in uw stylesheets-map. Geweldig, we hebben alles ingesteld, laten we aan de slag gaan met het coderen van onze algemene HTML-structuur.

De HTML-structuur instellen

Stap 1: Algemene markup

Open uw index.html en verwijder alle inhoud tussen de body-tags, behalve de scripts vlak voor de . We hebben ze nodig voor alle functies van de Foundation om te werken. Ten tweede, ga je gang en voeg de volgende regel code toe in de , om ervoor te zorgen dat we het CSS-bestand laden.

Laten we met die instelling een paar secties toevoegen en onze pagina voorzien van een aantal dummy-inhoud. We beginnen met enkele basisprincipes, door een koptekst, hoofd-, service-, call-to-action-, voettekst- en auteursrechtsectie toe te voegen.

  
 
 
 
Menu 5 Topbar / Offcanvas
 
  
  
     
  
 
 
 
Opzij gaan voor de Offcanvas-mensen!
 
Lorem ipsum dolor sit amet, consectetur adipiserende elit. Vitae, minus molestias dolores blanditiis esse? Quam, accusamus, quo, eum, ipsum voluptatibus aliquam perspiciatis qui porro est sit eligendi suscipit. Expedita, eligendi, laboriosam animi itaque accusantium repudiandae dicta ullam quia ipsum amet quam nesciunt non! Porro, fuga molestiae quaerat accusantium nesciunt omnis.
 
Lorem ipsum dolor sit amet, consectetur adipiserende elit. Vero, minima, quidem repellendus facilis dignissimos laboriosam doloribus sequi tempora iusto facere maxime quasi est ex qui commodi nobis aliquid id eius magnam consectetur. Ut deserunt repellat asperiores dolores odio! Incidant, esse, distinctio modi ratione facilis iusto tempora saepe nisi nostrum culpa velit eaque quos dolore repellat facere accusamus architecto iure similique numquam autem asperiores error cumque eum. Dolor, minima aspernatur autem eaque ipsa officiis rem! Suscipit, esse, quos. Quos, perferendis, iure nobis modi perspiciatis enim error nulla asperiores dignissimos harum. Dolor, non rem in nobis illum id hic laboriosam blanditiis aliquid!
 
  
  
   
 
 
 
Service # 1
 
Lorem ipsum dolor sit amet, consectetur adipiserende elit. Natus, veniam, asperiores fugit quas quaerat soluta in quibusdam placeat incidunt suscipit esse neque quisquam eaque rem!
 
 
 
Service # 3
 
Lorem ipsum dolor sit amet, consectetur adipiserende elit. Aliquam, niho nemo tempore voluptatum veritatis corrupi id doloremque. Saepe, in volgorde voluptatem rem omnis aliquam?
 
 
 
Service # 3
 
Lorem ipsum dolor sit amet, consectetur adipiserende elit. Voluptate ducimus aut commodi eius! Sequi, magni labore ea iusto quibusdam autem repellendus ipsum dolorem quasi maxime!
 
 
  
   
 
 
 Neem contact op met ons! 
 
 
 
      
 
 
 
© 2014
 
  
  
 

Hier hebben we een koptekstgedeelte met een logo toegevoegd en vervolgens een hoofdsectie verdeeld in het inhoudgedeelte, drie services en een call-to-action. Ten slotte is er een voettekstgedeelte met drie kolommen en een auteursrechtgedeelte. Straight-forward markup tot nu toe, laten we naar de bovenste balk gaan!

Stap 2: Top Bar Markup

We gaan onze Top Bar in een sectie met de klas inpakken navigatie-sectie, voor stylingdoeleinden. We gaan deze sectie ook een andere les geven: tonen-for-large-up. Dit zorgt ervoor dat de bovenste balk alleen wordt weergegeven voor apparaten van een bepaalde minimale breedte en hoger. Dit is een van de vele Zichtbaarheidsklassen die Stichting ons voorziet (u kunt hierover meer lezen in de documentatie bij de Foundation-component). Nu voor de markup:

Notitie: Neem de data-topbar op in uw nav. Op deze manier zorgen we ervoor dat het JavaScript voor onze Top Bar naar behoren werkt (zoals de dropdown, bijvoorbeeld).

Stap 3: Off-Canvas Markup

Ons menu buiten het canvas wordt verborgen buiten de grenzen van het kijkvenster. Het moment waarop we op drukken menu, Offcanvas komen naar binnen (links in ons geval) en verplaatsen de pagina-inhoud naar rechts. In onze opstelling gaan we uitsluitende koptekst en de voettekst in deze beweging. Alleen het inhoudsgebied wordt verplaatst en de kop- en voettekst op hun plaats gehouden. 

Bovendien zal onze kop (die een logo en misschien andere inhoud kan bevatten) bij het scrollen naar boven aan de pagina verschijnen (Notitie: De pagina zou voldoende inhoud moeten bevatten om dit te laten werken, omdat anders het voettekstgedeelte ook boven ons Offcanvas-menu zou zweven). Dit betekent dat we Off-canvas rond ons hoofdgedeelte van de inhoud moeten "inpakken". Na de navigatie naar de bovenste balksectie en vóór onze hoofdinhoud sectie, zet de volgende HTML:

Laten we het afbreken. We hebben twee div-elementen gemaakt; één met de klas off-canvas-wrap en één met de klas inwendige-wrap.  De off-canvas-wrap verbergt onze inhoud totdat op de menuknop wordt gedrukt. Deinner wrap bevat onze navigatie menubalk, ons linker zij-aan-canvas menu en het hoofdgedeelte van de inhoud. We hebben de nav een klasse gegeven verbergen-for-large-up, om ervoor te zorgen dat het alleen wordt weergegeven voor middelgrote en kleine apparaten. Door de opzij te leggen een klasse van left-off-canvas-menu, we zorgen ervoor dat ons menu naast het canvas aan de linkerkant van het scherm verschijnt. De menu-items in ons menu buiten het canvas zijn vergelijkbaar met de bovenste balk. Voor buiten het canvas gebruiken we een ongeordende lijst met een klasse van off-doek-lijst om de magie te laten gebeuren.

U hoeft alleen nog maar de gebruiker een manier te geven om het menu Offcanvas te sluiten. Daarna sluiten we de off-canvas-wrap en de inwendige-wrap divs. Voeg dit toe direct na het sluiten van het hoofdgedeelte.