1. „Pure CSS / HTML“ išskleidžiamajame meniu Šioje pamokoje mes atliksime klasikinį horizontalų meniu...
2. Mes nukreipiame horizontalųjį meniu, rodydami.
3. Apibūdinkite išskleidžiamąjį meniu CSS / HTML

„Pure CSS / HTML“ išskleidžiamajame meniu

Šioje pamokoje mes atliksime klasikinį horizontalų meniu gryname CSS. Juose yra piktogramos sąrašuose. Nurodydamas elementą, jis sklandžiai keičia mygtuko ir teksto spalvą, pridedamas šešėlis. Išskleidžiamieji sąrašai gali būti sudaromi daugiapakopiais, o pagrindinis dalykas yra paprasčiausiai įgyvendinamas gryname CSS3.

Šios pamokos tęsimas čia - 2 dalis MOBILIO VERSIJOS horizontalus meniu ".

Žr. Švirkštimo priemonę POyzbW pateikė Denis ( @Dwstroy ) Codepen .

Pamokos naudojimo metu:

• ekranas: flex;
• naudoti perėjimą;
• padėkite elementus į padėtį.

HTML horizontali meniu struktūra

Pirma, užrašykite žymėjimą po horizontaliu meniu. Mano atveju, mes atidarome savo vystymosi aplinką, tai yra „PhpStorm“, sukuriame index.html failą, nurodome rėmelį html: 5, pakeiskite „lang“ su „ru“.

Visi meta bus ištrinti, išskyrus kodavimą, registruosiu pavadinimą „ Tom meniu “.

Tarp kūno rašome antraštės žymą, ir jame yra blokas su klasės .dws meniu, kuriame bus mūsų meniu. Toliau struktūra bus tokia, kad sudarysime penkių dalių sąrašus. Kiekviename sąraše bus nuoroda į atributą href = "#". Tada aš eisiu į piktogramą su klase .fa .fa-

<header> <nav class = "dws-menu"> ul> li * 5> a [href = "#"]> i.fa.fa- </ nav> </ header>

Mes norime taikyti.

Užrašykime meniu elementų pavadinimą ( Pradžia, Produktai, Paslaugos, Naujienos, Kontaktai ).

Tada pasirinkite ir prijunkite piktogramas. Eikite į svetainę, pasirinksime šių meniu elementų piktogramas:

<i class = "fa fa- home "> </ i> <i class = "fa fa- pirkinių krepšelis "> </ i> <i class = "fa faogs"> </ i> <i klasė = "fa fa -list "> </ i> <i class = "fa fa -open-open "> </ i>

Atsisiųskite archyvą iš svetainės su piktogramomis, ištraukite jo turinį į kompiuterį, nukopijuokite šriftų aplanką ir css aplanką į savo vystymosi aplinką.

Šriftų aplanke yra piktogramų šriftai, o css aplanke yra jų stiliai. Suspaustus stilius galima pašalinti šriftu-awesome.min, mes sujungiame nesuspaustą šriftą-awesome.css.

Index.html mes sujungiame piktogramas ir registruojame kiekvieną elementą, turintį savo piktogramos stilių ( namuose , pirkinių krepšeliuose , krumplių , sąrašų , vokų atidarymo ).

Sukūrėme pagrindinį rėmą, po pagrindinio stiliaus aprašymo sukuriame submeniu, o dabar mes sukursime failą, kuriame aprašysime pagrindinius horizontalių meniu stilių stilius.css ir prijungsime jį prie index.html. Jei norite patikrinti, ar stiliai yra prijungti, sukurkite aplanką „img“, kuriame fone bus pateikiamas savavališkas vaizdas. Parašykime paveikslėlį, naudodami foną.

kūnas {background-image: url ("../ img / ep_naturalwhite.png"); }

Kaip matome, viskas buvo rodoma ir tada pereisime prie stilių aprašymo.

Visų pirma, iš naujo nustatykite visas įtraukas, kurias skirtingos naršyklės gali nustatyti pagal numatytuosius nustatymus:

.dws-meniu * {marža: 0; įdėklas: 0; }

Nustatykite antraštę į 200 smailių. ir priskirkite, kuriuos galite parsisiųsti ir atskirai prisijungti prie savęs svetainėje, tik tuo atveju, parašykite papildomus šriftus.

antraštė {paraštė: 200px; šrifto šeima: Cuprum, Arial, Helvetica, sans-serif; }

Slėpti žymenis sąrašuose:

.dws-menu ul, .dws-menu ol {list-style: nėra; }

Sąrašai bus rodomi horizontaliai su ekranu: linai, ir mes tai padarysime centre:

.dws-menu> ul {ekranas: flex; pateisinti turinį: centras; }

Antraštėje mes įtrauksime tik viršutinę dalį, mes parašysime „margin-top“.

antraštė { margin-top: 200px; šrifto šeima: Cuprum, Arial, Helvetica, sans-serif; }

Suprojektuokite meniu, nustatykite mygtukų, šrifto ir kt. Spalvą.

Pasirinkite nuorodas nav> ul li ir padarykite jas blokiniais elementais. Nustatykite meniu foną, rašykite įtraukas, nurodykite dydį, spalvą, pašalinkite pabraukimą ir antraštes rašykite didžiosiomis raidėmis.

.dws-menu> ul li a {ekranas: blokas; fonas: #ececed; paminkštinimas: 15px 30px 15px 40px; šrifto dydis: 14px; spalva: # 454547; teksto apdaila: nėra; teksto transformavimas: didžiosios; }

Tada padėkite piktogramas, priskirkite sąrašus pozicijai: santykinis; toliau derinti piktogramas:

.dws-menu> ul li {pozicija: santykinis; }

Be to, mes pasirenkame piktogramas, išdėstome jas absoliučiai, kad iš viršaus būtų įdėta 15 smailių, iš kairiųjų 12 smailių, padidinkite dydį iki 18 smailių.

.dws-menu> ul li> a i.fa {pozicija: absoliutus; viršuje: 15px; kairėje: 12px; šrifto dydis: 18px; }

Paskirti skirstytuvą sienos forma, pasirinkite pirmąjį LI elementą, nustatykite sieną. Pasirenkame paskutinį elementą LI ir priskiriame jį panašiai.

.dws-menu> ul li: pirmasis vaikas {sienos kairėje: 1px kietas # b2b3b5; } .dws-menu> ul li: paskutinis vaikas {dešinė pusė: 1px kietas #babbbd; }

LIT sąrašų ribotojų kūrimas:

.dws-menu> ul li {pozicija: santykinis; dešinė pusė: 1px kietas # c7c8ca; }

Meniu įgijo išvaizdą, tada galite pereiti prie stilių aprašymo judėjimo metu.

Mes nukreipiame horizontalųjį meniu, rodydami.

Pasirinkite nuorodas ir priskirkite spalvą blokui ir priskirkite saitos spalvą su piktograma į baltą. Pridėkime dar vieną tamsią šešėlį. Per 0,3 sekundžių pereinamojo laikotarpio pagalba padarysime sklandžią išvaizdą:

.dws-meniu li a: hover {background: # 454547; spalva: #ffffff; dėžutės šešėlis: 1px 5px 10px -5px juodas; perėjimas: visi 0.3s lengviau; }

Jei norite, kad šis efektas išnyktų sklandžiai, pridėkite šį stilių į saitą:

.dws-menu> ul li a {ekranas: blokas; fonas: #ececed; paminkštinimas: 15px 30px 15px 40px; šrifto dydis: 14px; spalva: # 454547; teksto apdaila: nėra; teksto transformavimas: didžiosios; perėjimas: visi 0.3s lengviau; }

Pagrindinis meniu yra baigtas, ir galite pereiti į submeniu ir į juos įdėtus submeniu.

Apibūdinkite išskleidžiamąjį meniu CSS / HTML

Apie mes atidarome index.html ir pridedame, pavyzdžiui, papildomą meniu. Įterpkite UL tarp LI sąrašų ir įdėkite penkis sąrašus, kuriuose bus nuorodos su atributu herf = ”#”.

ul> li * 5> a [href = "#"]

Mes paspaudžiame, kad galėtume taikyti, parašyti daiktų pavadinimą ( Drabužiai, elektronika, maistas, įrankiai, gyvenimas. Chemija ).

<ul> <li> <a href="#"> Drabužiai </a> </ li> <li> <a href="#"> Elektronika </a> </ li> <li> <a href = „#“> Maistas </a> </ li> <li> <a href="#"> Įrankiai </a> </ li> <li> <a href="#"> Gyvenimas. chemija </a> </ li> </ ul>

Tada atidarykite style.css ir aprašykite submeniu stilius.

Pasirenkame antrąjį sąrašą ir priskiriame jį: absoliutus; , nustatykite minimalų plotį iki 150 smailių.

/ * submeniu * / .dws-menu li ul {pozicija: absoliutus; min. plotis: 150px; }

Rašykime į pasienio sąrašus 1 smailėje.

.dws-menu li> ul li {border: 1px kietas # c7c8ca; }

Nuorodose, esančiose submeniu, nustatysime dešimties smailių įtraukas, pašalinsime teksto transformaciją ir tapsime tamsesniais fonais pora tonų: # e4e4e5; .

.dws-menu li> ul li a {padding: 10px; teksto transformacija: nėra; fonas: # e4e4e5; }

Tada sukurkite kitą submeniu. Eikite į žymėjimo failą ir, pavyzdžiui, „Elektronika“ formą pagal analogiją, kaip ir anksčiau. Apibūdiname elementų antraštes ( fotoaparatai, kompiuteriai, telefonai ) ir išsaugokite.

<li> <a href="#"> Elektronika </a> <ul> <li> <a href="#"> Fotoaparatai </a> </ li> <li> <a href="#"> Kompiuteriai </a> </ li> <li> <a href="#"> Telefonai </a> </ li> </ ul> </ li>

Jie buvo išvežti, bet paslėpti po pagrindiniu meniu, dabar padėtis: absoliutus; įdėta UL ir perkeliama į 150 piko viršūnę. į šoną:

.dws-menu li> ul li ul {pozicija: absoliutus; dešinėje: -150px; viršuje: 0; }

Toliau pasirodysime submeniu, kai nukreipsime į pagrindinius viršutinio meniu elementus, nes tai pridedame ekraną: nėra; ir taip paslėpti visus vidinius taškus.

/ * submeniu * / .dws-menu li ul {pozicija: absoliutus; min. plotis: 150px; ekranas: nėra; }

Ir jų išvaizdai parinksime sąrašus, esančius užvažiuojant, ir parodysime juos ekrano pagalba: blokas; .

.dws-menu li: hover> ul {ekranas: blokas; }

Dabar galite pridėti daugiapakopius meniu tiesiog kopijuodami UL bloką, keisdami jo elementus.

<ul> <li> <a href="#"> <i class = "fa fa-home"> </ i> Pagrindinis </a> </ li> <li> <a href="#"> < i class = "fa fa-shopping-cart"> </ i> Produktai </a> <ul> <li> <a href="#"> Drabužiai </a> <ul> <li> <a href = „#“> Batai </a> </ li> <li> <a href="#"> Striukės </a> </ li> <li> <a href="#"> Kelnės </a> < / li> </ ul> </ li> <li> <a href="#"> Elektronika </a> <ul> <li> <a href="#"> Fotoaparatai </a> </ li> <li> <a href="#"> Kompiuteriai </a> </ li> <li> <a href="#"> Telefonai </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="#"> Maistas </a> </ li> <li> <a href="#"> Įrankiai </ h a> </ li> <li> <a href="#"> Gen. chemija </a> </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa-cogs"> </ i> Paslaugos </a> <ul > <li> <a href="#"> 1 paslauga </a> </ li> <li> <a href="#"> 2 paslauga </a> </ li> <li> <a href = „#“> Paslauga 3 </a> </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa-th-list"> </ i> Naujienos </a> </ li> <li> <a href="#"> <i class = "fa fa-envelope-open"> </ i> Kontaktai </a> </ li> </ ul>

Tada baigsime mygtukus su mygtukais. Aš naudoju, sukūriau kelis Presets, galite sukurti savo, mano atveju, aš tiesiog nukopijuoju šį kodą ir įdėjau į fono vietą, kurią parašiau anksčiau.

.dws-menu> ul li a {ekranas: blokas; / * Permalink - šis gradientas: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98.757577+100;Custom+3 * / background: # c9c9c9 ; / * Senas naršyklės * / fonas: -moz-linijinis gradientas (viršuje, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * FF3.6-15 * / fonas: -webkit-tiesinis gradientas (viršuje, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * Chrome10-25, Safari5.1-6 * / fonas: tiesinis gradientas (iki apačios, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * W3C, IE10 +, FF16 +, Chrome26 +, Opera12 +, Safari7 + * / filtras: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# c9c9c9', endColorstr = '# 757577', GradientType = 0); / * IE6-9 * / padding: 15px 30px 15px 40px; šrifto dydis: 14px; spalva: # 454547; teksto apdaila: nėra; teksto transformavimas: didžiosios; perėjimas: visi 0.3s lengviau; } .dws-menu li a: hover {/ * Permalink - šis gradientas: http://colorzilla.com/gradient-editor/#e0e1e5+0.454547+2.454547+98,e0e1e5+100 * / fonas: # e0e1e5; / * Senas naršyklės * / fonas: -moz-linijinis gradientas (viršutinis, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * FF3.6-15 * / fonas: -webkit-tiesinis gradientas (viršutinis, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * Chrome10-25, Safari5.1-6 * / fonas: tiesinis gradientas (iki apačios, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * W3C, IE10 +, FF16 +, Chrome26 +, Opera12 +, Safari7 + * / filtras: progid: DXImageTransform Microsoft.gradient (startColorstr = '# e0e1e5', endColorstr = '# e0e1e5', GradientType = 0); / * IE6-9 * / spalva: #ffffff; dėžutės šešėlis: 1px 5px 10px -5px juodas; perėjimas: visi 0.3s lengviau; }

Jei pageidaujate, šis meniu gali būti sukurtas tam, kad galėtume jums tinkančius svetainėje, tik pakanka sukurti spalvą ir pakeisti ją į kodą. Paaiškėjo, kad paprastas ir tuo pačiu gražus horizontalus meniu, pagamintas gryname CSS.

Palikite komentarą: