Share
De volgende in de gecodeerde PSD-serie van Orman Clark is zijn geweldig uitziende verticale navigatiemenu. We zullen het opnieuw creëren met CSS3 en jQuery, terwijl we zo min mogelijk afbeeldingen gebruiken.
De enige afbeeldingen die we zullen gebruiken zijn voor de pictogrammen - ik zal een sprite maken met een nieuwe tool genaamd SpriteRight, maar dit is optioneel. Daarnaast zal ik GradientApp gebruiken om mijn CSS3-gradiënten te maken, maar nogmaals, dit is optioneel.
Laten we beginnen door wat basisopmaak, een leeg HTML5-document, in te voeren:
Verticaal navigatiemenu: CSS3 gecodeerd
En nu de opmaak voor ons menu; een ongeordende lijst binnen een omhullende wrapper.
- vrienden 340
- Videos 147
- Galleries 340
- podcasts 222
- robots 16
Ten slotte maken we de submenu's door een ongeordende lijst te plaatsen die is genest in elk van onze bestaande lijstitems.
- vrienden 340
- Leuke kittens 14
- Vreemd "spul" 6
- Automatische mislukkingen 2
- Videos 147
- Leuke kittens 14
- Vreemd "spul" 6
- Automatische mislukkingen 2
- Galleries 340
- Leuke kittens 14
- Vreemd "spul" 6
- Automatische mislukkingen 2
- podcasts 222
- Leuke kittens 14
- Vreemd "spul" 6
- Automatische mislukkingen 2
- robots 16
- Leuke kittens 14
- Vreemd "spul" 6
- Automatische mislukkingen 2
Oké, er lijkt daar veel te zijn, maar laat het je niet in verwarring brengen. Eerst hebben we een ongeordende lijst gemaakt met vijf lijstitems, elk met een ankertag. Vervolgens hebben we geneste ongeordende lijsten toegevoegd, elk met drie lijstitems.
Ik heb ook een klasse toegevoegd aan elk item in de lijst, zodat het later gemakkelijker kan worden gemaakt om te stijlen. Ten slotte hebben we voor de nummers een span-tag gemaakt binnen elke ankertag. Als u het in uw browser bekijkt, ziet het er als volgt uit:
We zullen er eerst voor zorgen dat ons menu correct wordt weergegeven. Voeg deze regels toe aan css / styles.css, ze zullen de marge en opvulling van al onze uls tot 0, en verwijder de lijststijl.
ul, ul ul margin: 0; opvulling: 0; lijststijl: geen;
Voordat we ons menu gaan stylen, maken we een wrapper met een vaste breedte en een lettergrootte van 13px (uitgedrukt in em-eenheden). Eerst voegen we een regel toe aan de instantie, font-size: 100%;. Dit zorgt ervoor dat onze styling gebaseerd is op de standaard lettertypegrootte van de browser (meestal 16px).
Nu om uit te leggen hoe de lettertypegrootte van de wikkel werkt. We moeten het uitdrukken als een em; evenredig aan de lettergrootte van het bovenliggende bestand van de ouder. We mikken op 13px, dus aangenomen dat de bovenliggende grootte 16px is, is onze resulterende em 13/16 = 0.8125. 13px is 0.8125 * 16px.
Het meten van onze lettertypen (en andere elementen) in em-eenheden maakt ze vloeiend. Als we nu de lettergrootte van de wrapper wijzigen (of de standaardgrootte van onze browser), wordt het hele menu aangepast ten opzichte van die basis. Probeer dit niet te verwarren, als je hulp nodig hebt bij het converteren van je lettertypen, raad ik je aan om pxtoem.com te bezoeken.
body font-size: 100%; een text-decoration: none; ul, ul ul margin: 0; opvulling: 0; lijststijl: geen; #wrapper width: 220px; marge: 100px auto; font-size: 0.8125em;
We hebben de wrapper een vaste breedte van 220 px gegeven en gecentreerd met een marge bovenkant door toevoeging marge: 100px auto;.
Vervolgens voegen we wat styling toe voor het menu. We maken de breedte en hoogte van het menu op ul auto, pas dan een schaduw toe op het hele ding. Door de hoogte toe te voegen als automatisch, wordt de schaduw aangepast wanneer de schuifregelaar wordt geopend.
Dan de ankertags; we voegen een breedte van 100% toe, wat betekent dat ze zich uitstrekken tot de 220px breedte van de wikkel. Voor een hoogte gebruiken we ems, dus denk terug aan onze hoofdlettergrootte van 13px. Onze .psd toont een hoogte van 36px, dus dat is ons doel. We nemen 36 en verdelen het met 13, wat uitkomt op ongeveer 2.75em (36/13 = 2.76923077). We zullen ook 2.75em gebruiken voor de lijnhoogte (om alle tekst verticaal te centreren) en dan wat tekst-inspringen toepassen om tekst in te duwen, zodat er later ruimte ontstaat voor ons pictogram.
We zullen een CSS3-gradiënt voor de achtergrond toevoegen, ik ging door en creëerde dit met GradientApp. Vervolgens veranderen we het lettertype, we passen het Helvetica Neue-lettertype en een witte kleur toe samen met een tekstschaduw. Merk op dat we hier geen lettergrootte hebben gebruikt. Dat komt omdat ons basistype 13px is voor de wrapper die onze ankers hebben geërfd, dus u hoeft het niet toe te voegen aan.
body font-size: 100%; een text-decoration: none; ul, ul ul margin: 0; opvulling: 0; lijststijl: geen; #wrapper width: 220px; marge: 100px auto; font-size: 0.8125em; .menu width: auto; hoogte: auto; -webkit-vak-schaduw: 0px 1px 3px 0px rgba (0,0,0, .73), 0px 0px 18px 0px rgba (0,0,0, .13); -moz-box-shadow: 0px 1px 3px 0px rgba (0,0,0, .73), 0px 0px 18px 0px rgba (0,0,0, .13); vakschaduw: 0px 1px 3px 0px rgba (0,0,0, .73), 0px 0px 18px 0px rgba (0,0,0, .13); .menu> li> a achtergrondkleur: # 616975; achtergrondafbeelding: -webkit-gradiënt (lineair, linkerbovenkant, linksonder, van (rgb (114, 122, 134)), tot (rgb (80, 88, 100))); achtergrondafbeelding: -webkit-lineaire gradiënt (top, rgb (114, 122, 134), rgb (80, 88, 100)); achtergrondafbeelding: -moz-lineaire gradiënt (top, rgb (114, 122, 134), rgb (80, 88, 100)); achtergrondafbeelding: -o-lineaire gradiënt (top, rgb (114, 122, 134), rgb (80, 88, 100)); achtergrondafbeelding: -ms-lineaire gradiënt (top, rgb (114, 122, 134), rgb (80, 88, 100)); achtergrondafbeelding: lineaire gradiënt (boven, rgb (114, 122, 134), rgb (80, 88, 100)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# 727a86', EndColorStr = "# 505864"); border-bottom: 1px solid # 33373d; -webkit-vak-schaduw: inzet 0px 1px 0px 0px # 878e98; -moz-box-shadow: inzet 0px 1px 0px 0px # 878e98; vakschaduw: inzet 0px 1px 0px 0px # 878e98; breedte: 100%; hoogte: 2.75em; regelhoogte: 2.75em; tekst-inspringing: 2.75em; weergave: blok; positie: relatief; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-gewicht: 600; kleur: #fff; text-shadow: 0px 1px 0px rgba (0,0,0, .5);
Oke! Nu begint het er beter uit te zien en we krijgen ook wat structuur! Maar hoe zit het met het toevoegen van een achtergrondkleur, zodat het menu beter zal opvallen ...
body background: # 32373d;
Uit de bovenstaande CSS kunt u zien dat u gemakkelijk vergeet wat uw em-eenheden eigenlijk betekenen. Het is een goed idee om opmerkingen over uw oorspronkelijke berekeningen achter te laten, zodat u nog steeds kunt ontcijferen wat er aan de hand is wanneer u in de toekomst opnieuw naar uw code gaat. Onthoud de formule: gewenste px / bovenliggende px = resulterende em en gebruik het symbool bij benadering (≈) als je het resultaat afrondt.
#wrapper font-size: 0.8125em; / * 13/16 = 0.8125 * / .menu> li> a height: 2.75em; / * 36/13 ≈ 2.75 * / regelhoogte: 2.75em; / * 36/13 ≈ 2,75 * / tekst-streepje: 2.75em; / * 36/13 ≈ 2,75 * /
Tijd om wat CSS toe te voegen voor de witte submenu's. We moeten een witte achtergrond met enkele grijze randen toevoegen. Let op voor de laatste omdat het geen onderrand heeft, dus we richten het met de :laatste kind pseudo-selector om het te verwijderen. Het heeft een donkerblauwe rand zodat we de grijze verwijderen en een blauwe toevoegen.
De volgende stap zal vergelijkbaar zijn met de vorige; we zullen de hoogtes en breedtes opnieuw toevoegen, we zullen de achtergrond in wit veranderen. Deze keer moeten we de lettergrootte wijzigen. We streven naar 12px dus met behulp van onze berekening van gewenste px / bovenliggende px = resulterende em we krijgen 0.923em
Laten we ook de tekstkleur in grijs veranderen. Let op dat we gebruikten display: block. Als we het hadden gebruikt float: left de menu's zouden niet soepel animeren, dus gebruiken we het weergaveblok om ze te helpen bewegen op een prettige en soepele manier. je zult ook merken dat we een extra stijl hebben toegevoegd; we passen dit toe op het laatste kind van de sub-ul. We moeten dit doen, zodat we de randkleur kunnen wijzigen.
.menu ul li a background: #fff; border-bottom: 1px solid # efeff0; breedte: 100%; hoogte: 2.75em; regelhoogte: 2.75em; tekst-inspringing: 2.75em; weergave: blok; positie: relatief; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 0.923em; font-gewicht: 400; kleur: # 878d95; .menu ul li: last-child a border-bottom: 1px solid # 33373d;
Het begint er nu echt goed uit te zien!
We voegen nu enkele hover en actieve stijlen toe, vooral wanneer de accordeon open is! We voegen ook een rand onderaan toe aan het actieve menu. Als u nu denkt: "Waarom hebben we geen actieve klasse toegevoegd?". Nou, mijn vriend, dat is wat de jQuery later gaat doen.
.menu> li> a: hover, .menu> li> a.active background-colour: # 35afe3; achtergrondafbeelding: -webkit-gradiënt (lineair, linksboven, linksonder, van (rgb (69, 199, 235)), naar (rgb (38, 152, 219))); achtergrondafbeelding: -webkit-lineaire gradiënt (boven, rgb (69, 199, 235), rgb (38, 152, 219)); achtergrondafbeelding: -moz-lineaire gradiënt (top, rgb (69, 199, 235), rgb (38, 152, 219)); achtergrondafbeelding: -o-lineaire gradiënt (top, rgb (69, 199, 235), rgb (38, 152, 219)); achtergrondafbeelding: -ms-lineaire gradiënt (top, rgb (69, 199, 235), rgb (38, 152, 219)); achtergrondafbeelding: lineaire gradiënt (boven, rgb (69, 199, 235), rgb (38, 152, 219)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# 45c7eb', EndColorStr = "# 2698db"); border-bottom: 1px solid # 103c56; -webkit-vak-schaduw: inzet 0px 1px 0px 0px # 6ad2ef; -moz-box-shadow: inzet 0px 1px 0px 0px # 6ad2ef; vakschaduw: inzet 0px 1px 0px 0px # 6ad2ef; .menu> li> a.active border-bottom: 1px solid # 1a638f;
We voegen de pictogrammen toe met behulp van de :voor pseudo. Eerst zullen we alle sub-ul ankertags targeten, we zullen de achtergrondsprite toepassen en deze op geen enkele herhaling instellen. We geven het een lettergrootte van 36px hoewel er geen tekst is; we zullen 36px gebruiken, dus we kunnen een breedte en hoogte van 1em gebruiken die nu gelijk is aan 36px. We zullen het element dan 50% naar beneden duwen en .5em van de marge verwijderen om het te centreren.
Met behulp van de klassen voor elk sub-ul-lijstitem, zullen we ze targeten en hen de juiste achtergrondpositie geven voor de sprite.
Notitie: Ik heb deze sprite gemaakt met de nieuwe app SpriteRight, als je wat met de sprite wilt doen, ik heb de afbeeldingen en projectbestanden in de bronbestanden opgenomen.
.menu> li> a: before content: "; background-image: url (... /images/sprite.png); background-repeat: no-repeat; font-size: 36px; height: 1em; width: 1em; position : absoluut; links: 0; boven: 50%; marge: -.5em 0 0 0; .item1> a: before background-position: 0 0; .item2> a: before background-position: -38px 0; .item3> a: before background-position: 0 -38px; .item4> a: before background-position: -38px -38px; .item5> a: before background-position: -76px 0 ;
Oké, weet je nog welke overblijfselen we hebben toegevoegd? Hiermee worden de nummers gemaakt!
Eerst voegen we een lettergrootte van 11px toe (die converteert naar ongeveer 0.857em). We plaatsen ze absoluut en duwen ze opnieuw van rechts door 1em, nogmaals, om dit vloeibaar te maken. We zullen het vanaf de bovenkant 50% naar beneden duwen en de marge verwijderen om het te centreren. Een achtergrond zal worden toegevoegd, samen met enkele doosschaduwen, een inzet en een begin.
Om het weer vloeibaar te maken, gebruiken we opvulling om de breedte en hoogte te maken. We hebben zelfs ems op de grensradius gebruikt; we hebben dit nodig omdat als de tekst groter wordt gemaakt ze onevenredig lijken. Ik heb ook een andere stijl toegevoegd voor wanneer zweven of een actieve klasse op de link wordt toegepast.
.menu> li> een bereik font-size: 0.857em; weergave: inline-block; positie: absoluut; rechts: 1em; top: 50%; achtergrond: # 48515c; regelhoogte: 1em; hoogte: 1em; opvulling: .4em .6em; marge: -8em 0 0 0; kleur: #fff; tekst-inspringing: 0; text-align: center; -webkit-border-radius: .769em; -moz-border-radius: .769em; grensradius: .769em; -webkit-vak-schaduw: inzet 0px 1px 3px 0px rgba (0, 0, 0, .26), 0px 1px 0px 0px rgba (255, 255, 255, .15); -moz-box-shadow: inzet 0px 1px 3px 0px rgba (0, 0, 0, .26), 0px 1px 0px 0px rgba (255, 255, 255, .15); vakschaduw: inzet 0px 1px 3px 0px rgba (0, 0, 0, .26), 0px 1px 0px 0px rgba (255, 255, 255, .15); text-shadow: 0px 1px 0px rgba (0,0,0, .5); font-gewicht: 500; .menu> li> a: hover span, .menu> li a.active span background: # 2173a1;
Dit proces zal vergelijkbaar zijn met de vorige stap, dus ik zal niet in detail treden. De belangrijkste verschillen hier zijn dat ik de achtergrondkleur heb verwijderd, de rand heb gewijzigd en de kleur van het lettertype heeft gewijzigd. We moeten ook die pijl toevoegen en zullen opnieuw leunen op de :voor psuedo. We definiëren een breedte en hoogte en voegen wat linkerpositie toe met behulp van ems om ervoor te zorgen dat het vloeibaar is.
Ten slotte, een zweefstand (dankzij degenen in de opmerkingen die wezen op de aanvankelijke afwezigheid). We passen eenvoudig een donkerdere kleur (# 32373D) toe op de ankertekst, de pseudo-pijl en het getal binnen de reeks.
.menu ul> li> een bereik font-size: 0.857em; weergave: inline-block; positie: absoluut; rechts: 1em; top: 50%; / achtergrond: #fff; rand: 1px vast # d0d0d3; regelhoogte: 1em; hoogte: 1em; opvulling: .4em .7em; marge: -9em 0 0 0; kleur: # 878d95; tekst-inspringing: 0; text-align: center; -webkit-border-radius: .769em; -moz-border-radius: 769em; grensradius: 769em; tekst-schaduw: 0px 0px 0px rgba (255,255,255, .01)); .menu> li> ul li a: before content: '▶'; lettertypegrootte: 8px; kleur: #bcbcbf; positie: absoluut; breedte: 1em; hoogte: 1em; boven: 0; links: -2.7em; .menu> li> ul li: zweven a, .menu> li> ul li: zweeft een span, .menu> li> ul li: zweeft a: before color: # 32373D;
Dus het ziet er nu best cool uit toch? Ik denk dat het tijd is om hier wat functionaliteit aan toe te voegen!
Wedden dat je hebt gewacht om hier te komen ?! Nou, we zijn eindelijk bij het jQuery-punt. We zullen eerst moeten linken naar de jQuery-bibliotheek, met behulp van een bibliotheek die wordt gehost door Google. De huidige nieuwste versie is 1.7.1. Voeg het volgende toe aan het kopgedeelte van uw HTML-pagina:
Voeg nu het volgende toe aan de onderkant van uw html-document, vóór het sluiten
Accentsconagua
var menu_ul = $ ('. menu> li> ul'), menu_a = $ ('. menu> li> a'); Eerst slaan we het submenu en de ankertags van het hoofdmenu op in twee verschillende variabelen, dit maakt het eenvoudig om er later naar te verwijzen.
menu_ul.hide ();
Hiermee worden alle submenu's verborgen wanneer de pagina wordt geladen
menu_a.click (functie (e)
Eerst zullen we het vertellen om iets te doen wanneer we op een van de ankertags van het hoofdmenu klikken.
e.preventDefault ();
Hier voorkomen we dat de ankertags links volgen of het adres in de adresbalk wijzigen. bijv. Als u ooit een ankertag maakt met een link van '#', wordt deze nu niet weergegeven in de adresbalk wanneer u erop klikt. De ankertags zijn in principe uitgeschakeld.
if (! $ (this) .hasClass ('active')) menu_a.removeClass ('active'); Nu zullen we het instrueren dat ALS de menu_a de klasse 'actief' heeft, deze verwijderen.
menu_ul.filter ( ': zichtbaar) slideUp ( 'normaal').
Hier gebruiken we '.filter' en ': visible'. Als een menu open is, schuift u het omhoog met een snelheid van normaal.
$ (This) .addClass ( 'actief') naast () te stoppen (true, true) .slideDown ( 'gewone')..;
Als het menu gesloten is, voeg de klasse 'actief' toe (zodat we toegang hebben tot de mooie CSS-stijl) en schuif hem naar beneden met een snelheid van normaal.
else $ (this) .removeClass ('active'); . $ (This) .next () te stoppen (true, true) .slideUp ( 'gewone'); Nu moeten we een ELSE gebruiken als onderdeel van onze voorwaardelijke verklaring. Dus ELKE verwijder de klasse actief en schuif het menu omhoog om het te verbergen. Dit is alleen maar om elk menu te kunnen coderen zonder de pagina opnieuw te hoeven laden.
Notitie: Als u de schuifsnelheid wilt wijzigen, wijzigt u normaal in, bijvoorbeeld, '500'. Dat schuift het op 500 milliseconden.
Als je geïnteresseerd bent in het helemaal opnieuw leren van jQuery, kun je het beste de gratis Learn jQuery in 30 dagen cursus van tutsplus.com bekijken..
Nou, we hebben het tot het einde gehaald! We hebben het prachtige verticale navigatiemenu van Orman gecodeerd met behulp van CSS3 en jQuery! Blijf kijken voor een korte tip over hoe je dit kunt maken met alleen CSS3 met de: target pseudo selector.
#wrapper width: 440px; lettergrootte: 1em Ik hoop dat je deze tutorial leuk vond, bedankt voor het lezen!
