Hoe een responsieve navigatie te maken

Een van de lastigste onderdelen om te zijn responsified op een website is “de navigatie”, dit deel is erg belangrijk voor de toegankelijkheid van de website, omdat dit een van de manieren is waarop bezoekers over de webpagina's springen.

Er zijn eigenlijk vele manieren om responsieve websitenavigatie te maken en zelfs sommige jQuery-plug-ins zijn beschikbaar om het in een seconde te doen.

In plaats van een instant-oplossing toe te passen, gaan we je in deze post echter gewoon verder hoe een eenvoudige navigatie vanaf de grond te bouwen en het gebruik van de CSS3 mediaqueries en een beetje jQuery om het op een juiste manier weer te geven in een klein schermformaat zoals de smartphones.

Laten we dus beginnen.

demonstratie
Download de bron

HTML

Laten we eerst de meta-viewport toevoegen in de hoofd label. Deze meta viewport tag is vereist om onze pagina naar behoren te schalen binnen elk schermformaat, met name in de mobiele viewport.

... en voeg vervolgens het volgende fragment toe als de navigatiemarkering in de lichaam label.

   Huis
 Hoe
 Icons
 Ontwerp
 Web 2.0
 Hulpmiddelen
 
 Menu

Zoals je hierboven kunt zien, hebben we zes primaire menulinks en is er nog een link achter toegevoegd. Deze extra link wordt gebruikt om Trekken de menunavigatie wanneer deze op een klein scherm is verborgen.

Verder lezen: Vergeet de metatag van de viewport niet.

stijlen

In dit gedeelte beginnen we de navigatie te stylen. De stijl is hier alleen decoratief, je kunt elke gewenste kleur kiezen. Maar in dit geval willen wij (ik persoonlijk) de lichaam om een zachte en romige kleur te hebben.

 body achtergrondkleur: # ece8e5;

De nav tag die de navigatie definieert 100% volledige breedte van het browservenster, terwijl de ul waar het onze primaire menu-links bevat 600px voor de breedte.

 nav height: 40px; breedte: 100%; achtergrond: # 455868; lettergrootte: 11pt; font-family: 'PT Sans', Arial, sans-serif; lettertype: vet; positie: relatief; border-bottom: 2px solid # 283744;  nav ul opvulling: 0; marge: 0 auto; breedte: 600 px; hoogte: 40px;

Dan zullen wij vlotter het menu linkt naar links, zodat ze horizontaal naast elkaar worden weergegeven, maar als een element zwevend wordt, klapt ook zijn ouder in.

 nav li display: inline; zweven: links;

Als u merkt dat de HTML-markup hierboven is vermeld, hebben we dit al toegevoegd Clearfix in de klasse attribuut voor zowel de nav en ul om dingen op te ruimen als we de elementen erin drijven met behulp van deze CSS clearfix-hack. Laten we dus de volgende stijlregels toevoegen aan de stylesheet.

 .clearfix: before, .clearfix: after content: ""; weergave: tafel;  .clearfix: after clear: both;  .clearfix * zoom: 1;

Omdat we zes menu-links hebben en we ook de container hebben opgegeven 600px, elke menu-koppeling zal hebben 100px voor de breedte.

 nav a color: #fff; weergave: inline-block; breedte: 100 px; text-align: center; tekstdecoratie: geen; regelhoogte: 40 px; tekstschaduw: 1px 1px 0px # 283744;

De menulinks worden gescheiden met 1px rechterrand, behalve de laatste. Onthoud onze vorige post op boxmodel, de breedte van het menu wordt uitgebreid voor 1px het maken 101px als de randtoevoeging, dus hier veranderen we de box-sizing model voor border-box om het menu te behouden 100px.

 nav li a border-right: 1px solid # 576979; box-sizing: border-box; -moz-box-sizing: border-box; --Webkit-box sizing: border-box;  nav li: last-child a border-right: 0;

Vervolgens heeft het menu een helderder kleur wanneer het in is : hover of :actief staat.

 nav a: hover, nav a: active background-colour: # 8c99a4;

... en ten slotte wordt de extra link verborgen (voor het bureaublad).

 nav a # pull display: none;

Op dit moment stylen we alleen de navigatie en gebeurt er niets wanneer we het formaat van het browservenster aanpassen. Laten we dus naar de volgende stap gaan.

Verder lezen: CSS3 Box-dimensionering (Hongkiat.com)

Media Queries

De CSS3-mediaquery's worden gebruikt om te definiëren hoe de stijlen in sommige bepaalde onderbrekingspunten of specifiek de schermformaten van het apparaat zullen verschuiven.

Omdat onze navigatie aanvankelijk is 600px fix-breedte, zullen we eerst de stijlen definiëren wanneer deze wordt bekeken 600px of een lagere schermgrootte, dus praktisch gezien, deze is ons eerste breekpunt.

In deze schermgrootte worden elk van de twee menulinks naast elkaar weergegeven, dus de ulDe breedte is hier 100% van het browservenster terwijl de menuelinks zullen hebben 50% voor de breedte.

 @media-scherm en (max. breedte: 600px) nav height: auto;  nav ul width: 100%; weergave: blok; hoogte: auto;  nav li width: 50%; zweven: links; positie: relatief;  nav li a border-bottom: 1px solid # 576979; border-right: 1px solid # 576979;  nav a text-align: left; breedte: 100%; tekst-inspringing: 25px;

... en dan definiëren we ook hoe de navigatie wordt weergegeven als het scherm kleiner wordt 480px of lager (dus dit is ons tweede breekpunt).

In dit schermformaat wordt de extra link die we eerder hebben toegevoegd, zichtbaar en geven we de link ook een “Menu” pictogram aan de rechterkant met behulp van de :na pseudo-element, terwijl de hoofdmenuelinks verborgen zijn om meer verticale spaties op het scherm op te slaan.

 @media only-scherm en (max-width: 480px) nav border-bottom: 0;  nav ul display: none; hoogte: auto;  nav a # pull display: block; achtergrondkleur: # 283744; breedte: 100%; positie: relatief;  nav a # pull: after content: ""; achtergrond: url ('nav-icon.png') no-repeat; breedte: 30px; hoogte: 30 px; weergave: inline-block; positie: absoluut; rechts: 15px; top: 10px;

Ten slotte wanneer het scherm kleiner wordt 320px en lager wordt het menu verticaal van boven naar beneden weergegeven.

 @media only-scherm en (max-width: 320px) nav li display: block; zweven: geen; breedte: 100%;  nav li a border-bottom: 1px solid # 576979;

Nu kunt u het formaat van het browservenster proberen te wijzigen. Het zou nu de schermgrootte moeten kunnen aanpassen.

Verder lezen: Mediaquery's voor standaard apparaten.

Het menu weergeven

Op dit punt zal het menu nog steeds verborgen zijn en zal het alleen zichtbaar zijn wanneer het nodig is door op of te tikken of te klikken “Menu” link en we kunnen het effect bereiken met behulp van jQuery slideToggle ().

 $ (function () var pull = $ ('# pull'); menu = $ ('nav ul'); menuHeight = menu.height (); $ (pull) .on ('klik', functie (e) e.preventDefault (); menu.slideToggle ();););

Wanneer u het formaat van het browservenster echter wijzigt nadat u het menu net hebt bekeken en het op een klein scherm hebt verborgen, blijft het menu verborgen, omdat de Geen weergeven stijl gegenereerd door de jQuery is nog steeds verbonden in het element.

We moeten deze stijl dus als volgt verwijderen in de grootte van het venster:

 $ (venster) .resize (functie () var w = $ (window) .width (); if (w> 320 && menu.is (': hidden')) menu.removeAttr ('style'); );

Oké, dat zijn alle codes die we nodig hebben, we kunnen nu de navigatie van de volgende koppelingen bekijken, en we raden aan om het te testen in een responsieve ontwerptesttool, zoals de Responsinator, zodat je het in verschillende breedtes tegelijk kunt bekijken.

demonstratie
Download de bron

Bonus: een alternatieve manier

Zoals we eerder in dit bericht hebben vermeld, zijn er een aantal andere manieren om dit te doen en een JavaScript-bibliotheek te gebruiken SelectNav.js is een van de gemakkelijkste manieren. Dit is een puur JavaScript dat niet afhankelijk is van een andere externe bibliotheek zoals jQuery.

In principe dupliceert het je lijstmenu en transformeert het in een menu maakt gebruik van de native gebruikersinterface van het apparaat zelf.

Raadpleeg alstublieft de officiële documentatie voor verdere implementatie.

Conclusie

We zijn helemaal doorgegaan om responsieve navigatie vanaf nul te creëren. Deze die we hier hebben gemaakt is slechts een van de voorbeelden, en zoals we eerder in deze post hebben gezegd en hierboven zijn weergegeven, zijn er nog vele andere oplossingen die u kunt implementeren. Het is nu dus aan u om te beslissen welke oefening het beste past bij de vereisten en de navigatiestructuur van uw website.