Ren CSS / HTML drop-down menu

  1. Ren CSS / HTML drop-down menu I denne tutorial vil vi lave en klassisk vandret menu på ren CSS. ...
  2. Vi animerer den vandrette menu mens du peger.
  3. Beskriv rullemenuen CSS / HTML

Ren CSS / HTML drop-down menu

I denne tutorial vil vi lave en klassisk vandret menu på ren CSS. Det har ikoner i listerne. Når man peger på et element, ændrer det gradvist farven på knappen og teksten, en skygge tilføjes. Drop-down lister kan laves på flere niveauer, og det vigtigste er helt enkelt implementeret på ren CSS3.

Fortsættelsen af ​​denne lektion her - del 2 MOBIL VERSION vandret menu ".

Se pennen POyzbW af denis @Dwstroy ) på CodePen .

I lektionen brug:

  • display: flex;
  • brug overgang
  • Placer elementerne med position.

HTML vandret menustruktur

Først skal du skrive markeringen under den vandrette menu. Vi åbner vores udviklingsmiljø i mit tilfælde, dette er PhpStorm, opretter en index.html-fil, foreskriver rammen html: 5, erstatt lang med ru.

Alle meta vil blive slettet med undtagelse af kodningen, jeg vil registrere min titel " Tom menu ".

Mellem kroppen skriver vi hovedteksten, og der er en blok med klassen .dws-menuen, som indeholder vores menu. Dernæst vil strukturen være som følger, vi vil oprette lister i mængden af ​​fem stykker. I hver liste vil der være et link til attributten href = "#". Så vil 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 at anvende.

Lad os skrive ned navnet på menupunkterne ( Hjem, Produkter, Tjenester, Nyheder, Kontakter ).

Vælg derefter og forbinde ikonerne. Gå til webstedet, vi vælger ikonerne for disse menupunkter:

<i class = "fa fa- home "> </ i> <i class = "fa fa- shopping- cart "> </ i> <i class = "fa facogs"> </ i> <i klassen = "fa listeliste "> </ i> <i class = "fa konvolut-åben "> </ i>

<i class = fa fa- home > </ i> <i class = fa fa- shopping- cart > </ i> <i class = fa facogs> </ i> <i klassen = fa listeliste > </ i> <i class = fa konvolut-åben > </ i>

Hent arkivet fra webstedet med ikoner, hent dets indhold til din computer, kopier skabelonmappen og css-mappen til dit udviklingsmiljø.

Skrifttyper-mappen indeholder ikonfonter, og css-mappen indeholder deres stilarter. Komprimerede stilarter kan fjernes font-awesome.min, vi forbinder uncompressed font-awesome.css.

I index.html forbinder vi ikoner, og vi registrerer hvert emne med sin egen ikonstil ( hjem , indkøbskurv , tandhjul , t-liste , konvolut-åben ).

Vi har lavet hovedrammen, lav en undermenu efter beskrivelsen af ​​hovedstilen, og nu vil vi oprette en fil, hvor vi beskriver de vigtigste stilarter i den vandrette menu style.css og forbinder den med index.html. For at kontrollere, at stilarterne er tilsluttet, skal du oprette en img-mappe. I det vil jeg placere et vilkårlig billede på baggrunden. Lad os skrive billedforbindelsen ved hjælp af baggrunden.

krop {baggrundsbillede: url ("../ img / ep_naturalwhite.png"); }

Som vi ser, er alt blevet vist, og så går vi videre til beskrivelsen af ​​stilarter.

Først og fremmest, lad os nulstille alle indrykninger, hvilke forskellige browsere som standard kan indstille:

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

Indstil overskriften til 200 toppe. og tildele, som du kan downloade og separat oprette forbindelse til dig selv på webstedet, bare i tilfælde af at skrive yderligere skrifttyper.

header {margin: 200px; font-familie: Cuprum, Arial, Helvetica, sans-serif; }

Skjul markørerne i listerne:

.dws-menu ul, .dws-menu ol {listestil: none; }

Listerne vises vandret med display: lin, og vi vil gøre det i midten:

.dws-menu> ul {display: flex; retfærdiggør indhold: center; }

I overskriften indsender vi kun toppen, vi skriver en margin-top.

header { margin-top: 200px; font-familie: Cuprum, Arial, Helvetica, sans-serif; }

Lad os designe vores menu, indstille farven på knapperne, skrifttypen osv.

Vælg links nav> ul li, og foretag dem blokelementer. Indstil menuen baggrund, skriv indrykker, angiv størrelsen, farven, fjern understregningen og lav overskrifterne i store bogstaver.

.dws-menu> ul li a {display: block; baggrund: #ececed; polstring: 15px 30px 15px 40px; skrifttypestørrelse: 14px; farve: # 454547; tekst dekoration: ingen; tekst-transformer: store bogstaver; }

Placer derefter ikonerne, tildel listerne til position: relative; til yderligere justering af ikoner:

.dws-menu> ul li {position: relative; }

Dernæst vælger vi ikoner, placerer dem absolut, gør indrykning ovenfra ved 15 toppe, fra venstre 12 toppe, øg størrelsen til 18 toppe.

.dws-menu> ul li> a i.fa {position: absolut; top: 15px; venstre: 12px; skrifttypestørrelse: 18px; }

Tildel separatoren i form af en grænse til listerne, vælg det første LI element, indstil grænsen. Vi vælger det sidste element LI og tildeler det en tilsvarende grænse.

.dws-menu> ul li: første barn {grænse-venstre: 1px solid # b2b3b5; } .dws-menu> ul li: sidste barn {grænse-højre: 1px solid #babbbd; }

Gør afgrænsere til LI lister:

.dws-menu> ul li {position: relative; grænse-højre: 1px solid # c7c8ca; }

Menuen har erhvervet udseendet, så du kan gå videre til beskrivelsen af ​​stilarter under svømmeren.

Vi animerer den vandrette menu mens du peger.

Vælg links og tildel en farve til blokken, og tildel farve for selve linket med ikonet til hvidt. Lad os tilføje en anden mørk skygge. Ved hjælp af overgangen i 0,3 sekunder vil vi få et glat udseende:

.dws-menu li a: hover {background: # 454547; farve: #ffffff; box-skygge: 1px 5px 10px -5px sort; overgang: alle 0.3s let; }

Og for at gøre denne effekt forsvinder jævnt, tilføj denne stil til linket på lethed:

.dws-menu> ul li a {display: block; baggrund: #ececed; polstring: 15px 30px 15px 40px; skrifttypestørrelse: 14px; farve: # 454547; tekst dekoration: ingen; tekst-transformer: store bogstaver; overgang: alle 0.3s let; }

Hovedmenuen er færdig, og du kan gå videre til beskrivelsen af ​​undermenuen og undermenuerne indlejret i dem.

Beskriv rullemenuen CSS / HTML

Om vi ​​åbner index.html og tilføj f.eks. En ekstra menu til produkterne. Indsæt UL mellem LI listerne og læg fem lister i den, som vil indeholde links med attributten herf = "#".

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

Vi trykker på for at anvende, skriv navnet på emnerne ( Tøj, Elektronik, Fødevarer, Værktøj, Liv. Kemi ).

<ul> <li> <a href="#"> Beklædning </a> </ li> <li> <a href="#"> Elektronik </a> </ li> <li> <a href = "#"> Mad </a> </ li> <li> <a href="#"> Værktøjer </a> </ li> <li> <a href="#"> Liv. kemi </a> </ li> </ ul>

Derefter åbner style.css og beskriver undermenu stilarter.

Vi vælger den anden liste og tildeler den position: absolut; , lad os indstille minimale bredde til 150 toppe.

/ * undermenu * / .dws-menu li ul {position: absolut; min bredde: 150px; }

Lad os skrive til grænselisterne på 1 peak.

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

For linkene i undermenuen vil vi sætte indtryk på 10 toppe., Fjern teksttransformationen og lav baggrunden et par toner mørkere baggrund: # e4e4e5; .

.dws-menu li> ul li a {polstring: 10px; tekst-transform: ingen; baggrund: # e4e4e5; }

Opret derefter en anden undermenu. Gå til markupfilen og for eksempel i "Elektronik" -formularen ved hjælp af analogi-menuen, som vi gjorde før. Vi beskriver overskrifterne for emnerne ( kameraer, computere, telefoner ) og gemmer.

<li> <a href="#"> Elektronik </a> <ul> <li> <a href="#"> Kameraer </a> </ li> <li> <a href="#"> Computere </a> </ li> <li> <a href="#"> Telefoner </a> </ li> </ ul> </ li>

De blev bragt ud, men gemt under hovedmenuen, nu position: absolut; nestede UL og flytte den til 150-toppen. til siden:

.dws-menu li> ul li ul {position: absolute; højre: -150px; top: 0; }

Dernæst vil vi få undermenuen til at blive vist, når du målretter mod de vigtigste elementer i topmenuen, for dette tilføjer vi display: none; og derved skjule alle interne punkter.

/ * undermenu * / .dws-menu li ul {position: absolut; min bredde: 150px; display: none; }

Og for deres udseende vælger vi listerne på hover og viser dem ved hjælp af displayet: block; .

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

Nu kan du tilføje menuer på flere niveauer simpelthen ved at kopiere UL-blokken, ændre dens elementer.

<ul> <li> <a href="#"> <i class = "fa fa-home"> </ i> Hjem </a> </ li> <li> <a href="#"> < </ i> Produkter </a> <ul> <li> <a href="#"> Beklædning </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="#"> Elektronik </a> <ul> <li> <a href="#"> Kameraer </a> </ li> <li> <a href="#"> Computere </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="#"> Mad </a> </ li> <li> <a href="#"> Værktøjer </ h a> </ li> <li> <a href="#"> Gen. kemi </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 = "#"> Service 3 </a> </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa-listen"> </ i> Nyheder </a> </ li> <li> <a href="#"> <i class = "fa fa-konvolut-åben"> </ i> Kontakter </a> </ li> </ ul>

Lad os derefter afslutte knapperne med knapperne. Jeg bruger, jeg har oprettet flere forudindstillinger, du kan oprette din egen, i mit tilfælde kopierer jeg bare denne kode og placerer den på baggrundspladsen, som jeg skrev før.

.dws-menu> ul li a {display: block; / * Permalink - denne gradient: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98.757577+100;Custom+3 * / background: # c9c9c9 ; / * Gamle browsere * / baggrund: -moz-lineær gradient (top, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * FF3.6-15 * / baggrund: -webkit-lineær gradient (top, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * Chrome10-25, Safari5.1-6 * / baggrund: lineær gradient (til bunden, # 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; skrifttypestørrelse: 14px; farve: # 454547; tekst dekoration: ingen; tekst-transformer: store bogstaver; overgang: alle 0.3s let; } .dws-menu li a: hover {/ * Permalink - denne gradient: http://colorzilla.com/gradient-editor/#e0e1e5+0.454547+2.454547+98,e0e1e5+100 * / baggrund: # e0e1e5; / * Gamle browsere * / baggrund: -moz-lineær gradient (top, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * FF3.6-15 * / baggrund: -webkit-lineær gradient (top, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * Chrome10-25, Safari5.1-6 * / baggrund: lineær gradient (til bunden, # 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 * / farve: #ffffff; box-skygge: 1px 5px 10px -5px sort; overgang: alle 0.3s let; } dws-menu> ul li a {display: block;  / * Permalink - denne gradient: http://colorzilla

Hvis du ønsker, kan denne menu være designet til den stil, som vi er velegnet til dig på stedet, det er nok bare at generere en farve og erstatte den i koden. Det viste sig en simpel og samtidig flot vandret menu, lavet i ren CSS.

Efterlad en kommentar: