orman clarks vertikal navigation menu: css3 version

orman clark er vertikal navigation menu: css3 version,,,, det næste i orman clark er kodet psd serie er hans fantastiske ser vertikal navigation menu.vi vil genskabe den med css3 og jquery, mens de anvender en minimal billeder.,,,, kun billeder, vi vil bruge til ikoner - vil jeg skabe en sprite ved hjælp af et nyt instrument, kaldet spriteright, men dette er frivilligt.desuden, jeg vil bruge gradientapp skabe min css3 stigninger, men dette er valgfrit,.,,, trin 1: grundlæggende html avance, lad os starte med at smide nogle grundlæggende avance, en tom html5 dokument:,, <!DOCTYPE html> <html lang="en"> \t<head> \t\t<meta charset="utf-8"> \t\t \t\t<title>Vertical Navigation Menu: CSS3 Coded</title> \t\t \t\t<link rel="stylesheet" href="css/styles.css"> \t\t \t</head> <body> </body> </html>, ,And now the markup for our menu; an unordered list within a containing wrapper., ,<div id="wrapper"> \t<ul class="menu"> \t\t<li class="item1"><a href="#">Friends 340</a></li> \t\t<li class="item2"><a href="#">Videos 147</a></li> \t\t<li class="item3"><a href="#">Galleries 340</a></li> \t\t<li class="item4"><a href="#">Podcasts 222</a></li> \t\t<li class="item5"><a href="#">Robots 16</a></li> \t</ul> </div>, ,Lastly, we create the submenus by placing an unordered list nested within each of our existing list items., ,<div id="wrapper"> \t<ul class="menu"> \t\t<li class="item1"><a href="#">Friends 340</a> \t\t\t<ul> \t\t\t\t<li class="subitem1"><a href="#">Cute Kittens 14</a></li> \t\t\t\t<li class="subitem2"><a href="#">Strange “Stuff” 6</a></li> \t\t\t\t<li class="subitem3"><a href="#">Automatic Fails 2</a></li> \t\t\t</ul> \t\t</li> \t\t<li class="item2"><a href="#">Videos 147</a> \t\t\t<ul> \t\t\t\t<li class="subitem1"><a href="#">Cute Kittens 14</a></li> \t\t\t\t<li class="subitem2"><a href="#">Strange “Stuff” 6</a></li> \t\t\t\t<li class="subitem3"><a href="#">Automatic Fails 2</a></li> \t\t\t</ul> \t\t</li> \t\t<li class="item3"><a href="#">Galleries 340</a> \t\t\t<ul> \t\t\t\t<li class="subitem1"><a href="#">Cute Kittens 14</a></li> \t\t\t\t<li class="subitem2"><a href="#">Strange “Stuff” 6</a></li> \t\t\t\t<li class="subitem3"><a href="#">Automatic Fails 2</a></li> \t\t\t</ul> \t\t</li> \t\t<li class="item4"><a href="#">Podcasts 222</a> \t\t\t<ul> \t\t\t\t<li class="subitem1"><a href="#">Cute Kittens 14</a></li> \t\t\t\t<li class="subitem2"><a href="#">Strange “Stuff” 6</a></li> \t\t\t\t<li class="subitem3"><a href="#">Automatic Fails 2</a></li> \t\t\t</ul> \t\t</li> \t\t<li class="item5"><a href="#">Robots 16</a> \t\t\t<ul> \t\t\t\t<li class="subitem1"><a href="#">Cute Kittens 14</a></li> \t\t\t\t<li class="subitem2"><a href="#">Strange “Stuff” 6</a></li> \t\t\t\t<li class="subitem3"><a href="#">Automatic Fails 2</a></li> \t\t\t</ul> \t\t</li> \t</ul> </div>, ,Okay, there may seem a lot there but don't let it confuse you. vi har skabt en unordered liste med fem liste, hver med et anker komme indenfor.så har vi tilføjet indlejrede unordered lister, hver med tre liste over poster.,, jeg har også tilføjet en klasse for hver liste post, så vil det gøre - lettere senere.endelig, for de tal, vi har skabt en spændvidde mærke inden for hver anker navneskilt.hvis du mener, at det i din browser skal det se sådan ud:,,,, trin 2: flydende skrifttyper, vil vi først sørge for, at vores menu viser korrekt.tilføje disse regler til css /styles. css, vil de sætte margen og polstring af alle vores, ul, s - 0, og fjerne den liste stil.,, ul, ul ul {margen: 0; polstring: 0; liste stil: ingen;}, før vi begynder vores menu - vi vil skabe et papir med en fast bredde og en skriftstørrelse på 13px (udtrykt i em enheder).for det første vil vi tilføje en artikel til kroppen, skriftstørrelse: 100%.dette vil sikre, at vores design er baseret på browser misligholdelse skriftstørrelse (normalt 16px).,, at forklare, hvordan papir skriftstørrelse fungerer.vi er nødt til at udtrykke det som en em,; i forhold til størrelsen af dets forældres skriftstørrelse.vi sigter efter 13px, så hvis de stiftende størrelse er 16px, vores resulterende dem, 13 /16 = 0.8125,.13px er 0.8125 * 16px.,, at måle vores skrifttyper (og andre elementer) i em enheder vil de væske.hvis vi ændrer indpakning skriftstørrelse (eller vores browser misligholdelse størrelse) hele menuen vil tilpasse sig i forhold til basen.prøv ikke at lade dette forvirrer dig, hvis du har brug for hjælp med at konvertere deres skrifttyper, foreslår jeg, at du besøger pxtoem. kom.,, organ (skriftstørrelse: 100%) a (tekst): ingen;} ul, ul ul {margen: 0; polstring: 0; liste stil: ingen;}&#indpakning (bredde: 220px; margen: 100px auto; skriftstørrelsen: 0.8125em;}, har vi givet papir fast bredde af 220px og koncentreret det med en margen på toppen ved at tilføje, margen: 100px auto,,.,,, trin 3: hovedmenu css,, bagefter skal vi tilføje nogle på vej til menu.vi vil gøre den bredde og højde af menuen ul, auto, og anvende en skygge til det hele.ved at tilføje den højde som auto, skyggen vil justere, når en åbner.,, så anker mærker; vi kan tilføje en bredde på 100%, hvilket betyder, at de vil strække sig til 220px bredde af papir.i en højde, bruger vi ems, så tænk tilbage til vores vigtigste skriftstørrelsen på 13px.vores. psd viser en højde af 36px, så er vores mål.vi tager 36 og dele det med 13, som kommer ud til ca. 2.75em (36 /13 = 2.76923077,).vi skal også bruge 2.75em for linjehøjde (center hele teksten vertikalt) anvendes en tekst led at trykke tekst i, at give plads til vores ikon senere. vil vi tilføje en css3 gradient i baggrunden, jeg tog ud og skabte dette med gradientapp.bagefter skal vi ændre font, vil vi anvende helvetica font og en hvid farve end sammen med en tekst, skygge.vi har ikke brug for en skriftstørrelse.That's because our base font is 13px for the wrapper which our anchors have inherited, so no need to add it in., ,body { \tfont-size: 100%; } a { \ttext-decoration: none; } ul, ul ul { \tmargin: 0; \tpadding: 0; \tlist-style: none; } #wrapper {\t \twidth: 220px; \tmargin: 100px auto; \tfont-size: 0.8125em; } .menu { \twidth: auto; \theight: auto; \t-webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13); \t-moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13); \tbox-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13); } .menu > li > a { \tbackground-color: #616975; \tbackground-image: -webkit-gradient(linear, left top, left bottom, from(rgb(114, 122, 134)),to(rgb(80, 88, 100))); \tbackground-image: -webkit-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100)); \tbackground-image: -moz-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100)); \tbackground-image: -o-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100)); \tbackground-image: -ms-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100)); \tbackground-image: linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100)); \tfilter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#727a86', EndColorStr='#505864'); \tborder-bottom: 1px solid #33373d; \t-webkit-box-shadow: inset 0px 1px 0px 0px #878e98; \t-moz-box-shadow: inset 0px 1px 0px 0px #878e98; \tbox-shadow: inset 0px 1px 0px 0px# 878e98; bredde: 100%, højde: 2.75em; linje højde: 2.75em; tekst led: 2.75em; display: block. position: relativ; skrifttype familie: helvetica neue "helvetica, ariel, uden serif; skrifttype vægt: 600; farve:&#fff; tekst skygge: 0px 1px 0px rgba (0,0,0,. 5);}, okay!nu er det begyndt at se bedre ud, og vi får en struktur for!men hvordan ved vi tilføje en baggrund farve så menuen står bedre... organ {baggrund:繵d;},,,, tip: huske ems, fra css ovenfor, kan man se, at det er let at glemme, hvad din em enheder rent faktisk betyder.det er en god idé at lade bemærkninger i deres oprindelige beregninger, så når du kommer tilbage til din kode i fremtiden kan du afkode, hvad der foregår.kan du huske den formel:, ønskede parlamentet /forældre px = resulterende dem og anvende den omtrentlige symbol (≈) hvis du er afrundes resultatet.,,&#papir (skriftstørrelse: 0.8125em; /* 13 /16 = 0.8125 * /} menu > li > en (højde: 2.75em; /* 36 /13 ≈ 2,75 * /linje højde: 2.75em; /* 36 /13 ≈ 2,75 * /tekst led: 2.75em; /* 36 /13 ≈ 2,75 * /}, trin 4: sub - menu css, tid til at tilføje nogle css for hvide sub - menuer.vi bliver nødt til at tilføje en hvid baggrund med en grå grænser.meddelelse om den sidste, den har ikke en nederste grænse, så vi starter med: sidste barn, pseudo - komitéen til at fjerne det.det har en blå grænse, så vi kan fjerne den grå, tilføje en blå en.,, vil det næste skridt være magen til den foregående, og vi vil tilføje højde og bredde igen, skal vi ændre baggrunden for hvide.denne gang er vi nødt til at ændre den skriftstørrelse.vi sigter efter 12px så med vores beregning af ønskede px /forældre px = resulterende dem, får vi 0.923em, lad os også ændre teksten farve til en grå.vi brugte, display: block.hvis vi havde brugt, flyde: venstre, menuer ikke glat levende, så vi bruge display blok, hjælpe dem med at gå fint og glat.kan du se, vi har tilføjet et ekstra stil; vi anvender det til det sidste barn af ubåden, ul.vi er nødt til at gøre dette, så vi er i stand til at ændre grænsen farve.,,. menu - ul - {baggrund:&#fff; grænseoverskridende nederst: 1px fast&#efeff0; bredde: 100%, højde: 2.75em; linje højde: 2.75em; tekst led: 2.75em; display: block. position: relativ; font familie: helvetica neue "helvetica, ariel, uden serif; skriftstørrelsen: 0.923em; skrifttype vægt: 400; farve:ͮd95;} menu ul li: sidste barn en {grænse nederst: 1px fast艝d;}, begynder det at se godt ud, nu!,,,,,,, løntrin 5: den og aktive modetendenser, vil vi tilføje nogle svæver og aktive styles, specielt når den harmonika er åben!vi vil også gerne tilføje en grænse bund til aktive menu.nu, hvis du tænker: "hvorfor ikke har vi tilføjet en aktiv klasse?". Well my friend, that's what the jQuery will be doing later on., ,.menu > li > a:hover, .menu > li > a.active { \tbackground-color: #35afe3; \tbackground-image: -webkit-gradient(linear, left top, left bottom, from(rgb(69, 199, 235)),to(rgb(38, 152, 219))); \tbackground-image: -webkit-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219)); \tbackground-image: -moz-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219)); \tbackground-image: -o-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219)); \tbackground-image: -ms-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219)); \tbackground-image: linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219)); \tfilter: progid:DXImageTransform.Microsoft.gradient(Gradienttype = 0, startcolorstr =-c7eb, endcolorstr =ઊdb); grænseoverskridende nederst: 1px fastgc56; - webkit rubrik skygge: indpresningsdybde 0px 1px 0px 0pxad2ef; - moz rubrik skygge: indpresningsdybde 0px 1px 0px 0pxad2ef; rubrik skygge: indpresningsdybde 0px 1px 0px 0pxad2ef;} menu > li > a.active {grænse nederst: 1px fasta638f;}, trin 6: vigtigste menu ikoner, vil vi tilføje ikoner med, før pseudo.vi starter med alle de ul anker hundetegn, vi vil anvende den baggrund sprite og sæt den til, ikke gentager sig.vi giver det en skriftstørrelse på 36px, selv om der er ingen tekst. vi vil bruge 36px, så vi kan bruge en bredde og højde af 1em som nu lige 36px.vi vil så skubbe element nede på 50% og fjerne. 5em af den margen, top til center., ved hjælp af klasserne for hver sub - ul - liste punkt på dagsordenen, vil vi ramme dem og give dem alle relevante baggrund holdning for sprite.,,, note:, jeg skabte denne sprite ved hjælp af nye app anmodede spriteright,, hvis du ønsker at rode rundt med den sprite, jeg har medtaget de billeder og projekt filer i kilden filer.,,. menu > li > a: før (indhold: "; baggrund billede: url (.. /images /sprite. men heller ikke dér er menneskene sikre; baggrund gentager: ingen gentagelse; skriftstørrelsen: 36px. højde: 1em; bredde: 1em. position: absolut; tilbage: 0; top: 50% margen: -. 5em 0 0 0}. item1 > a: før {baggrund holdning: 0 0}. item2 > a: før {baggrund, pos.ning: - 38px 0}. item3 > a: før {baggrund holdning: 0 - 38px;}. punkt 4 > a: før {baggrund holdning: - 38px - 38px.}. item5 > a: før {baggrund holdning: - 76px 0},,,, skridt 7: vigtigste menu nummer, okay, kan du huske dem, får vi tilføjede?disse vil skabe de tal!,, først skal tilføje en skriftstørrelse på 11px (der er ca. 0.857em).vi vil placere dem helt, og skub dem fra højre, som 1em, endnu en gang - dem for at gøre denne væske.vi skubber det ned med 50% fra toppen og fjerne den margen, top til centrum.baggrund lægges sammen med nogle rubrik skygger, en indpresningsdybde og lige fra starten,.,, endnu en gang gøre det flydende, vil vi bruge vores skabe bredde og højde.vi har selv brugt ems ved grænsen radius. vi får brug for det, for hvis teksten er blevet større, de vil være urimelig.I've also added another style for when hovering or an active class is applied to the link., ,.menu > li > a span { \tfont-size: 0.857em; \tdisplay: inline-block; \tposition: absolute; \tright: 1em; \ttop: 50%; \tbackground: #48515c; \tline-height: 1em; \theight: 1em; \tpadding: .4em .6em; \tmargin: -.8em 0 0 0; \tcolor: #fff; \ttext-indent: 0; \ttext-align: center; \t-webkit-border-radius: .769em; \t-moz-border-radius: .769em; \tborder-radius: .769em; \t-webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15); \t-moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15); \tbox-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba (255 255 255. 15); tekst skygge: 0px 1px 0px rgba (0,0,0,. 5); skrifttype vægt: 500;} menu > li > a: den levetid,. menu > li a.active levetid (baggrund:ࡽa1;},,, trin 8: sub - menu nummer og pil, og denne proces, vil svare til de tidligere skridt, så jeg vil ikke gå i detaljer.de vigtigste forskelle er, at jeg har fjernet den baggrund farve, ændret den grænse og ændret skriftstørrelsen farve.vi er også nødt til at tilføje, at pil og endnu en gang vil lægge pres på de: før, psuedo.vi definerer en bredde og højde og tilføje nogle venstre placering ved hjælp af ems' en for at sikre, at det er væske, endelig en svæver stat (takket være disse i de bemærkninger, som påpegede i sin oprindelige mangel).We simply apply a darker color (#32373D) to the anchor text, the pseudo arrow and the number within the span., ,.menu ul > li > a span { \tfont-size: 0.857em; \tdisplay: inline-block; \tposition: absolute; \tright: 1em; \ttop: 50%; / \tbackground: #fff; \tborder: 1px solid #d0d0d3; \tline-height: 1em; \theight: 1em; \tpadding: .4em .7em; \tmargin: -.9em 0 0 0; \tcolor: #878d95; \ttext-indent: 0; \ttext-align: center; \t-webkit-border-radius: .769em; \t-moz-border-radius: 769em; \tborder-radius: 769em; \ttext-shadow: 0px 0px 0px rgba(255,255,255,.01)); } .menu > li > ul li a:before { \tcontent: '▶'; \tfont-size: 8px; \tcolor: #bcbcbf; \tposition: absolute; \twidth: 1em; \theight: 1em; \ttop: 0; \tleft: -2.7em; } .menu> li > ul li: svæv et,. menu > li > ul li: svæv et spænd,. menu > li > ul li: svæv et: før (farve:繵d;}, så det ser ret sej nu?jeg tror, det er på tide, at vi tilføjede visse funktioner til dette!,,,, trin 9: jquery tid, du har ventet på at komme her?! vi er endelig ved jquery.vi er nødt til først at link til jquery bibliotek, ved hjælp af en vært for google.den nuværende seneste version er 1.7.1.der tilføjes følgende til hoved afsnit af deres html side:,, < manuskript src = "http: //ajax. googleapis. kom /ajax /libs /jquery /1.7.1 /jquery. min.js" > < /manuskript >, nu tilføje følgende til bunds. din html dokument, før de lukker, < /organ >, tag.må ikke bekymre dig, hvis det er for forvirrende, jeg forklarer det i et minut.,, < manuskript type = "tekst /javascript" > $(function() {var menu_ul = $(. menu > li > ul '), menu_a = $(. menu > li > a) menu_ul. hide(); menu_a. klik (funktion (e) (f. preventdefault(); hvis (!$(this).hasClass('active')) { menu_a.removeClass('active'); menu_ul.filter(':visible').slideUp('normal'); $(this).addClass('active').next().stop(true,true).slideDown('normal'); } else { $(this).removeClass('active'); $(this).next().stop(true,true).slideUp('normal'); } }); }); </script>, , var menu_ul = $('.menu > li > ul'), menu_a = $('.menu > li > a');, ,First we're storing the sub-menu and the main menu anchor tags in two different variables, this just makes it easy to refer to them later on., ,\t menu_ul.hide();, ,This will hide all the sub-menus when the page loads, ,\t menu_a.click(function(e){, først vil vi fortælle det til at gøre noget, når vi på en af de vigtigste menu er anker hundetegn.,, f. preventdefault();, her skal vi forhindre anker mærker fra følgende forbindelser eller ændring af adressen på den adresse, bar.f.eks. hvis du nogensinde skaber et anker tagfat med et link til&#", når du klikker på det, vil det ikke dukker op i den adresse, bar nu.anker, grundlæggende er handicappede, hvis (!$(det). hasclass ('active ')) (menu_a. removeclass ('active), nu skal vi give det, at hvis menu_a har klasse "aktive", fjern det.,, menu_ul. filter ("synlig"). slideup ('normal), og her bruger vi "filter" og ": synlige.hvis en menu er åben, skub den op med en hastighed af normale. $(dette). addclass ('active '). next(). stop (sandt). slidedown ('normal), hvis den menu er lukket, tilføjer klasse "aktive" (, så vi kan få adgang til nice - css stil) og den glide ned med en hastighed af normale.,, andet ($(det). removeclass ('active) $(det). next(). stop (sandt). slideup ('normal), nu, så skal vi bruge en anden som en del af vores betinget angivelse.så, ellers fjerne klassen aktive, og stik menuen op for at skjule det.det er bare så vi kan kode en menu, uden at lade den side.,,, note:,, hvis du ønsker at ændre hastighed af objektglas, ændre den normale, f.eks. "500".det vil skubbe det til 500 millisekunder.,, hvis du er interesseret i at lære jquery fra bunden, du ville gøre klogt i at undersøge den frie lære jquery i 30 dage fra tutsplus. kom.,,, konklusion, vi gjorde det til ende.vi har kodet op orman er smuk vertikal navigation menu med css3 og jquery!bliv hængende for en hurtig tip om, hvordan man skaber det kun ved hjælp af css3 med: mål pseudo - vælgeren.,,,,,&#papir (bredde: 440px; skriftstørrelsen: 1em}, håber jeg, at du nød det pædagogiske, tak for det!,

Basic markup
Step 2
Step 3
Step 5
Step 6
Step 7
Final
Final large

Previous:indkodning af simpleadmin tema: indlogningsside

Next Page:hurtig tip: fremme responderende form elementer være søde