skabe en hurtig, klistrede menu,,,, i denne lynkursus, vi skal gennemføre en klæbrig menu med css, toggling dens synlighed med jquery.det er den perfekte måde at give de besøgende sociale forbindelser, andre steder inden for et netværk af lokaliteter, eller endog personliggøre indstillinger.,,,, trin 1: oprettelse af den side, så lad os begynde med en grundlæggende html side.vi lader css i, < head >,, så jquery (på bunden af dokumentet) for greb animation. <!doctype html > < html > < head > < afsnit > klistret på < /afsnit > < forbindelse rel = "stylesheet" type = "tekst /css" href = "styles /main. css" > < /head > < krop > <!--js--> \t<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> </body> </html>, , Step 2: Filling up the Page,Now let's create some structural elements., <div class="toolbar-wrapp"> \t<div class="sticky-toolbar"> \t\t<ul> \t\t\t<li class="glyph" id="support"> \t\t\t\t<a href="#" data-icon="📣"></a> \t\t\t</li> \t\t\t<li class="glyph" id="help"> \t\t\t\t<a href="#" data-icon=""></a> \t\t\t</li> \t\t\t<li class="glyph" id="settings"> \t\t\t\t<a href="#" data-icon="⚙"></a> \t\t\t</li> \t\t</ul> \t</div><!- /klistret toolbar - > < div klasse = "pop - up -" > < div klasse = "arrow" > < /div > < ul > < li > < en href = "> liste over punkt 1 < /a > < /li > < li > < en href =" > liste 2 < /a > < /li > < li > < en href = "> liste 3 < /a > < /li > < /ul > < /div > <!- /pop - up - - > < /div > <!- /toolbar wrapp - > vi vil bruge data ikoner, tilskriver at præcisere vores skrifttype ikoner.font ikoner vil blive anvendt til at effektivt dekorere vores vigtigste menu poster.font hieroglyffer kan skaleres og farvede uden tab af beslutning, under henvisning til bitmap billeder giver mindre fleksibilitet.vi vil tale om det som vi fremskridt.,, trin 3: forøgelse af fyldstof - indhold, at fremhæve, hvad der foregår, så lad os tilføje nogle dumme tekst og et logo.sikre, at der er nok indhold for dig at rulle, hvis du ønsker at se det endelige resultat i sin fulde pragt. < div klasse = "wrapp" > < img src = "img /logo. jpg" klasse = "logo" > < p > lorem ipsum dolor sidde amet, consectetur adipisicing elit sed gøre eiusmod midlertidigt incididunt ut labore et dolore magna aliqua.ut med en minimums - veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ae commodo consequat.af prøveløsladelsen aute irure dolor i reprehenderit i voluptate velit ese cillum dolore eu fugiat nulla pariatur.excepteur sint occaecat cupidatat ikke - proident, skal i culpa qui officielle deserunt mollit overførsel id - laborum. < /p > < p > sed ut perspiciatis under omnis minister natus fejl sidde voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et kvasi - architecto beatae vitae dikta sunt explicabo. < /p > < p > nemo enim ipsam voluptatem quia voluptas sidde 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 sidde amet, consectetur, adipisci velit sed quia ikke - numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. < /p > < /div > <!- /wrapp - >,, trin 4: almindelige styles, først skal vi læsse eric meyer er nulstillet css, lægger det på toppen af vores css fil over andre politiske: organ {skrifttype familie: "helveticaneue lys", "helvetica neue lys", "helvetica neue" helvetica, ariel. "lucida grande", uden serif; skrifttype vægt: 500; skriftstørrelsen: 1.1em; farve:蚿e; baggrund farve:&#ecf0f1;} div.wrapp (bredde: 70% margen: 0 auto;} p {margen nederst: 4em;} logo (max bredde: 100%}, - kan se, har jeg gjort, div.wrapp, 70% lang, og jeg har anført, at billeder bør højst være 100% op.det er en god begyndelse, når man bygger et flydende layout.,,,,,,, løntrin 5: - den toolbar, næste gang, vil vi tilføje nogle toolbar styles - først ved fastsættelse af papir til side, effektivt at fjerne det fra dokumentet flow., div.toolbar-wrapp {holdning: faste, display: blok; top: 30%;} div.sticky-toolbar {holdning: relativ; top: 30%; polstring. 1em; baggrund farve:c3e50; flyde: venstre - webkit grænse radius: 0. 2em. 2em 0; - moz grænse radius: 0. 2em. 2em 0; grænseoverskridende radius: 0. 2em. 2em 0;), note: det er meget vigtigt at erklære holdning: relativ, for div.sticky-toolbar, da den vil gøre det muligt for os at holdning andre elementer ordentligt imod.,,,, trin 6:, @ skrifttype ansigt, belastning, som nævnt, earl?større, vil vi ikke være med bitmap billeder til vores ikoner.vi vil i stedet bruge @ skrifttype ansigt til at trække i font filer til brug i browseren.,, @ skrifttype ansigt er en regel, der giver dig mulighed for at downloade css særlig font fra din tjener til at gøre et websted, hvis brugeren har ikke den skrifttype installeret.det betyder, at webdesignere vil ikke længere behøver at overholde en bestemt række "web sikker" skrifttyper, at brugeren har en installeret på deres computer. - font ansigt. kom, vi skal bruge entypo; en åben kilde bundt af frie ikoner for erhvervsmæssig og privat brug.det er en psd, eps, pdf, opentype, truetype og forskellige andre filer, så lad os hente dem til brug i vores projekt. her er vores @ skrifttype ansigt, erklæringer, som vi pasta i vores css fil.Make sure that the paths correctly point to the font files within the project, otherwise they won't show up., \t\t@font-face { \t font-family: 'Entypo'; \t src: url('../font/entypo.eot'); \t src: local('☺'), \t url('../font/entypo.woff') format('woff'), \t url('../font/entypo.ttf') format('truetype'), \t url('../font/entypo.svg#webfontIyfZbseF') format('svg'); \t},We now select all elements within our markup with the ,data-icons, attribute, tacking a ,:before, pseudo element onto each one and filling that pseudo element with whatever characters are held within the ,data-icons, value., \t[data-icon]:before { \t\tfont-family: 'Entypo'; \t\tcontent: attr(data-icon); \t},For example, this is our first anchor:, <a href="#"data ikon =" &📣 "> < /a >, og vores css vil benytte den værdi, &📣 for at udfylde den, før element.,, trin 7: - den toolbar elementer, så lad os tilføje noget sejt virkninger på vores ikoner... div.sticky-toolbar ul - (display: blok; bredde:. 8em; margen: 0.2em; linjehøjde: 80%; skriftstørrelsen: 2.2em; tekst tilpasse: center; farve:&#fff; baggrund farve:a085; - webkit grænse radius:. 1em; - moz grænse radius:. 1em; grænseoverskridende radius:. 1em; - webkit overgang: alle 0.1s let i ud, - - 0.1s lette overgangen: alle i; overgangen: alle 0.1s let i. - webkit skrifttype udjævning: antialiased;}, note:, at maksimere sprøde og klart webfont ikoner (i det mindste i webkit browsere) omfatte en, - webkit skrifttype -udjævning: antialiased; til dette afsnit.du kunne også anvende denne til alt, ved hjælp af den globale vælgeren: * {- webkit skrifttype udjævning: antialiased;}, nu tilføje nogle svæv virkninger, og du er færdig. div.sticky-toolbar ul -: den {baggrund farve:abc9c;},,,, trin 8: pop - op - menu, det er behandlet vores menu bar, lad os nu tilføje nogle på vej til pop - op - menu:, div.popup (display: ingen; flyde: ret. position: relativ; venstre: 5%; baggrund farve:c3e50; - webkit grænse radius:. 2em; - moz grænse radius: 2em; grænse. radius:. 2em;}, note: i sin standard, vi har at skjule dette afsnit med skærm: ingen.,.senere vil vi greb den synlighed, med jquery.du kan forlade display værdi tom nu, indtil du er færdig med den stil, men glem ikke at bringe det tilbage senere.,,,, trin 9: - pop - op - menuen elementer, fremad!lad os tilføje nogle på vej til menuen elementer:, div.popup ul - {holdning: relativ; display: i overensstemmelse med blok; skriftstørrelsen:. 85em; farve:&#fff; polstring: 0 2em 0 2em; margen:. 4em; tekst tilpasse: center; tekst): ingen; overgangen: alle 0.1s let i ud. - webkit grænse radius:. 2em; - moz grænse radius:. 2em; grænseoverskridende radius:. 2em;), og en enkelt: svæv, virkning:, div.popup ul -: den {baggrund farve:abc9c;},,,, trin 10: skabe en pil med css i stedet for at skabe et gennemsigtigt. men heller ikke dér er menneskene sikre pil image, bruger vi et godt trick at skabe den samme effekt, men helt skalerbare) css grænser.det er muligt at anvende pseudo - elementer, også i det, hvis du ikke vil sløre din fortjeneste med supplerende elementer:,. pil (holdning: absolutte, top: 10% tilbage: -. 4em; bredde: 0. højde: 0; grænseoverskridende top:. 5em fast, gennemsigtig, grænse - ret:. 5em fastc3e50; grænseoverskridende bund. 5em fast, gennemsigtig og}, for flere oplysninger om, hvordan dette kan opnås, tjek lige dette css trekanter hurtigt spids af joren van - hee.,, trin 11: at skabe en toggle - funktion,,,, det sidste skridt, vil vi anvende en jquery snippet, der giver os mulighed for at aktivere vores pop - op - menuen.tilføje følgende, < manuskript > sektion til bunds i vores dokument under opfordringen til at jquery selv. inden for $(dokument). klar funktion (for at sikre, at alle vores side indhold er lastet og klar til at gå, vi anvender jquery er fadetoggle() metode til. pop - up -, om,&#støtte, klik begivenhed:, < manuskript type = "tekst /javascript" > $(dokument). klar (function() {$("# støtte"). klik (funktion () ($("pop - up -"). fadetoggle (150). tilbage til falske})}). < /manuskript >,, note:, vær sikker på du har medtaget de returnere falske erklæringer, som vil forhindre, at du vender tilbage til toppen af side, hver gang du klikker på ikonet.,, indgåelse, en nem og hurtig tilgang til skabe noget c- ool - og funktionelle i din næste projekt.du kan ændre det på nogen måde du kan lide, jeg ser frem til at høre, hvordan du bruger det i bemærkningerne.,
