Ren CSS / HTML-rullegardinmeny
- Ren CSS / HTML-rullegardinmeny I denne opplæringen vil vi lage en klassisk horisontal meny på rent...
- Vi animerer den horisontale menyen mens du peker.
- Beskriv CSS / HTML-rullegardinmenyen
Ren CSS / HTML-rullegardinmeny
I denne opplæringen vil vi lage en klassisk horisontal meny på rent CSS. Den har ikoner i lister. Når du peker på et element, endrer det smidig på fargen på knappen og teksten, en skygge legges til. Nedlastingslister kan gjøres på flere nivåer, og det viktigste er alt ganske enkelt implementert på ren CSS3.
Fortsettelsen av denne leksjonen her - del 2 MOBIL VERSION horisontal meny ".
Se pennen POyzbW av denis @Dwstroy ) på CodePen .
I leksjonen bruk:
- skjerm: flex;
- bruk overgang;
- plasser elementene med posisjon.
HTML horisontal menystruktur
Først skriver du merket under den horisontale menyen. Vi åpner vårt utviklingsmiljø i mitt tilfelle, dette er PhpStorm, opprett en index.html-fil, foreskrive rammen html: 5, erstatt lang med ru.
Alle meta blir slettet bortsett fra kodingen, vil jeg registrere min tittel " Tom-meny ".
Mellom kroppen skriver vi header-taggen, og i den er det en blokk med klassen .dws-menyen som inneholder vår meny. Neste, strukturen vil være som følger, vi vil lage lister i mengden av fem stykker. I hver liste vil det være en lenke med attributten href = "#". Da skal jeg gå til ikonet med klassen .fa .fa-
<header> <nav class = "dws-menu"> ul> li * 5> a [href = "#"]> i.fa.fa- </ nav> </ header>
Vi trykker på for å søke.
La oss skrive ned navnet på menyelementene ( Hjem, Produkter, Tjenester, Nyheter, Kontakter ).
Velg deretter og koble til ikonene. Gå til nettstedet, vil vi velge ikonene for disse menypunktene:
<i class = "fa fa- home "> </ i> <i class = "fa fa- shopping- cart "> </ i> <i class = "fa facogs"> </ i> <i klassen = "fa fa-list "> </ i> <i class = "fa konvolutt-åpen "> </ i>
Last ned arkivet fra siden med ikoner, pakk innholdet til datamaskinen din, kopier fontsmappen og css-mappen til utviklingsmiljøet ditt.
Fonts-mappen inneholder ikonfonter, og css-mappen inneholder stilene deres. Komprimerte stiler kan fjernes font-awesome.min, vi kobler ukomprimert font-awesome.css.
I index.html kobler vi til ikoner, og vi registrerer hvert element med egen ikonstil ( hjemme , handlekurv , tannhjul , t-liste , konvolutt-åpen ).
Vi har laget hovedrammen, opprett en undermeny etter beskrivelsen av hovedstilen, og nå skal vi lage en fil der vi skal beskrive hovedformatene i den horisontale menyen style.css og koble den til index.html. For å kontrollere at stilene er koblet til, opprett en img-mappe, i det vil jeg plassere et vilkårlig bilde i bakgrunnen. La oss skrive bildeforbindelsen ved hjelp av bakgrunnen.
kropp {bakgrunnsbilde: url ("../ img / ep_naturalwhite.png"); }
Som vi ser, har alt blitt vist og så fortsetter vi til beskrivelsen av stiler.
Først og fremst, la oss tilbakestille alle innrykk, hvilke forskjellige nettlesere kan angi som standard:
.dws-menyen * {margin: 0; polstring: 0; }
Sett toppteksten til 200 topper. og tilordne som du kan laste ned og separat koble til deg selv på nettstedet, bare i tilfelle skrive flere skrifter.
overskrift {margin: 200px; font-familie: Cuprum, Arial, Helvetica, sans-serif; }
Skjul markørene i lister:
.dws-menyen ul, .dws-menyen ol {listestil: none; }
Lister vil bli vist horisontalt med display: lin, og vi vil gjøre det i midten:
.ws-meny> ul {display: flex; begrunn-innhold: center; }
I overskriften vil vi bare sette inn toppen, vi vil skrive en margin-topp.
header { margin-top: 200px; font-familie: Cuprum, Arial, Helvetica, sans-serif; }
La oss lage vår meny, sette fargene på knappene, skriften, etc.
Velg lenker nav> ul li, og lag dem blokkelementer. Angi menybakgrunnen, skriv innrykk, spesifiser størrelsen, fargen, fjern understrekningen, og skriv overskriftene i store bokstaver.
.ws-meny> ul li a {display: block; bakgrunn: #ececed; polstring: 15px 30px 15px 40px; fontstørrelse: 14px; farge: # 454547; tekst-dekorasjon: ingen; tekst-transformer: store bokstaver; }
Deretter plasserer du ikonene, tilordner lister til posisjon: relativ; for videre justering av ikoner:
.dws-meny> ul li {posisjon: relative; }
Deretter velger vi ikoner, plasserer dem absolutt, gjør innrykk fra oven ved 15 topper, fra venstre 12 topper, øk størrelsen til 18 topper.
.dws-meny> ul li> a i.fa {posisjon: absolutt; topp: 15px; igjen: 12px; skriftstørrelse: 18px; }
Tilordne separatoren i form av en grense til lister, velg det første LI-elementet, sett grensen. Vi velger det siste elementet LI og tilordner det en lignende ramme.
.dws-meny> ul li: første barn {grense-venstre: 1px solid # b2b3b5; } .dws-menu> ul li: siste barn {grense-høyre: 1px solid #babbbd; }
Gjør avgrensere for LI-lister:
.dws-meny> ul li {posisjon: relative; grense-høyre: 1px solid # c7c8ca; }
Menyen har oppnådd utseendet, så du kan gå videre til beskrivelsen av stiler under svinger.
Vi animerer den horisontale menyen mens du peker.
Velg lenker og tilordne en farge til blokken, og tilordne fargen på selve lenken med ikonet til hvitt. La oss legge til en annen mørk skygge. Ved hjelp av overgang på 0,3 sekunder vil vi få et jevnt utseende:
.dws-menu li a: svever {bakgrunn: # 454547; farge: #ffffff; boks-skygge: 1px 5px 10px -5px svart; overgang: alle 0.3s enkelt; }
Og for å få denne effekten til å forsvinne jevnt, legg denne stilen til lenken enkelt:
.ws-meny> ul li a {display: block; bakgrunn: #ececed; polstring: 15px 30px 15px 40px; fontstørrelse: 14px; farge: # 454547; tekst-dekorasjon: ingen; tekst-transformer: store bokstaver; overgang: alle 0.3s enkelt; }
Hovedmenyen er ferdig, og du kan gå videre til beskrivelsen av undermenyen og undermenyene som er innebygd i dem.
Beskriv CSS / HTML-rullegardinmenyen
Om vi åpner index.html og legger til, for eksempel, en ekstra meny til produktene. Sett inn UL mellom LI-lister og plasser fem lister i den, som vil inneholde koblinger med attributten herf = "#".
ul> li * 5> a [href = "#"]
Vi trykker på for å søke, skriv navnet på elementene ( Klær, Elektronikk, Mat, Verktøy, Liv. Kjemi ).
<ul> <li> <a href="#"> Klær </a> </ li> <li> <a href="#"> Elektronikk </a> </ li> <li> <a href = "#"> Mat </a> </ li> <li> <a href="#"> Verktøy </a> </ li> <li> <a href="#"> Liv. kjemi </a> </ li> </ ul>
Åpne deretter style.css og beskriv undermeny stilene.
Vi velger den andre listen og tilordner den posisjonen: absolutt; , la oss sette minimumbredden til 150 topper.
/ * undermeny * / .dws-meny li ul {posisjon: absolutt; min bredde: 150px; }
La oss skrive til grenselistene på en topp.
.dws-menu li> ul li {border: 1px solid # c7c8ca; }
For koblingene i undermenyen vil vi sette innordninger på 10 topper., Fjern tekstomformingen og lag bakgrunnen et par toner mørkere bakgrunn: # e4e4e5; .
.dws-menu li> ul li a {padding: 10px; tekst-transformasjon: ingen; bakgrunn: # e4e4e5; }
Deretter oppretter du en annen undermeny. Gå til oppføringsfilen og for eksempel i "Elektronikk" -skjemaet i analogi-menyen som vi gjorde før. Vi beskriver overskriftene til elementene ( kameraer, datamaskiner, telefoner ) og lagre.
<li> <a href="#"> Elektronikk </a> <ul> <li> <a href="#"> Kameraer </a> </ li> <li> <a href="#"> Datamaskiner </a> </ li> <li> <a href="#"> Telefoner </a> </ li> </ ul> </ li>
De ble brakt ut, men skjult under hovedmenyen, nå posisjon: absolutt; nestet UL og flytte den til 150-toppen. til siden:
.dws-menu li> ul li ul {posisjon: absolutt; høyre: -150px; topp: 0; }
Deretter vil vi gjøre undermenyen vises når du målretter mot hovedelementene i toppmenyen, for dette legger vi til skjerm: ingen; og derved gjemme alle interne punkter.
/ * undermeny * / .dws-meny li ul {posisjon: absolutt; min bredde: 150px; skjerm: ingen; }
Og for deres utseende, vil vi velge lister på hover og vise dem ved hjelp av skjerm: blokk; .
.dws-menu li: svever> ul {display: block; }
Nå kan du legge til flere nivåer menyer bare ved å kopiere UL-blokken, endre elementene.
<ul> <li> <a href="#"> <i class = "fa fa-home"> </ i> Hjem </a> </ li> <li> <a href="#"> < </ i> Produkter </a> <ul> <li> <a href="#"> Klær </a> <ul> <li> <a href = "#"> Sko </a> </ li> <li> <a href="#"> Jakker </a> </ li> <li> <a href="#"> Bukser </a> < / li> </ ul> </ li> <li> <a href="#"> Elektronikk </a> <ul> <li> <a href="#"> Kameraer </a> </ li> <li> <a href="#"> Datamaskiner </a> </ li> <li> <a href="#"> Telefoner </a> <ul> <li> <a href="#"> Samsung </a> </ li> <li> <a href="#"> Flf </a> </ li> <li> <a href="#"> Apple </a> </ li> < / ul> </ li> </ ul> </ li> <li> <a href="#"> Mat </a> </ li> <li> <a href="#"> Verktøy </ h a> </ li> <li> <a href="#"> Gen. kjemi </a> </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa-cogs"> </ i> Tjenester </a> <ul > <li> <a href="#"> Service 1 </a> </ li> <li> <a href="#"> Service 2 </a> </ li> <li> <a href = "#"> Tjeneste 3 </a> </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa-listen"> </ i> Nyheter </a> </ li> <li> <a href="#"> <i class = "fa fa-konvolutt-åpen"> </ i> Kontakter </a> </ li> </ ul>
La oss da fullføre knappene med knappene. Jeg bruker, jeg har opprettet flere forhåndsinnstillinger, du kan lage din egen, i mitt tilfelle kopierer jeg bare denne koden og plasserer den på bakgrunnsstedet som jeg skrev før.
.ws-meny> ul li a {display: block; / * Permalink - denne gradienten: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98.757577+100;Custom+3 * / background: # c9c9c9 ; / * Gamle nettlesere * / bakgrunn: -moz-lineær gradient (topp, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * FF3.6-15 * / bakgrunn: -webkit-lineær gradient (topp, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * Chrome10-25, Safari5.1-6 * / bakgrunn: lineær gradient (til bunn, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * W3C, IE10 +, FF16 +, Chrome26 +, Opera12 +, Safari7 + * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# c9c9c9', endColorstr = '# 757577', GradientType = 0); / * IE6-9 * / polstring: 15px 30px 15px 40px; fontstørrelse: 14px; farge: # 454547; tekst-dekorasjon: ingen; tekst-transformer: store bokstaver; overgang: alle 0.3s enkelt; } .dws-menu li a: hover {/ * Permalink - denne gradienten: http://colorzilla.com/gradient-editor/#e0e1e5+0.454547+2.454547+98,e0e1e5+100 * / bakgrunn: # e0e1e5; / * Gamle nettlesere * / bakgrunn: -moz-lineær gradient (topp, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * FF3.6-15 * / bakgrunn: -webkit-lineær gradient (topp, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * Chrome10-25, Safari5.1-6 * / bakgrunn: lineær gradient (til bunn, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * W3C, IE10 +, FF16 +, Chrome26 +, Opera12 +, Safari7 + * / filter: progid: DXImageTransform. Microsoft.gradient (startColorstr = '# e0e1e5', endColorstr = '# e0e1e5', GradientType = 0); / * IE6-9 * / farge: #ffffff; boks-skygge: 1px 5px 10px -5px svart; overgang: alle 0.3s enkelt; }
Hvis du ønsker, kan denne menyen utformes for den stilen vi passer for deg på nettstedet, det er nok bare å generere en farge og erstatte den i koden. Det viste seg en enkel og samtidig fin horisontal meny, laget i ren CSS.