1. Pure CSS / HTML spustni meni V tem vodiču bomo naredili klasični horizontalni meni na čisti CSS....
2. Med kazanjem animiramo vodoravni meni.
3. Opišite spustni meni CSS / HTML

Pure CSS / HTML spustni meni

V tem vodiču bomo naredili klasični horizontalni meni na čisti CSS. Na seznamih so ikone. Ko usmerite na element, gladko spremeni barvo gumba in besedila, doda senco. Spustne sezname je mogoče izdelati na več ravneh, glavna stvar pa je preprosto izvedena na čisti CSS3.

Nadaljevanje te lekcije - 2. del MOBILNA VERZIJA horizontalni meni ".

Glejte pero POyzbW Avtor: Denis ( @Dwstroy ) on Codepen .

V lekciji uporabite:

• zaslon: flex;
• uporaba prehoda;
• elemente postavite v položaj.

HTML horizontalna struktura menija

Najprej zapišite oznako pod vodoravni meni. V našem primeru odpremo razvojno okolje, to je PhpStorm, ustvarimo datoteko index.html, predpišemo okvir html: 5, nadomestimo lang z ru.

Vsi meta bodo izbrisani, razen kodiranja, registriral bom svoj naslov » Tom menu «.

Med telesom napišemo zagonsko oznako, v njej pa je blok z razredom .dws-menu, ki bo vseboval naš meni. Dalje, struktura bo, kot sledi, bomo ustvarili sezname v višini petih kosov. Na vsakem seznamu je povezava s atributom href = "#". Potem bom šel na ikono z razredom .fa .fa-

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

Pritisnemo, da se prijavimo.

Zapiši ime elementov menija ( Domov, Izdelki, Storitve, Novice, Stiki ).

Nato izberite in povežite ikone. Pojdite na spletno mesto, izbrali bomo ikone za te elemente menija:

<i class = "fa fa- home "> </ i> <i class = "fa fa- shopping- cart "> </ i> <i class = "fa faogs"> </ i> <i class = "fa fa -th-list "> </ i> <i class = "fa -envelope-open "> </ i>

Prenesite arhiv s spletnega mesta z ikonami, izvlecite njegovo vsebino v računalnik, kopirajte mapo pisav in mapo css v razvojno okolje.

Mapa z pisavami vsebuje pisave ikon, css pa vsebuje njihove sloge. Stisnjene sloge lahko odstranimo s font-awesome.min, povežemo nestisnjeno font-awesome.css.

V index.html povezujemo ikone in vsak element registriramo s svojim lastnim slogom ikon ( domov , nakupovalnih vozičkov , cogs , th-list , envelope-open ).

Naredili smo glavni okvir, ustvarili podmeni po opisu glavnega sloga in zdaj bomo ustvarili datoteko, v kateri bomo opisali glavne sloge horizontalnega menija style.css in ga povezali z index.html. Če želite preveriti, ali so stili povezani, ustvarite mapo img, v njej bom poljubno sliko postavil v ozadje. Napiši slikovno povezavo z ozadjem.

body {ozadje-slika: url ("../ img / ep_naturalwhite.png"); }

Kot vidimo, je vse prikazano in nato bomo nadaljevali z opisom slogov.

Najprej ponastavimo vse zamude, ki jih različni brskalniki lahko nastavijo privzeto:

.dws-menu * {margin: 0; oblazinjenje: 0; }

Nastavite glavo na 200 vrhov. in dodelite, ki jih lahko prenesete in ločeno povežete s seboj na spletnem mestu, za vsak primer, napišite dodatne pisave.

header {margin: 200px; družina pisav: Cuprum, Arial, Helvetica, sans-serif; }

Skrij oznake na seznamih:

.dws-menu ul, .dws-meni ol {list-style: none; }

Seznami bodo prikazani vodoravno s prikazom: lan in to bomo naredili v sredini:

.dws-menu> ul {display: flex; justify-content: center; }

V glavi bomo zamaknili le vrh, napisali bomo robni vrh.

glava { margin-top: 200px; družina pisav: Cuprum, Arial, Helvetica, sans-serif; }

Oblikujmo svoj meni, nastavimo barvo gumbov, pisavo itd.

Izberite povezave nav> ul li in jih blokirajte elemente. Nastavite ozadje menija, napišite zamik, določite velikost, barvo, odstranite podčrtaj in naredite naslove z velikimi črkami.

.dws-menu> ul li a {prikaz: blok; ozadje: #ececed; oblazinjenje: 15px 30px 15px 40px; velikost pisave: 14px; barva: # 454547; dekoracija besedila: nobena; text-transform: velike črke; }

Nato postavite ikone in jih dodelite položaju: relativna; za nadaljnjo poravnavo ikon:

.dws-menu> ul li {položaj: relativna; }

Nato izberemo ikone, jih postavimo absolutno, naredimo zamašek od zgoraj pri 15 vrhovih, od levega 12 vrhov, povečamo velikost na 18 vrhov.

.dws-menu> ul li> i.fa {položaj: absolutno; vrh: 15px; levo: 12px; velikost pisave: 18 px; }

Dodelite ločilo v obliki meje seznamom, izberite prvi element LI, nastavite mejo. Izberemo zadnji element LI in mu dodelimo podobno mejo.

.dws-menu> ul li: prvi otrok {border-left: 1px solid # b2b3b5; } .dws-menu> ul li: zadnji otrok {border-right: 1px solid #babbbd; }

Izdelava razmejilnikov za sezname LI:

.dws-menu> ul li {položaj: relativna; border-right: 1px solid # c7c8ca; }

Meni je pridobil videz, nato pa lahko nadaljujete z opisom slogov med lebdenjem.

Med kazanjem animiramo vodoravni meni.

Izberite povezave in dodajte barvo bloku ter dodajte barvo povezave z ikono belo. Dodamo še eno temno senco. S pomočjo prehoda v 0,3 sekunde bomo naredili gladek videz:

.dws-menu li a: hover {ozadje: # 454547; barva: #ffffff; box-shadow: 1px 5px 10px -5px črna; prehod: vse 0.3s lahek; }

In da bi ta učinek izginil gladko, dodajte ta slog na povezavo na enostaven način:

.dws-menu> ul li a {prikaz: blok; ozadje: #ececed; oblazinjenje: 15px 30px 15px 40px; velikost pisave: 14px; barva: # 454547; dekoracija besedila: nobena; text-transform: velike črke; prehod: vse 0.3s lahek; }

Glavni meni je dokončan in lahko nadaljujete z opisom podmenija in podmeniji, ki so vgrajeni v njih.

Opišite spustni meni CSS / HTML

O tem smo odprli index.html in dodali na primer dodaten meni. Vstavite UL med LI liste in vnesite pet seznamov, ki bodo vsebovali povezave z atributom herf = ”#”.

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

Pritisnemo za prijavo, napišemo ime artiklov ( oblačila, elektronika, hrana, orodje, življenje. Kemija ).

<ul> <li> <a href="#"> Oblačila </a> </ li> <li> <a href="#"> Elektronika </a> </ li> <li> <a href = "#"> Hrana </a> </ li> <li> <a href="#"> Orodja </a> </ li> <li> <a href="#"> Življenje. kemija </a> </ li> </ ul>

Nato odprite style.css in opišite sloge podmenija.

Izberemo drugi seznam in mu dodelimo položaj: absolutno; , nastavimo najmanjšo širino na 150 vrhov.

/ * podmeni * / .dws-menu li ul {položaj: absolutno; min-width: 150px; }

Pišemo na mejne sezname z enim vrhom.

.dws-menu li> ul li {meja: 1px solid # c7c8ca; }

Za povezave v podmeniju bomo postavili zamik na 10 vrhov., Odstranili pretvorbo besedila in naredili ozadje nekaj tonov temnejšega ozadja: # e4e4e5; .

.dws-menu li> ul li a {polnilo: 10px; text-transform: nobena; ozadje: # e4e4e5; }

Nato ustvarite drug podmeni. Pojdite v datoteko za označevanje in na primer v obrazec "Elektronika" po analognem meniju, kot smo to storili prej. Opišemo naslove postavk ( fotoaparati, računalniki, telefoni ) in jih shranimo.

<li> <a href="#"> Elektronika </a> <ul> <li> <a href="#"> Kamere </a> </ li> <li> <a href="#"> Računalniki </a> </ li> <li> <a href="#"> Telefoni </a> </ li> </ ul> </ li>

Izpeljali so jih, vendar so bili skriti pod glavnim menijem, zdaj položaj: absolutno; ugnezdila UL in jo premaknila na vrh 150. na stran:

.dws-menu li> ul ul (položaj: absolutno; desno: -150px; na vrh: 0; }

Nato se bo pojavil podmeni, ko boste ciljali na glavne elemente glavnega menija, za to dodamo prikaz: noben; in tako skriti vse notranje točke.

/ * podmeni * / .dws-menu li ul {položaj: absolutno; min-width: 150px; prikaz: nič; }

Za njihov videz pa bomo izbrali sezname na lebdenju in jih prikazali s pomočjo prikaza: blok; .

.dws-menu li: hover> ul {display: block; }

Sedaj lahko dodajate večstopenjske menije preprosto tako, da prekopirate blok UL, spremenite njegove elemente.

<ul> <li> <a href="#"> <i class = "fa fa-home"> </ i> Domov </a> </ li> <li> <a href="#"> < i class = "fa fa-shopping-cart"> </ i> Izdelki </a> <ul> <li> <a href="#"> Oblačila </a> <ul> <li> <a href = "#"> Čevlji </a> </ li> <li> <a href="#"> Jakne </a> </ li> <li> <a href="#"> Hlače </a> < / li> </ ul> </ li> <li> <a href="#"> Elektronika </a> <ul> <li> <a href="#"> Kamere </a> </ li> <li> <a href="#"> Računalniki </a> </ li> <li> <a href="#"> Telefoni </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="#"> Hrana </a> </ li> <li> <a href="#"> Orodja </ h a> </ li> <li> <a href="#"> Gener. kemija </a> </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa-cogs"> </ i> Storitve </a> <ul > <li> <a href="#"> Storitev 1 </a> </ li> <li> <a href="#"> Storitev 2 </a> </ li> <li> <a href = "#"> Storitev 3 </a> </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa-th-list"> </ i> Novice </a> </ li> <li> <a href="#"> <i class = "fa fa envelope-open"> </ i> Kontakti </a> </ li> </ ul>

Potem končajmo gumbe z gumbi. Uporabljam, ustvaril sem več prednastavitev, lahko ustvarite svoje, v mojem primeru samo kopiram to kodo in jo postavim v ozadje, ki sem ga prej napisal.

.dws-menu> ul li a {prikaz: blok; / * Permalink - ta gradient: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98.757577+100;Custom+3 * / background: # c9c9c9 ; / * Stari brskalniki * / ozadje: -moz-linear-gradient (top, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * FF3.6-15 * / ozadje: -webkit-linear-gradient (top, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * Chrome10-25, Safari5.1-6 * / ozadje: linearno gradient (do dna, # 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 * / oblazinjenje: 15px 30px 15px 40px; velikost pisave: 14px; barva: # 454547; dekoracija besedila: nobena; text-transform: velike črke; prehod: vse 0.3s lahek; } .dws-menu li a: hover {/ * Permalink - ta preliv: http://colorzilla.com/gradient-editor/#e0e1e5+0.454547+2.454547+98,e0e1e5+100 * / ozadje: # e0e1e5; / * Stari brskalniki * / ozadje: -moz-linear-gradient (top, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * FF3.6-15 * / ozadje: -webkit-linear-gradient (top, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * Chrome10-25, Safari5.1-6 * / ozadje: linearno gradient (na dnu, # 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 * / barva: #ffffff; box-shadow: 1px 5px 10px -5px črna; prehod: vse 0.3s lahek; }

Če želite, je ta meni lahko oblikovan za slog, ki je primeren za vas na spletnem mestu, dovolj je le ustvariti barvo in jo zamenjati v kodo. Izkazalo se je enostavno in hkrati lepo horizontalno meni, narejeno v čisti CSS.

Pustite komentar: