Vertikalus meniu su css piktogramomis. Reaguojantis horizontalus meniu su grynu CSS3

Kaip matote, čia buvo naudojami paprasti HTML sąrašai, viskas tam, kad būtų rodomi visi sąrašai, esantys po nuorodomis, kad patektumėte į vieną ar kitą kategoriją. Koncepcija ta, kad naršymo sąrašą malonu tvarkyti horizontalioje padėtyje, tačiau mobiliajame telefone jis automatiškai taps vertikalia padėtimi, kaip parodyta paveikslėliuose, kurie pridedami prie medžiagos.

Kas iš pradžių priskiriama kiekvienai užklausai, kur pats kūrėjas gali pakeisti temą, ar tas figūras, kurios labiau tinka tematikai. Pats meniu sukurtas tamsiai žalia spalva, tiesiog pasirenkamas šis atspalvis, kuris retai matomas. Tačiau viską galima radikaliai pakeisti, pereinant prie CSS stiliaus, ir ten galite nustatyti jums reikalingą dizaino stilių, o svarbiausia, kad jis puikiai tilptų į patį interneto šaltinio pagrindą.

1 . Taip vyksta pagal nutylėjimą arba įeinant į portalą.

2 . Mes jau žiūrime iš mobiliojo įrenginio, bet dar nesame jo iškvietę meniu.

3 . Čia spustelėjome ir buvo parodytos visos prašomos užklausos.

Pradėkime diegimą:

skyrius (
plotis: 100%;
maksimalus plotis: 1198 pikseliai;
paraštė: 0px automatinis;
ekranas: stalas;
padėtis:santykinė;
}

Antraštė (
plotis: 100%;
ekranas: stalas;
fono spalva: #175812;
paraštė-apačia: 50 pikselių;
}

#kamtukagnpos(
plūdė: kairė;
šrifto dydis: 25 pikseliai;
teksto transformavimas: didžiosios raidės;
spalva: #fffab2;
šrifto svoris: 600;
pamušalas: 19,8 tšk. 0 tšk.;
}

#kamtukagnpos:hover (
teksto šešėlis: 0px 0px 6px rgba(255, 250, 250, 0,67);
}

Nav(
plotis:automatinis;
plūdė: dešinė;
}

Nav ul(
ekranas: stalas;
plūdė: dešinė;
}

Navulli(
plūdė:kairėje;
}

Nav ul li:paskutinis vaikas(
padding-right:0px;
}

Navulli a (
spalva: #e4f2ff;
šrifto dydis: 19 pikselių;
užpildymas: 24 pikseliai 19 pikseliai;
ekranas: eilutinis blokas;
teksto šešėlis: 0 1px 0 #2e2f2e;
}

Nav ul li a:hover (
fono spalva: #143a06;
spalva: #fff9c8;
perėjimas: visi 0,7 s lengvina 0 s;
teksto šešėlis: 0 1px 0 #282b28;
}

Nav ul li a:hover i (
spalva: #fdf7c9;
perėjimas: visi 0,7 s lengvina 0 s;
teksto šešėlis: 0 1px 0 #1c1d1c;
}

Nav ul li a i (
užpildymas dešinėje: 9 pikseliai;
spalva: #f4faff;
perėjimas: visi 0,7 s lengvina 0 s;
tekstas-šešėlis: 0 1px 0 #202120;
}

Navigacija-menusaita ul(
ekranas: stalas;
plotis: 24px;
}

Navigation-menusaita ul li(
plotis: 100%;
aukštis: 3px;
fono spalva:#e9f0f7;
paraštė-apačia: 4 pikseliai;
}

Navigation-menusaita ul li:last-child(
paraštė-apačia:0px;
}

Įvestis, etiketė (
ekranas: nėra;
}

@media tik ekranas ir (maks. plotis: 1440 piks.) (
skyrius (
maksimalus plotis: 95%;
}
}

@media tik ekranas ir (maks. plotis: 980 piks.)(
header(
padding: 20px 0px;
}

#kamtukagnpos(
užpildymas:0px;
}

Input(
padėtis: absoliuti;
viršuje: -9999px;
kairėje: -9999px;
background:none;
}

Įvestis:fous(
background:none;
}

Etiketė (
plūdė: dešinė;
užpildymas: 8px 0px;
ekranas: inline-block;
žymeklis:žymiklis;
}

Įvestis: pažymėta ~ nav(
ekranas: blokas;
}

Nav(
ekranas: nėra;
padėtis: absoliutus;
dešinėje:0px;
viršuje: 53px;
background-color:#174810;
užpildymas:0px;
z indeksas: 99;
}

Nav ul(
plotis:automatinis;
}

Navulli(
float:nėra;
užpildymas:0px;
plotis: 100%;
ekranas: stalas;
}

Navulli (
spalva: # f7f2f2;
šrifto dydis: 15 pikselių;
užpildymas:10px 20px;
ekranas: blokas;
kraštinė-apačia: 1px solid rgba(204, 197, 197, 0,1);
}

Nav ul li a i (
spalva: # f9f5d5;
užpildymas dešinėje: 13 pikselių;
}
}

@media tik ekranas ir (maks. plotis: 480 piks.) (
sekcija (maksimalus plotis: 90 %;)
}

@media tik ekranas ir (maks. plotis: 360 piks.) (
etiketė (padding: 5px 0px;)
#kamtukagnpos(šrifto dydis: 20 pikselių;)
nav(viršus:47px;)
}

Tai nuorodų, nukreipiančių į skirtingus svetainės puslapius, sąrašas. Gerai atrodo, kai nuorodų sąrašas, o ne paprasti žymekliai, papildytas piktogramomis ir čia visai nebūtina naudoti grafikos. Kam kurti nereikalingas duomenų bazės užklausas?

HTML kodas

Tarp etikečių li parašyk nuorodą a(# laikinas šaknis) su dviem bloko elementais viduje span. Pirmajame intervale - žyma i su piktogramų klase, kurios kodas buvo nukopijuotas iš svetainės Šriftas Nuostabus. Antroje span- nuorodos pavadinimas, tai yra tekstas.

• 
  
  
  Dviračiai
  
  


• 
  
  
  Motociklai
  
  


• 
  
  
  Autobusai
  
  


• 
  
  
  Automobiliai
  
  


• 
  
  
  Sraigtasparniai
  
  

Sujungus tarp žymų galva piktogramos šriftas Šriftas Nuostabus- meniu atrodo taip.

CSS stiliai

Norėdami pradėti nuo „Google“ šriftas Jei vertikalus meniu yra rusų kalba, pasirinksime patrauklų šriftą, palaikantį kirilicą.

Nukopijuokite pasirinkto šrifto ryšio kodą ir įklijuokite jį viršuje CSS failą.

@import url("https://fonts.googleapis.com/css?family=Marck+Script");

Rinkiklyje kūno parašykite pasirinkto šrifto pavadinimą ir nustatykite jo dydį.

Kūnas (
paraštė: 0;
paminkštinimas: 0;
šriftų šeima: "Marck Script", sans-serif;
šrifto dydis: 20 pikselių;
}

Mes išdėstome savo meniu naršyklės lango atžvilgiu, atsitraukdami nuo viršaus 10%, o iš kairės - 20%. Žinoma, šie skaičiai paimti iš lubų, jūs turėsite savo.

Ul (
padėtis: absoliuti;
viršuje: 10%;
liko: 20%;
}

Mes nustatome meniu plotį 200 pikselių.

Plotis: 200 pikselių;

Mes pasiekėme sąrašo meniu elementus. Žymeklių pašalinimas nuo daiktų li.

Ulli (
sąrašo stilius: nėra;
}

Viršuje ir apačioje skiriame rėmelius, atskiriančius meniu elementus vienas nuo kito.

Border-top: 1px solid #131313;
kraštinė-apačia: 1px solid #131313;
paraštė: -1px 0;

Nepakanka šoninių rėmelių ir skyriklių tarp piktogramų ir nuorodų pavadinimų.

Nupieškite tinkamą žymos rėmelį a, kuris yra įterptinis elementas, ir jūs negalite sukurti kraštinės aplink įterptinį elementą. Todėl rodome žymą a bloko elementas.

Ulli a (
ekranas: blokas;
}

Dabar galite nustatyti rėmelį, pašalinti nuorodų pabraukimą ir nurodyti nuorodų spalvą.

Kraštinė-dešinė: 1px solid #131313;
tekstas-dekoravimas: nėra;
spalva: #131313;

Trūksta kairiojo rėmelio.

Žymos span- blokuoti elementus, kuriuose bus tekstas, taigi span rodyti jį kaip eilutinį bloko elementą.

Ulli a span (
padėtis: santykinė;
ekranas: eilutinis blokas;
}

Mums reikia pirmojo span, kurio viduje bus piktograma, nustatykite stilius, kurie skiriasi nuo antrojo span. Šiuo tikslu pirmasis spanžymėti pseudo klase - span:nth-child (1) ir stilizuokite jį atskirai. Nustatykite dešinįjį ir kairįjį rėmą ir plotį.

Ul li a span:nth-child(1) (
plotis: 30px;
border-left: 1px solid #131313;
kraštinė-dešinė: 1px solid #131313;
}

Piktogramos bus dedamos per vidurį su 10 pikselių paraštėmis visomis kryptimis.

Teksto lygiavimas: centre;
pamušalas: 10px;

Piktogramos bus tamsios spalvos, 20 pikselių dydžio, raudoname fone.

Spalva: #131313;
šrifto dydis: 20 pikselių;
fonas: #f44336;

Antroje pseudo klasėje reikia nustatyti tik laukus.

Ul li a span:nth-child(2) (
pamušalas: 10px;
}

Dabar vertikalus meniuįgavo galutinę formą. Peržiūrėkite visą kodą ir rezultatą.

Vertikalus meniu atliekami sąrašo pagrindu, su ženkleliais arba sunumeruoti. Pagal numatytuosius nustatymus visi sąrašo elementai yra išdėstyti vertikaliai, užimdami visą konteinerio elemento plotį, o šis savo ruožtu užima visą konteinerio bloko plotį.

Sąrašo elementuose gali būti ne tik nuorodų, bet ir antraščių, piktogramų ir paveikslėlių. Naudodami vertikalųjį meniu galite kurti komentarus svetainėje, kategorijų sąrašą ir kt.

1. Vertikalus meniu su antrašte

Paprastas elegantiško dizaino variantas. Tinka stiliaus kategorijoms svetainėje. Užvedus pelės žymeklį, sąrašo elementas pakeičia nuorodos spalvą.

2. Vertikalus meniu „metro žemėlapio“ stiliumi

Įdomus sprendimas kuriant vertikalų meniu, galima įtraukti įdėtus meniu. „Metro linija“ yra kairioji sąrašo kraštinė, žymekliai generuojami prieš kiekvieną nuorodą.

• Sąrašo elementas
  • Įdėtas sąrašo elementas
  • Įdėtas sąrašo elementas
  • Įdėtas sąrašo elementas
• Sąrašo elementas
• Sąrašo elementas

3. Vertikalus meniu su užvedimo efektais

Piktograma ir fono užpildymas, atsirandantys užvedus pelės žymeklį virš sąrašo elemento, padės paįvairinti vertikalių meniu elementų dizainą.

spalva: balta; )

4. Vertikalus meniu su piktogramomis

* (dėžutės dydis: rėmelis; paraštė: 0;). Valdiklis ( užpildymas: 20 piks.; kraštinė: 5 piks. vientisas #f1f1f1; fonas: #fff; kraštinės spindulys: 5 piks.; šriftų šeima: „Roboto“, sans- serif; ) .widget h3 ( paraštės apačia: 20 pikselių; teksto lygiavimas: centre; šrifto dydis: 24 piks. -stilius: plotis: 250 pikselių ) .valdiklis li ( kraštinė-apačia: 1px solid #eaeaea; padding-bottom: 15px; margin-down: 15px; ) .widget li: paskutinis vaikas (bordas-apačia: nėra; paraštė-apačia: 0; užpildymas apačioje: 0 : 20 pikselių vertikaliai suderinti: spalva: #dd3333: prieš (turinys: "\f0d0";) f0cd";) .valdiklis li:nth-child(4):prieš (turinys:" \f028";). Valdiklis li:nth-child(5):prieš (turinys:"\f03d";)

5. Vertikalus meniu su paveikslėliais

Šis pavyzdys gali būti naudojamas projektuojant blokus su naujais produktais, panašiais gaminiais ir pan. internetinės parduotuvės svetainė.