Vertikálne menu s css ikonami. Responzívne horizontálne menu s čistým CSS3

Ako vidíte, tu boli použité jednoduché HTML zoznamy, všetko za účelom zobrazenia všetkých zoznamov, ktoré sú pod odkazmi na prechod do jednej alebo druhej kategórie. Koncept je taký, že je pekné usporiadať navigačný zoznam v horizontálnej polohe, ale keď je mobilný, automaticky sa zmení na vertikálnu, ako je znázornené na obrázkoch, ktoré sú pripojené k materiálu.

Čo je na začiatku priradené ku každej požiadavke, kde sa samotný vývojár môže zmeniť na tému alebo na tie figúrky, ktoré sú tematicky vhodnejšie. Samotné menu je vytvorené v tmavozelenej farbe tento odtieň je jednoducho zvolený, čo sa vidí len málokedy. Všetko sa však dá radikálne zmeniť prechodom na štýl CSS a tam si môžete nastaviť štýl dizajnu, ktorý potrebujete, a predovšetkým tak, aby dokonale zapadol do samotného základu internetového zdroja.

1 . Takto to prebieha štandardne alebo pri vstupe na portál.

2 . Už sa pozeráme z mobilného zariadenia, ale ešte sme ho nevyvolali v ponuke.

3 . Tu sme klikli a zobrazili sa všetky požadované dopyty.

Začnime s inštaláciou:

sekcia(
šírka: 100 %;
max-width:1198px;
margin:0px auto;
display:tabuľka;
poloha:relatívna;
}

Hlavička(
šírka: 100 %;
display:tabuľka;
farba pozadia: #175812;
margin-bottom:50px;
}

#kamtukagnpos(
plavák: vľavo;
veľkosť písma: 25px;
text-transform: veľké písmená;
farba: #fffab2;
váha písma: 600;
padding: 19,8px 0px;
}

#kamtukagnpos:vznášaj sa (
text-shadow: 0px 0px 6px rgba(255, 250, 250, 0,67);
}

Nav(
šírka:auto;
float:right;
}

Nav ul(
display:tabuľka;
float:right;
}

Navulli(
float:left;
}

Nav ul li:posledné dieťa(
padding-right:0px;
}

Navulli a (
farba: #e4f2ff;
veľkosť písma: 19px;
výplň: 24px 19px;
displej: inline-block;
text-shadow: 0 1px 0 #2e2f2e;
}

Nav ul li a:hover (
farba pozadia: #143a06;
farba: #fff9c8;
prechod: všetkých 0,7 s uvoľnenie 0 s;
text-shadow: 0 1px 0 #282b28;
}

Nav ul li a:hover i (
farba: #fdf7c9;
prechod: všetkých 0,7 s uvoľnenie 0 s;
text-shadow: 0 1px 0 #1c1d1c;
}

Nav ul li a i (
padding-right: 9px;
farba: #f4faff;
prechod: všetkých 0,7 s uvoľnenie 0 s;
text-shadow: 0 1px 0 #202120;
}

Navigácia-menusaita ul(
display:tabuľka;
šírka: 24px;
}

Navigácia-menusaita ul li(
šírka: 100 %;
výška:3px;
farba pozadia:#e9f0f7;
margin-bottom:4px;
}

Navigácia-menusaita ul li:last-child(
margin-bottom:0px;
}

Vstup, štítok(
displej:žiadny;
}

@media only obrazovka a (maximálna šírka: 1440px)(
sekcia(
maximálna šírka: 95 %;
}
}

@media only obrazovka a (maximálna šírka: 980px)(
hlavička(
padding:20px 0px;
}

#kamtukagnpos(
padding:0px;
}

Vstup(
pozícia: absolútna;
hore: -9999px;
vľavo: -9999px;
pozadie:žiadne;
}

Vstup: fous(
pozadie:žiadne;
}

Štítok(
float:right;
padding:8px 0px;
displej:inline-block;
kurzor:ukazatel;
}

Input:checked ~ nav(
displej:blok;
}

Nav(
displej:žiadny;
poloha:absolútna;
vpravo:0px;
top:53px;
farba pozadia:#174810;
padding:0px;
z-index:99;
}

Nav ul(
šírka:auto;
}

Navulli(
float:none;
padding:0px;
šírka: 100 %;
display:tabuľka;
}

Navulli a(
farba:#f7f2f2;
font-size:15px;
padding:10px 20px;
displej:blok;
border-bottom: 1px solid rgba(204, 197, 197, 0,1);
}

Nav ul li a i(
farba:#f9f5d5;
padding-right:13px;
}
}

@media only obrazovka a (maximálna šírka: 480px) (
sekcia (maximálna šírka: 90 %;)
}

@media only obrazovka a (maximálna šírka: 360px) (
label(padding:5px 0px;)
#kamtukagnpos(veľkosť písma: 20px;)
nav(top:47px;)
}

Toto je zoznam odkazov vedúcich na rôzne stránky na webe. Vyzerá dobre, keď je zoznam odkazov namiesto jednoduchých značiek doplnený o ikony a nie je tu vôbec potrebné používať grafiku. Prečo vytvárať zbytočné databázové dotazy?

HTML kód

Medzi značkami li napíšte link a(# dočasný pahýľ) s dvoma blokovými prvkami vo vnútri rozpätie. V prvom rozpätí - tag i s triedou ikon, ktorej kód bol skopírovaný z lokality Font úžasné. V druhom rozpätie- názov odkazu, teda text.

• 
  
  
  Bicykle
  
  


• 
  
  
  Motocykle
  
  


• 
  
  
  Autobusy
  
  


• 
  
  
  Autá
  
  


• 
  
  
  Vrtuľníky
  
  

Po prepojení medzi značkami hlavu písmo ikony Font úžasné- menu vyzerá takto.

CSS štýly

Na začiatok Písmo Google Ak je vertikálna ponuka v ruštine, vyberieme atraktívne písmo, ktoré podporuje cyriliku.

Skopírujte kód pripojenia vybraného písma a prilepte ho na vrch CSS súbor.

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

Vo selektore telo napíšte názov vybraného písma a nastavte jeho veľkosť.

Telo (
okraj: 0;
výplň: 0;
rodina fontov: "Marck Script", bezpätkové;
veľkosť písma: 20px;
}

Umiestňujeme našu ponuku vzhľadom na okno prehliadača, ustupujeme zhora o 10 % a zľava o 20 %. Samozrejme, tieto čísla sú prevzaté zo stropu, budete mať svoje vlastné.

Ul(
pozícia: absolútna;
horná časť: 10 %;
vľavo: 20 %;
}

Šírku ponuky fixujeme na 200 pixelov.

Šírka: 200px;

Dosiahli sme položky ponuky zoznamu. Odstraňovanie značiek z položiek li.

Ulli (
štýl zoznamu: žiadny;
}

V hornej a dolnej časti označujeme rámčeky, ktoré oddeľujú položky ponuky od seba.

Horný okraj: 1px plný #131313;
border-bottom: 1px solid #131313;
okraj: -1px 0;

Medzi ikonami a názvami odkazov nie je dostatok bočných rámikov a oddeľovačov.

Nakreslite správny rám pre značku a, čo je vložený prvok, a okolo vloženého prvku nemôžete vytvoriť orámovanie. Preto zobrazujeme značku a blokový prvok.

Ulli a (
displej: blok;
}

Teraz môžete nastaviť rám, odstrániť podčiarknutie odkazov a určiť farbu odkazov.

Okraj vpravo: 1px plný #131313;
text-dekorácia: žiadna;
farba: #131313;

Ľavý rám ešte chýba.

Tagy rozpätie- blokové prvky, ktoré budú obsahovať text, tzv rozpätie zobraziť ho ako prvok inline bloku.

Ulli a span (
poloha: relatívna;
displej: inline-block;
}

Potrebujeme ako prvé rozpätie, vo vnútri ktorého bude ikona, nastavte štýly, ktoré sa líšia od druhého rozpätie. Na tento účel prvý rozpätie označujeme pseudotriedou - span:n-té dieťa(1) a upravte ho samostatne. Nastavte pravý a ľavý rám a šírku.

Ul li a span:nth-child(1) (
šírka: 30px;
border-left: 1px solid #131313;
border-right: 1px solid #131313;
}

Ikony budú umiestnené v strede s okrajmi 10 pixelov vo všetkých smeroch.

Zarovnanie textu: stred;
výplň: 10px;

Ikony budú mať tmavú farbu, veľkosť 20 pixelov, na červenom pozadí.

Farba: #131313;
veľkosť písma: 20px;
pozadie: #f44336;

V druhej pseudotriede stačí nastaviť polia.

Ul li a span:nth-child(2) (
výplň: 10px;
}

Teraz vertikálne menu nadobudol konečnú podobu. Pozrite si celý kód a výsledok.

Vertikálne menu urobené na základe zoznamu s odrážkami alebo očíslovaním. V predvolenom nastavení sú všetky prvky zoznamu usporiadané vertikálne, pričom zaberajú celú šírku prvku kontajnera, ktorý zase zaberá celú šírku jeho bloku kontajnera.

Prvky zoznamu môžu obsahovať nielen odkazy, ale aj nadpisy, ikony a obrázky. Pomocou vertikálneho menu môžete vytvárať komentáre na stránke, zoznam kategórií atď.

1. Vertikálne menu s hlavičkou

Jednoduchá možnosť elegantného dizajnu. Vhodné na úpravu kategórií na webovej stránke. Po umiestnení kurzora myši zmení položka zoznamu farbu odkazu.

2. Vertikálne menu v štýle „mapy metra“

Zaujímavé riešenie pre návrh vertikálneho menu je možné pridať vnorené menu; „Linka metra“ je ľavý okraj zoznamu, značky sa generujú pred každým odkazom.

• Položka zoznamu
  • Prvok vnoreného zoznamu
  • Prvok vnoreného zoznamu
  • Prvok vnoreného zoznamu
• Položka zoznamu
• Položka zoznamu

3. Vertikálne menu s efektmi vznášania

Ikona a výplň pozadia, ktoré sa objavia, keď umiestnite kurzor myši na položku zoznamu, pomôžu diverzifikovať dizajn vertikálnych prvkov ponuky.

farba: biela; )

4. Vertikálne menu s ikonami

* (veľkosť rámčeka: 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 -style: none: 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 ( text-decoration: none; color: #616a6b; display: inline-block; ) .widget li:before ( font-family: FontAwesome; font-size : 20px; vertikálne zarovnanie:dolná farba: #dd3333; okraj-vpravo: 14px; f0cd";) .widget li:nth-child(4):before (content:" \f028";).widget li:nth-child(5):before (content:"\f03d";)

5. Vertikálne menu s obrázkami

Tento príklad možno použiť na navrhovanie blokov s novými produktmi, podobnými produktmi atď. webovú stránku internetového obchodu.