Vertikal meny ved hjelp av CSS. Horisontal css-meny med ikoner Rullegardinmeny med css-ikoner

I denne opplæringen vil vi lage en klassisk horisontal meny ved hjelp av ren CSS. Den har ikoner i lister. Når du holder markøren over et element, endres fargen på knappen og teksten jevnt, og en skygge legges til. Rullegardinlister kan lages på flere nivåer, og det viktigste er at det hele er ganske enkelt implementert i ren CSS3.

I leksjonen skal vi bruke:

• display: flex;
• bruk overgang ;
• Vi vil posisjonere elementer ved hjelp av posisjon .

HTML horisontal menystruktur

Først av alt, la oss skrive markeringen for den horisontale menyen. Vi åpner utviklingsmiljøet vårt (i mitt tilfelle er det PhpStorm), lager en index.html-fil, skriver html:5-rammeverket, erstatter lang med ru.

Jeg vil fjerne all meta unntatt kodingen, jeg vil skrive min egen tittel " Tom-menyen».

Mellom bodyen skriver vi en header-tag, og i den en blokk med .dws-menu-klassen der menyen vår skal ligge. Deretter vil strukturen være som følger; vi vil lage fem lister. Hver liste vil ha en lenke med href="#"-attributtet. Da vil det være et ikon I med klassen .fa .fa-

Klikk på bruk.

La oss skrive ned navnet på menyelementene ( Hjem, produkter, tjenester, nyheter, kontakter).

Deretter velger du og kobler til ikonene. Gå til Font Awesome-nettstedet, velg ikoner for disse menyelementene:

Last ned arkivet fra nettstedet med ikoner, pakk ut innholdet til datamaskinen din, kopier fontmappen og css-mappen til utviklingsmiljøet ditt.

Fonts-mappen inneholder ikonfonter, og css-mappen inneholder stilene deres. Komprimerte stiler kan fjernes fra font-awesome.min, la oss inkludere ukomprimert font-awesome.css .

I index.html kobler vi sammen ikoner, og tildeler hvert element sin egen ikonstil ( hjem, handlevogn, tannhjul, th-listen, konvolutt-åpen).

Vi har laget hovedrammen, vi skal lage en undermeny etter å ha beskrevet hovedstilen, og nå skal vi lage en fil der vi skal beskrive hovedstilene til den horisontale menyen style.css og koble den til index.html. For å sjekke at stilene er koblet sammen, lager jeg en img-mappe og plasserer et vilkårlig bilde i den for bakgrunnen. La oss registrere forbindelsen til bildet ved hjelp av bakgrunnen .

Body( bakgrunnsbilde: url("../img/ep_naturalwhite.png"); )

Vi beskriver CSS-stilene til den horisontale menyen

Først av alt, la oss tilbakestille alle innrykk som forskjellige nettlesere kan sette som standard:

Dws-meny *( marg: 0; utfylling: 0; )

La oss sette overskriften til 200 piksler. og tilordne Cuprum-fonten, som kan lastes ned og kobles separat til nettstedet ditt, i tilfelle vi legger til flere fonter.

Header( margin: 200px; font-family: Cuprum, Arial, Helvetica, sans-serif; )

La oss skjule markørene fra listene:

Dws-meny ul, .dws-meny ol( listestil: ingen; )

La oss vise listene horisontalt ved å bruke display: flax , og gjøre det sentrert:

Dws-meny > ul( display: flex; justify-content: center; )

I overskriften vil vi bare rykke inn toppen, vi skriver margin-top .

Overskrift( marg-top: 200px; font-familie: Cuprum, Arial, Helvetica, sans-serif; )

La oss designe menyen vår, angi fargen på knappene, fonten osv.

Dws-meny > ul li a( display: blokk; bakgrunn: #ececed; polstring: 15px 30px 15px 40px; font-size: 14px; farge: #454547; tekstdekorasjon: ingen; teksttransformasjon: store bokstaver; )

Deretter plasserer vi ikonene, tildeler posisjon: i forhold til listene; For å sentrere ikonene ytterligere:

Dws-meny > ul li(posisjon: relativ;)

Dws-meny > ul li > a i.fa( posisjon: absolutt; topp: 15px; venstre: 12px; skriftstørrelse: 18px; )

La oss tilordne en skilletegn til listene i form av en kantlinje, velg det første LI-elementet og sett grensen. Vi velger det siste LI-elementet og tildeler det en lignende kantlinje.

Dws-meny > ul li:first-child( border-venstre: 1px solid #b2b3b5; ) .dws-menu > ul li:last-child( border-right: 1px solid #babbbd; )

Vi lager listeskillere LI:

.dws-meny > ul li(posisjon: relativ; border-right: 1px solid #c7c8ca; }

Menyen har fått sitt utseende, og da kan du begynne å beskrive svevestiler.

Animerer den horisontale menyen ved å holde musepekeren

Dws-meny li a:hover( bakgrunn: #454547; farge: #ffffff; box-shadow: 1px 5px 10px -5px svart; overgang: enkel 0.3s; )

Og for å få denne effekten til å forsvinne jevnt, legg til denne stilen til lenken i ro:

.dws-menu > ul li a( display: blokk; bakgrunn: #ececed; polstring: 15px 30px 15px 40px; font-size: 14px; farge: #454547; tekst-dekorasjon: ingen; teksttransformasjon: store bokstaver; overgang: alle 0.3s letthet; )

Vi er ferdig med hovedmenyen og kan begynne å beskrive undermenyene og deres nestede menyer.

Beskriv en CSS/HTML rullegardinmeny

La oss åpne index.html og legge til for eksempel en ekstra meny til produktet. Vi setter inn UL mellom LI-listene; vi vil plassere fem lister i den, som vil inneholde lenker med herf=”#”-attributtet.

ul>li*5>a

Klikk på bruk, skriv ned navnet på elementene ( Klær, elektronikk, mat, verktøy, husholdning. kjemi).

• Klut
• Elektronikk
• Mat
• Verktøy
• Liv kjemi

Åpne deretter style.css og beskriv stilene til undermenyen.

Velg den andre listen og tilordne den posisjon: absolutt; , sett minimumsbredden til 150 piksler.

/*undermeny*/ .dws-menu li ul(posisjon: absolutt; min-bredde: 150px; )

La oss tilordne en kantlinje på 1 topp til listene.

Dws-meny li > ul li( kantlinje: 1px solid #c7c8ca; )

For lenker i undermenyen, sett innrykk til 10 piksler, fjern teksttransformasjonen og gjør bakgrunnen et par nyanser mørkere bakgrunn: #e4e4e5; .

Dws-meny li > ul li a( padding: 10px; teksttransform: ingen; bakgrunn: #e4e4e5; )

La oss deretter lage en annen undermeny. La oss gå til markup-filen og for eksempel i "Elektronikk" lager vi en meny som ligner på det vi gjorde før. Vi beskriver overskriftene til avsnittene ( Kameraer, datamaskiner, telefoner) og lagre.

Elektronikk

• Kameraer
• Datamaskiner
• Telefoner

De vises, men skjult under hovedmenyen, nå posisjon: absolutt; nestet UL og forskyv den med 150 bilder. til siden:

Dws-meny li > ul li ul( posisjon: absolutt; høyre: -150px; topp: 0; )

/*undermeny*/ .dws-menu li ul(posisjon: absolutt; min-bredde: 150px; display: ingen; )

Og for utseendet deres, vil vi velge lister på hover og vise dem ved hjelp av display: block; .

Dws-meny li:hover > ul( display: block; )

Nå kan du legge til flernivåmenyer ved ganske enkelt å kopiere UL-blokken og endre elementene.

• hjem
• Produkter
  • Klut
    • Sko
    • Jakker
    • Bukse
  • Elektronikk
    • Kameraer
    • Datamaskiner
    • Telefoner
      • Samsung
      • Flf
      • eple
  • Mat
  • Verktøy
  • Liv kjemi
• Tjenester
  • Service 1
  • Service 2
  • Service 3
• Nyheter
• Kontakter

La oss deretter fullføre de siste trinnene ved å dekorere knappene med en ingrediens. Jeg bruker en CSS-generator, jeg har laget flere forhåndsinnstillinger, du kan lage dine egne, i mitt tilfelle kopierer jeg bare denne koden og plasserer den på stedet for bakgrunnen som jeg skrev før.

.dws-meny > ul li a( display: blokk; /* Permalink - bruk for å redigere og dele denne gradienten: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98,757577+100;Custom+3 */ bakgrunn: #c9c9c9 ; /* Gamle nettlesere */ bakgrunn: -moz-linear-gradient(top, #c9c9c9 0%, #f6f6f6 2%, #c4c5c7 98%, #757577 100%); /* FF3.6-15 */ bakgrunn: -webkit-linear-gradient(top, #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; skriftstørrelse: 14px; farge: #454547; tekst-dekorasjon: ingen; tekst-transform: store bokstaver; overgang: alle 0.3s letthet; ).dws-menu li a:hover( /* Permalink - bruk for å redigere og dele denne gradienten: http://colorzilla.com/gradient-editor/#e0e1e5+0.454547+2.454547+98,e0e1e5+100 */ background: #e0e1e5; /* Gamle nettlesere */ bakgrunn: -moz-linear-gradient(top, #e0e1e5 0%, #454547 2%, #454547 98%, #e0e1e5 100%); /* FF3.6-15 */ bakgrunn: -webkit-linear-gradient(top, #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; box-shadow: 1px 5px 10px -5px svart; overgang: alle 0.3s letthet; )

Om ønskelig kan denne menyen utformes for å matche stilen som passer deg på nettstedet; generer ganske enkelt en farge og erstatt den i koden. Resultatet er en enkel og samtidig fin horisontal meny, laget i ren CSS.

God nettsidenavigasjon er veldig viktig for bloggere. Med dens hjelp finner den besøkende raskt ønsket bloggside. Søkemotorer setter også pris på tydeligheten til nettstedet. I denne artikkelen lærer du hvordan du lager en horisontal meny for Blogger med popup-ikoner.
En meny med popup-ikonknapper opprettes i CSS. For å se menyen, klikk på knappen nedenfor:

Slik setter du inn en horisontal css-meny med ikoner på Blogger

1. Gå til fanen "Mal", plasser markøren i redigeringsprogrammet (hvor som helst),
2. Trykk Ctrl + F for å søke etter kode og finne kodedelen ]]>
3. Sett inn følgende kode før denne koden:
   ..
   

   /* CSS-koden for menyen starter her bloggertrix.com */ #btrix-nav (margin: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;)
   #btrix-nav li (flyt: venstre;)
   #btrix-nav li a (display: block; color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px solid #bbb; border-bottom: 1px solid #555;)
   #btrix-nav li a span.aname (font: bold 17px/61px "Arial";farge: #fff;text-transform: store bokstaver;cursor: pointer;position: relative;top: 0;transition: top .5s ease; tekstskygge: 1px 1px 1px rgba(0, 0, 0, 0.5);)
   #btrix-nav li a img (posisjon: relativ; topp: 0; overgang: topp .5s letthet;)
   #btrix-nav li a:hover (markør: peker;)
   #btrix-nav li a:hover img (øverst: -85px;)
   #btrix-nav li a:hover .aname (øverst: 85px;)
   #btrix-nav li:nth-child(1) a (bakgrunn: #3eb006;border-radius: 5px 0 0 5px;border-venstre: 1px solid #bbb;)
   #btrix-nav li:nth-child(2) a (bakgrunn: #9bc704;)
   #btrix-nav li:nth-child(3) a (bakgrunn: #0dc3ff;)
   #btrix-nav li:nth-child(4) a (bakgrunn: #51a2ec;)
   #btrix-nav li:nth-child(5) a (bakgrunn: #6e3cab;border-radius: 0 5px 5px 0;border-right: 1px solid #555;)

4. Gå nå til "Design"-fanen,
5. Legg til et nytt HTML/JavaScript-element og legg til koden:

   
   

   hjem https://2.bp.blogspot.com/-vcR6lUGsroY/Ug5ATZk8oZI/AAAAAAAA00/XENkFMaBgv0/s1600/btrix-home.png" />

   
   

   nedlasting https://2.bp.blogspot.com/-TcXder58ssQ/Ug5ASx8pT0I/AAAAAAAA0o/5UdA4_gLnV8/s1600/btrix-download.png" />

   
   

   MySql https://2.bp.blogspot.com/-umlQ7fKXobk/Ug5AT2bLnnI/AAAAAAAA08/yrQHl6qPMH8/s1600/btrix-mysql.png" />

   
   

   HTML https://2.bp.blogspot.com/-2-iy8RJ92V8/Ug5ASDCru-I/AAAAAAAA0c/GOBCPpZlA04/s1600/Btrix-html.png" />

   
   

   Kontakter https://4.bp.blogspot.com/-vsm9s0yQr9I/Ug5ASjqawnI/AAAAAAAAAA0k/rqb01AbGaFw/s1600/btrix-contact.png" />

6. Gjør de nødvendige endringene i koden du la til HTML/JavaScript-modulen:

• Endre #-ikonet til en lenke til ønsket bloggside (for eksempel tag-side, kontaktside, bloggstartside osv.)
• lenke til bildet uthevet i oransje, erstatt med en direkte lenke til bildeikonet for det tilsvarende elementet.
• Element uthevet i blått, dette er tittelen på css-menyen.

Flytte HTML-elementet? JavaScript på rett sted i "Design"-fanen på bloggen.

For menyen din kan du bruke ikoner, logoer og andre png-bilder med en gjennomsiktig bakgrunn. For å finne bildene du trenger, er det bedre å bruke ikonsøket. For eksempel, iconsearch.ru

Med oppdateringen skal alt på siden være adaptivt, inkludert en horisontal meny, som også skal være vennlig på alle skjermer. Hvor jeg foreslår å vurdere klassisk navigasjon, som er laget i ren stil, uten bruk av JS. Hvor stilen på sin egen måte kan passe for mange nettsteder, siden den er laget i en enkel standardform, men med tilstedeværelse av effekter. Også, hvis du ser fra mobilmedier, vil det automatisk vises en knapp på høyre side, der når du klikker, vil ikke hele bredden vises under kategoriene, men alt vil vises pent, på samme side, hvor fontknappene også vil vises være visuelt synlig.

Som du ser ble det brukt enkle HTML-lister her, alt for å vise alle listene som ligger under lenkene for å gå til en eller annen kategori. Konseptet er at det er fint å organisere navigasjonslisten i en horisontal posisjon, men når den er mobil blir den automatisk en vertikal posisjon, som vist på bildene som er festet til materialet.

Hva er i utgangspunktet tildelt hver forespørsel, hvor utvikleren selv kan endre til temaet, eller til de figurene som er mer tematisk egnet. Selve menyen er laget i mørkegrønt; denne nyansen er ganske enkelt valgt, som sjelden sees. Men alt kan endres radikalt ved å gå til CSS-stilen, og der kan du sette designstilen du trenger, og mest av alt, slik at den passer perfekt inn i selve grunnlaget for Internett-ressursen.

1 . Slik går det som standard eller når du går inn i portalen.

2 . Vi ser allerede fra en mobil enhet, men har ennå ikke kalt det opp under menyen.

3 . Her klikket vi og alle forespurte forespørsler ble vist.

La oss starte installasjonen:

ZORNET.RU

CSS

seksjon(
bredde:100%;
maks-bredde:1198px;
margin:0px auto;
display:tabell;
stilling:slektning;
}

Overskrift(
bredde:100%;
display:tabell;
bakgrunnsfarge: #175812;
margin-bottom:50px;
}

#kamtukagnpos(
flyte: venstre;
skriftstørrelse: 25px;
tekst-transform: store bokstaver;
farge: #fffab2;
font-vekt: 600;
polstring: 19,8px 0px;
}

#kamtukagnpos:hover (
tekstskygge: 0px 0px 6px rgba(255, 250, 250, 0,67);
}

Nav(
width:auto;
float:right;
}

Nav ul(
display:tabell;
float:right;
}

Navulli(
flyte:venstre;
}

Nav ul li:siste-barn(
padding-right:0px;
}

Navulli a (
farge: #e4f2ff;
skriftstørrelse: 19px;
polstring: 24px 19px;
display: inline-blokk;
text-shadow: 0 1px 0 #2e2f2e;
}

Nav ul li a:hover (
bakgrunnsfarge: #143a06;
farge: #fff9c8;
overgang: alle 0,7s lette 0s;
tekst-skygge: 0 1px 0 #282b28;
}

Nav ul li a:hover i (
farge: #fdf7c9;
overgang: alle 0,7s lette 0s;
tekst-skygge: 0 1px 0 #1c1d1c;
}

Nav ul li a i (
polstring-høyre: 9px;
farge: #f4faff;
overgang: alle 0,7s lette 0s;
tekst-skygge: 0 1px 0 #202120;
}

Navigasjonsmenyen ul(
display:tabell;
bredde:24px;
}

Navigasjonsmenysaita ul li(
bredde:100%;
høyde:3px;
bakgrunnsfarge:#e9f0f7;
margin-bottom:4px;
}

Navigation-menusaita ul li:last-child(
margin-bottom:0px;
}

Input, label(
display: ingen;
}

@media only-skjerm og (maks. bredde: 1440px)(
seksjon(
maks-bredde:95%;
}
}

@media only-skjerm og (maks. bredde: 980px)(
Overskrift(
polstring:20px 0px;
}

#kamtukagnpos(
polstring:0px;
}

Inndata(
posisjon: absolutt;
topp: -9999px;
venstre: -9999px;
bakgrunn: ingen;
}

Input:fous(
bakgrunn: ingen;
}

Merkelapp(
float:right;
polstring:8px 0px;
display:inline-block;
markør:peker;
}

Input:checked ~ nav(
display:block;
}

Nav(
display: ingen;
posisjon:absolutt;
høyre:0px;
topp:53px;
bakgrunnsfarge:#174810;
polstring:0px;
z-indeks:99;
}

Nav ul(
width:auto;
}

Navulli(
flyte:ingen;
polstring:0px;
bredde:100%;
display:tabell;
}

Navulli a(
farge:#f7f2f2;
font-size:15px;
polstring: 10px 20px;
display:block;
border-bottom: 1px solid rgba(204, 197, 197, 0.1);
}

Nav ul li a i(
farge:#f9f5d5;
polstring-høyre:13px;
}
}

@media only-skjerm og (maks. bredde: 480px) (
seksjon (maks. bredde: 90 %;)
}

@media only-skjerm og (maks. bredde: 360px) (
etikett (polstring: 5px 0px;)
#kamtukagnpos(font-size: 20px;)
nav(øverst:47px;)
}

Før du installerer, er det viktig å se på Demo-siden og virkelig vurdere hvordan alt fungerer, men faktisk er det ingenting slikt, bortsett fra at en effekt er lagt til navnet på ressursen, hvor alle skiltene når du holder musepekeren. gå under en skygge, som vises mye lysere.

Vertikal meny gjort på grunnlag av en liste, punktert eller nummerert. Som standard er alle listeelementer arrangert vertikalt, og opptar hele bredden av containerelementet, som igjen opptar hele bredden av containerblokken.

Listeelementer kan inneholde ikke bare lenker, men også overskrifter, ikoner og bilder. Ved å bruke den vertikale menyen kan du lage kommentarer på nettstedet, en liste over kategorier osv.

1. Vertikal meny med overskrift

Enkelt elegant designalternativ. Egnet for stylingkategorier på en nettside. Når du holder musepekeren, endrer listeelementet koblingsfargen.

* (boksstørrelse: border-box; margin: 0;).widget (polstring: 20px 30px; bakgrunn: hvit; font-family: "Roboto", sans-serif; ) .widget-title (teksttransform: store bokstaver ; bokstavavstand: 2px; farge: #222; font-size: 16px; polstring-venstre: 15px; margin-bottom: 15px; kantlinje-venstre: 2px solid #b99d61; ) .widget-list ( utfylling: 0; liste -style: none; ) .widget-list a:before ( innhold: "\2014"; margin-right: 14px; ) .widget-list a ( tekstdekorasjon: ingen; disposisjon: ingen; display: blokk; utfylling: 6px 0; bokstavavstand: 1px; font-weight: 300; color: #444; overgang: .3s lineær; ) .widget-list a:hover (farge: #b99d61;)

2. Vertikal meny i stil med "t-banekart"

En interessant løsning for å designe en vertikal meny; det er mulig å legge til nestede menyer. "Metrolinje" er venstre kant av listen, markører genereres før hver lenke.

• Listeelement
  • Nestet listeelement
  • Nestet listeelement
  • Nestet listeelement
• Listeelement
• Listeelement

.metro ( listestil: ingen; utfylling: 0; margin: 30px 0 0 50px; kantlinje: 5px solid #DAE4F1; ) .metro li (linjehøyde: 2em;) .metro ul ( margin: 20px 0 20px 15px; polstring: 0; kantlinje: ingen; listestil: ingen; ) .metro ul:before, .metro ul:after ( innhold: ""; bredde: 5px; høyde: 28px; bakgrunn: #DAE4F1; posisjon: relativ ; display: blokk; venstre: -9px; ) .metro ul:before ( transform: rotate(-45deg); margin-top: -15px; ) .metro ul:after ( transform: rotate(45deg); bottom: -20px ; ) .metro ul li (kant-venstre: 5px solid #DAE4F1;) .metro ul li:first-child ( margin-top: -5px; padding-top: 5px; ) .metro ul li:last-child ( padding -bottom: 9px; margin-bottom: -25px; ) .metro a ( tekst-dekorasjon: ingen; display: blokk; font-family: "Noto Sans", sans-serif; farge: #4A4B4D; ) .metro a: før ( innhold: ""; display: inline-block; bakgrunn: #CA682D; bredde: 12px; høyde: 12px; venstre: -9px; posisjon: relativ; kantradius: 50 %; margin-høyre: .5em; )

3. Vertikal meny med sveveeffekter

Ikonet og bakgrunnsfyllet som vises når du holder musepekeren over et listeelement vil bidra til å diversifisere utformingen av vertikale menyelementer.

.category-wrap (polstring: 15px; bakgrunn: hvit; bredde: 200px; box-shadow: 2px 2px 8px rgba(0,0,0,.1); font-family: "Helvetica Neue", Helvetica, Arial, sans -serif; ) .category-wrap h3 ( font-size: 16px; farge: rgba(0,0,0,.6); margin: 0 0 10px; polstring: 0 5px; plassering: relativ; ) .category-wrap h3:etter ( innhold: ""; bredde: 6px; høyde: 6px; bakgrunn: #80C8A0; posisjon: absolutt; høyre: 5px; bunn: 2px; box-shadow: -8px -8px #80C8A0, 0 -8px #80C8A0 , -8px 0 #80C8A0; ) .category-wrap ul ( listestil: ingen; margin: 0; polstring: 0; border-top: 1px solid rgba(0,0,0,.3); ) .category- wrap li (margin: 12px 0 0 0px;) .category-wrap a (tekstdekorasjon: ingen; display: blokk; skriftstørrelse: 13px; farge: rgba(0,0,0,.6); polstring: 5px ; posisjon: relativ; overgang: .3s lineær; ) .category-wrap a:after ( innhold:"\f18e"; font-family: FontAwesome; posisjon: absolutt; høyre: 5px; farge: hvit; overgang: .2s lineær ; ) .category-wrap a:hover ( bakgrunn: #80C8A0; farge: hvit; )

4. Vertikal meny med ikoner

Menyikoner skaper et visuelt anker, som utfyller den verbale beskrivelsen av hver kategori. For å vise ikoner må du koble til. Du kan også bruke en hvilken som helst annen skrifttype eller bildeikoner.

* (boksstørrelse: border-box; margin: 0;).widget ( padding: 20px; border: 5px solid #f1f1f1; background: #fff; border-radius: 5px; font-family: "Roboto", sans- serif; ) .widget h3 ( margin-bottom: 20px; text-align: center; font-size: 24px; font-weight: normal; color: #424949; ) .widget ul ( margin: 0; padding: 0; list -stil: ingen; bredde: 250px; ) .widget li ( border-bottom: 1px solid #eaeaea; padding-bottom: 15px; margin-bottom: 15px; ) .widget li:last-child ( border-bottom: none; margin-bottom: 0; padding-bottom: 0; ) .widget a ( tekst-dekorasjon: ingen; farge: #616a6b; display: inline-block; ) .widget li:before ( font-family: FontAwesome; font-size : 20px; vertical-align:bottom; color: #dd3333; margin-right: 14px; ) .widget li:nth-child(1):before (content:"\f1fc";) .widget li:nth-child( 2):før (innhold:"\f0d0";) .widget li:nth-child(3):before (innhold:"\f0cd";) .widget li:nth-child(4):before (innhold:" \f028";).widget li:nth-child(5):before (innhold:"\f03d";)

5. Vertikal meny med bilder

Dette eksemplet kan brukes til å designe blokker med nye produkter, lignende produkter, etc. nettbutikkens hjemmeside.

Jpeg">