- Pure CSS / HTML rippmenüü Selles juhendis teeme klassikalise horisontaalse menüü puhtal CSS-il. ...
- Me animeerime horisontaalset menüüd osutamise ajal.
- Kirjeldage rippmenüüd CSS / HTML
Pure CSS / HTML rippmenüü
Selles juhendis teeme klassikalise horisontaalse menüü puhtal CSS-il. See sisaldab nimekirjas ikoone. Objektile suunates muudab see nupu ja teksti värvi sujuvalt, lisatakse vari. Rippmenüüsid saab muuta mitmetasandiliseks ja peamine asi on lihtsalt üsna lihtne CSS3-s.
Selle õppetundi jätkamine - 2. osa MOBILE VERSION horisontaalne menüü ".
Vaadake pensüstelit POyzbW Denis ( @Dwstroy ) sisse Codepen .
Õppetundide kasutamisel:
- kuva: flex;
- kasutage üleminekut;
- paigutage elemendid asendisse.
HTML horisontaalne menüüstruktuur
Esmalt kirjutage märgistus horisontaalse menüü all. Me avame oma arengukeskkonna minu puhul, see on PhpStorm, looge index.html-fail, määrab raami html: 5, asendavad lang-i ru-ga.
Kõik meta kustutatakse peale kodeeringu, registreerin pealkirja „ Tom menüü ”.
Keha vahel kirjutame päise märgise ja selles on plokk klassiga .dws-menüü, mis sisaldab meie menüüd. Järgmisena on struktuur järgmine, loome loendeid viie tükiga. Igas nimekirjas on link atribuudiga href = "#". Siis ma lähen klassi .fa .fa-
<header> <nav class = "dws-menu"> ul> li * 5> a [href = "#"]> i.fa.fa- </ nav> </ header>
Me vajutame selle rakendamiseks.
Kirjutage üles menüüelementide nimi ( kodu, tooted, teenused, uudised, kontaktid ).
Seejärel valige ja ühendage ikoonid. Minge saidile, me valime nende menüüelementide ikoonid:
<i class = "fa fa- home "> </ i> <i class = "fa fa- ostukorv "> </ i> <i class = "fa faogs"> </ i> <i klass = "fa fa -list "> </ i> <i class = "fa fa -open-open "> </ i>
Laadige arhiiv saidilt ikoonidega, eraldage selle sisu oma arvutisse, kopeerige fontide kaust ja css kaust teie arenduskeskkonda.
Fontide kaust sisaldab ikoonifonte ja css kaust sisaldab nende stiili. Tihendatud stiile saab eemaldada font-awesome.min, ühendame tihendamata font-awesome.css.
Indeks.html ühendame ikoonid ja registreerime iga elemendi oma ikoonistiiliga ( kodu , ostukäru , hammasrattad , loend , ümbrik-avatud ).
Oleme teinud pearaami, looma pärast põhistiili kirjeldust alammenüü ja nüüd loome faili, kus kirjeldame horisontaalse menüü style.css peamisi stiile ja ühendame selle index.html-ga. Selleks, et kontrollida, kas stiilid on ühendatud, loo img kaust, kuhu pannakse taustale suvaline pilt. Kirjutame pildiühenduse taustal.
keha {taust-pilt: url ("../ img / ep_naturalwhite.png"); }
Nagu me näeme, on kõik näidatud ja siis jätkame stiilide kirjeldust.
Kõigepealt lähtestame kõik taanded, mida erinevad brauserid võivad vaikimisi seadistada:
.dws-menüü * {marginaal: 0; polster: 0; }
Seadke päis 200 tippu. ja määrake, millise saidi abil saate alla laadida ja eraldi ühendada, kirjutage igal juhul täiendavad fondid.
päis {marginaal: 200 px; font-pere: Cuprum, Arial, Helvetica, sans-serif; }
Peida nimekirjas olevad markerid:
.dws-menu ul, .dws-menu ol {list-style: pole; }
Nimekirjad kuvatakse horisontaalselt kuvariga: lina ja me teeme selle keskel:
.dws-menu> ul {kuva: flex; õigustada sisu: keskus; }
Päises me sisestame ainult ülemise serva, kirjutame marginaali.
päis { margin-top: 200px; font-pere: Cuprum, Arial, Helvetica, sans-serif; }
Kujundame oma menüü, seadistame nuppude värvi, fondi jne.
Valige lingid nav> ul li ja tehke need plokkelemendiks. Seadistage menüü taust, kirjutage sisendid, määrake suurus, värvus, eemaldage alakriips ja tehke pealkirjad suurtähtedega.
.dws-menu> ul li a {kuva: plokk; taust: #ececed; polsterdus: 15px 30px 15px 40px; fondi suurus: 14px; värv: # 454547; teksti-kaunistus: pole; teksti muutmine: suured; }
Seejärel asetage ikoonid, määrake nimekirjad asendisse: suhteline; ikoonide edasiseks joondamiseks:
.dws-menu> ul li {asukoht: suhteline; }
Seejärel valime ikoonid, paigutame need absoluutselt, teeme ülemise serva 15 tippu, vasakult 12 tippu, suurendame suurust 18 piigini.
.dws-menu> ul li> a i.fa {asukoht: absoluutne; top: 15px; vasakule: 12tk; fondi suurus: 18px; }
Määrake loenditele eraldaja kujul piir, valige esimene LI element, seadke piir. Me valime viimase elemendi LI ja omistame sellele sarnase piiri.
.dws-menu> ul li: esimene laps {vasakpoolne: 1px tahke # b2b3b5; } .dws-menu> ul li: viimane laps {piiri-paremal: 1px tahke #babbbd; }
Piirangute tegemine LI-loenditele:
.dws-menu> ul li {asukoht: suhteline; paremal pool: 1tx tahke # c7c8ca; }
Menüü on saanud välimuse, siis saate edasi liikuda stiilide kirjelduse juurde.
Me animeerime horisontaalset menüüd osutamise ajal.
Valige lingid ja määrake plokile värv ning määrake lingi värv koos valge ikooniga. Lisame veel üks tume vari. Ülemineku abil 0,3 sekundiga teeme sujuva välimuse:
.dws-menüü li a: hover {background: # 454547; värv: #ffffff; karp-vari: 1px 5px 10px -5px must; üleminek: kõik 0,3s on lihtsad; }
Ja selle efekti sujuvaks kustutamiseks lisage see stiil lingile:
.dws-menu> ul li a {kuva: plokk; taust: #ececed; polsterdus: 15px 30px 15px 40px; fondi suurus: 14px; värv: # 454547; teksti-kaunistus: pole; teksti muutmine: suured; üleminek: kõik 0,3s on lihtsad; }
Põhimenüü on lõpetatud ja saate alammenüü ja nendesse sisseehitatud alammenüüde kirjelduse edasi minna.
Kirjeldage rippmenüüd CSS / HTML
Umbes me avame index.html ja lisame toodetele näiteks täiendava menüü. Sisestage UL LI-loendite vahel ja asetage sellesse viis loendit, mis sisaldab linke atribuudiga herf = ”#”.
ul> li * 5> a [href = "#"]
Me vajutame selle rakendamiseks, kirjutage kirjete nimi ( rõivad, elektroonika, toit, tööriistad, elu. Keemia ).
<ul> <li> <a href="#"> Riietus </a> </ li> <li> <a href="#"> Elektroonika </a> </ li> <li> <a href = "#"> Toit </a> </ li> <li> <a href="#"> Tööriistad </a> </ li> <li> <a href="#"> Elu. keemia </a> </ li> </ ul>
Seejärel avage style.css ja kirjeldage alammenüüstiile.
Me valime teise nimekirja ja määrame selle positsiooni: absoluutne; , määrake minimaalne laius 150 tippu.
/ * alammenüü * / .dws-menu li ul {asukoht: absoluutne; min-laius: 150 px; }
Kirjutagem piiriloenditesse ühe tippu.
.dws-menu li> ul li {border: 1px tahke # c7c8ca; }
Alammenüüs olevate linkide jaoks seame 10 tippu sisse, eemaldame teksti ümberkujundamise ja muudame taustaks paar tooni tumedamaks taustaks: # e4e4e5; .
.dws-menu li> ul li a {polster: 10px; teksti muutmine: pole; taust: # e4e4e5; }
Seejärel looge teine alammenüü. Mine märgistusfailile ja näiteks "Elektroonika" vormile analoogiamenüü abil, nagu me varem tegime. Kirjeldame objektide pealkirju ( kaamerad, arvutid, telefonid ) ja salvestame.
<li> <a href="#"> Elektroonika </a> <ul> <li> <a href="#"> Kaamerad </a> </ li> <li> <a href="#"> Arvutid </a> </ li> <li> <a href="#"> Telefonid </a> </ li> </ ul> </ li>
Nad olid välja toodud, kuid peidetud peamenüü alla, nüüd positsioon: absoluutne; sisestatud UL ja liigutage see 150 tippu. küljele:
.dws-menu li> ul li ul {asukoht: absoluutne; paremale: -150px; top: 0; }
Järgmisena kuvame alammenüü, kui suunate tippmenüü peamisi elemente, sest lisame selle: ükski; ja seeläbi peita kõik sisemised punktid.
/ * alammenüü * / .dws-menu li ul {asukoht: absoluutne; min-laius: 150 px; kuva: pole; }
Ja nende välimuseks valime hover-nimekirjad ja kuvame neid ekraanil: block; .
.dws-menu li: hover> ul {kuva: plokk; }
Nüüd saate lisada mitmetasandilisi menüüsid, lihtsalt kopeerides UL-plokki, muutes selle üksusi.
<ul> <li> <a href="#"> <i class = "fa fa-home"> </ i> Kodu </a> </ li> <li> <a href="#"> < i class = "fa fa-shopping-cart"> </ i> Tooted </a> <ul> <li> <a href="#"> Riietus </a> <ul> <li> <a href = "#"> Kingad </a> </ li> <li> <a href="#"> Joped </a> </ li> <li> <a href="#"> Püksid </a> < / li> </ ul> </ li> <li> <a href="#"> Elektroonika </a> <ul> <li> <a href="#"> Kaamerad </a> </ li> <li> <a href="#"> Arvutid </a> </ li> <li> <a href="#"> Telefonid </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="#"> Toit </a> </ li> <li> <a href="#"> Tööriistad </ h a> </ li> <li> <a href="#"> Gen. keemia </a> </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa-cogs"> </ i> Teenused </a> <ul > <li> <a href="#"> Teenus 1 </a> </ li> <li> <a href="#"> Teenus 2 </a> </ li> <li> <a href = "#"> Teenus 3 </a> </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa-th-list"> </ i> Uudised </a> </ li> <li> <a href="#"> <i class = "fa fa-ümbrik-avatud"> </ i> Kontaktid </a> </ li> </ ul>
Siis lõpetame nupud nuppudega. Ma kasutan, olen loonud mitu eelseadet, saate luua oma, minu puhul, lihtsalt kopeerin selle koodi ja panin selle eelnevalt kirjutatud taustapaika.
.dws-menu> ul li a {kuva: plokk; / * Permalink - see gradient: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98.757577+100;Custom+3 * / background: # c9c9c9 ; / * Vana brauserid * / taust: -moz-lineaarne gradient (ülemine, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * FF3.6-15 * / taust: -webkit-lineaarne gradient (ülemine, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * Chrome10-25, Safari5.1-6 * / taust: lineaarne gradiend (alla, # 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 * / polsterdus: 15px 30px 15px 40px; fondi suurus: 14px; värv: # 454547; teksti-kaunistus: pole; teksti muutmine: suured; üleminek: kõik 0,3s on lihtsad; } .dws-menu li a: hover {/ * Permalink - see gradient: http://colorzilla.com/gradient-editor/#e0e1e5+0.454547+2.454547+98,e0e1e5+100 * / taust: # e0e1e5; / * Vana brauserid * / taust: -moz-lineaarne gradient (ülemine, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * FF3.6-15 * / taust: -webkit-lineaarne gradient (ülemine, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * Chrome10-25, Safari5.1-6 * / taust: lineaarne gradiend (alumisse, # 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 * / värv: #ffffff; karp-vari: 1px 5px 10px -5px must; üleminek: kõik 0,3s on lihtsad; }
Soovi korral saab seda menüüd kujundada stiili jaoks, mis sobib teile saidil, piisab ainult värvi genereerimisest ja selle asendamisest koodiga. Selgus, et tegemist on lihtsa ja samal ajal kena horisontaalse menüüga, mis tehti puhtas CSS-is.