Maak een snel, kleverig menu

We zullen de gebruiken data-icons kenmerk om onze lettertypepictogrammen op te geven. De lettertypepictogrammen worden gebruikt om onze hoofdmenu-items effectief te versieren. Lettertype-glyphs kunnen worden geschaald en gekleurd zonder verlies van resolutie, terwijl het gebruik van bitmapafbeeldingen minder flexibiliteit biedt. We zullen hier meer over praten naarmate we vorderen.

Stap 3: Filler-inhoud toevoegen

Om aan te geven wat er aan de hand is, voegen we wat dummy tekst en een logo toe. Zorg ervoor dat je genoeg inhoud hebt om te bladeren als je het eindresultaat in zijn volle glorie wilt zien ...

 
  
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minimus veniam, quis nostrud exercise ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
 
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
 

Stap 4: Algemene stijlen

Eerst laden we Eric Meyer's Reset CSS in en plaatsen deze boven in ons css-bestand boven andere selectors:

 lichaam font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-gewicht: 500; font-size: 1.1em; kleur: # 34495E; achtergrondkleur: # ECF0F1;  div.wrapp width: 70%; marge: 0 auto;  p margin-bottom: 4em;  .logo max-width: 100%; 

Je zult merken dat ik de div.wrapp 70% breed, plus ik heb gezegd dat afbeeldingen maximaal 100% breed moeten zijn. Dit is een solide start bij het bouwen van een vloeiende lay-out.

Stap 5: De werkbalk stylen

Vervolgens voegen we een aantal werkbalkstijlen toe - eerst door de wrapper aan de zijkant van de pagina te bevestigen en deze effectief uit de documentstroom te verwijderen.

 div.toolbar-wrapp positie: vast; weergave: blok; top: 30%;  div.sticky-toolbar positie: relatief; top: 30%; opvulling: .1em; achtergrondkleur: # 2C3E50; zweven: links; -webkit-border-radius: 0 .2em .2em 0; -moz-border-radius: 0, 2em, 2em 0; grensradius: 0, 2em, 2em 0; 

Notitie: Het is heel belangrijk om te verklaren positie: relatief voor div.sticky-toolbar omdat het ons in staat stelt om andere elementen hiertegen juist te positioneren.

Stap 6: @ Font-face Laden

Zoals eerder vermeld, zullen we geen bitmapafbeeldingen gebruiken voor onze pictogrammen. In plaats daarvan gebruiken we @ font-face om lettertypebestanden voor gebruik in de browser op te halen.

@ font-face is een CSS-regel waarmee u een bepaald lettertype van uw server kunt downloaden om een ​​webpagina weer te geven als de gebruiker dat lettertype niet heeft geïnstalleerd. Dit betekent dat webontwerpers zich niet langer hoeven te houden aan een bepaalde reeks "webveilige" lettertypen die de gebruiker vooraf op hun computer heeft geïnstalleerd.

We gaan Entypo gebruiken; een Open Source-bundel met gratis iconen voor commercieel en persoonlijk gebruik. Het heeft een PSD, EPS, PDF, OpenType, TrueType en verschillende andere bestanden, dus laten we ze downloaden voor gebruik in ons project.

Dit zijn onze @ font-face-verklaringen, die we in ons CSS-bestand plakken. Zorg ervoor dat de paden correct verwijzen naar de lettertypebestanden binnen het project, anders worden ze niet weergegeven.

 @ font-face font-family: 'Entypo'; src: url ('... /font/entypo.eot'); src: lokaal ('☺'), url ('... /font/entypo.woff') formaat ('woff'), url ('... /font/entypo.ttf') formaat ('truetype'), url (' ... /font/entypo.svg#webfontIyfZbseF ') formaat (' svg '); 

We selecteren nu alle elementen binnen onze markup met de data-icons attribuut, overstag gaan a :voor pseudo-element op elk element en het vullen van dat pseudo-element met de personages die in de data-icons waarde.

 [data-icoon]: vóór font-family: 'Entypo'; inhoud: attr (data-icoon); 

Dit is bijvoorbeeld ons eerste anker:

en onze CSS gebruikt de waarde 📣 om zijn te vullen :voor element.

Stap 7: Styling van de werkbalkelementen

Laten we coole effecten aan onze pictogrammen toevoegen ...

 div.sticky-toolbar ul li a display: block; breedte: .8em; marge: 0,2em; regelhoogte: 80%; lettergrootte: 2.2em; text-align: center; kleur: #fff; achtergrondkleur: # 16A085; -webkit-border-radius: .1em; -moz-border-radius: .1em; grensradius: .1em; -webkit-overgang: alle 0,1s gemak in-uit; -moz-overgang: alle 0,1s gemak in-uit; overgang: alle 0,1s gemak in-uit; -webkit-font-smoothing: antialiased; 

Notitie: Voor het maximaliseren van heldere en duidelijke webfont-pictogrammen (ten minste in webkit-browsers), neemt u een -webkit-font-smoothing: antialiased; naar deze sectie. Je zou dit ook kunnen toepassen alles de globale selector gebruiken: * -webkit-font-smoothing: antialiased;

Voeg nu wat hover-effecten toe en je bent klaar.

 div.sticky-toolbar ul li a: hover background-colour: # 1ABC9C; 

Stap 8: Het pop-upmenu stylen

Dat heeft onze menubalk behandeld, laten we nu wat styling toevoegen aan het pop-upmenu:

 div.popup weergave: geen; zweven: rechts; positie: relatief; links: 5%; achtergrondkleur: # 2C3E50; -webkit-border-radius: .2em; -moz-border-radius: .2em; grensradius: .2em; 

Notitie: In de standaard staat moeten we deze sectie verbergen met Geen weergeven;. Later zullen we de zichtbaarheid wijzigen met jQuery. U kunt de displaywaarde voor nu leeg laten totdat u de styling hebt voltooid, maar vergeet deze later niet terug te brengen.

Stap 9: De elementen van het pop-upmenu stylen

Voorwaarts! Laten we wat styling toevoegen voor de menu-elementen:

 div.popup ul li a position: relative; weergave: inline-block; font-size: .85em; kleur: #fff; opvulling: 0 2em 0 2em; marge: .4em; text-align: center; tekstdecoratie: geen; overgang: alle 0,1s gemak in-uit; -webkit-border-radius: .2em; -moz-border-radius: .2em; grensradius: .2em; 

en een simpele : hover effect:

 div.popup ul li a: hover background-colour: # 1ABC9C; 

Stap 10: Maak een pijl met CSS

In plaats van een transparante .png-pijlafbeelding te maken, gebruiken we een leuke truc om hetzelfde effect te creëren (hoewel volledig schaalbaar) met CSS-randen. Het is ook mogelijk om pseudo-elementen te gebruiken, als je je opmaak liever niet vertroebelt met extra elementen:

 .pijl positie: absoluut; top 10%; links: -.4em; breedte: 0; hoogte: 0; border-top: .5em solid transparant; border-right: .5em solid # 2C3E50; border-bottom: .5em solid transparant; 

Voor meer informatie over hoe dit is bereikt, bekijk deze CSS Triangles quick tip door Joren Van Hee.

Stap 11: Een toggle-functie maken

Voor de laatste stap gebruiken we een jQuery-fragment, zodat we ons pop-upmenu kunnen wijzigen. Voeg het volgende toe

Notitie: Zorg ervoor dat u de return false verklaring, waardoor u niet elke keer dat u op het pictogram klikt, terugkeert naar de bovenkant van de pagina.