Vertikální nabídka s ikonami css. Responzivní horizontální menu s čistým CSS3

Jak vidíte, byly zde použity jednoduché HTML seznamy, vše za účelem zobrazení všech seznamů, které jsou pod odkazy pro přechod do jedné nebo druhé kategorie. Koncept spočívá v tom, že je hezké uspořádat navigační seznam ve vodorovné poloze, ale když je mobilní, automaticky se změní na vertikální, jak je znázorněno na obrázcích připojených k materiálu.

Co je zpočátku přiřazeno ke každému požadavku, kde se může vývojář sám změnit na téma, nebo na ty figurky, které jsou tematicky vhodnější. Samotné menu je vytvořeno v tmavě zelené tento odstín je prostě zvolen, což se málokdy vidí. Vše lze ale radikálně změnit přechodem na styl CSS a tam si můžete nastavit styl designu, který potřebujete, a především tak, aby dokonale zapadl do samotného základu internetového zdroje.

1 . Takto to probíhá standardně nebo při vstupu na portál.

2 . Již se díváme z mobilního zařízení, ale ještě jsme jej nevyvolali v nabídce.

3 . Zde jsme klikli a zobrazily se všechny požadované dotazy.

Začněme instalaci:

sekce(
šířka:100%;
max-width:1198px;
margin:0px auto;
display:table;
poloha:relativní;
}

záhlaví(
šířka:100%;
display:table;
barva pozadí: #175812;
margin-bottom:50px;
}

#kamtukagnpos(
plovák: vlevo;
velikost písma: 25px;
text-transform: velká písmena;
barva: #fffab2;
váha písma: 600;
odsazení: 19,8px 0px;
}

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

Nav(
šířka:auto;
plovák:pravý;
}

Nav ul(
display:table;
plovák:pravý;
}

Navulli(
float:left;
}

Nav ul li:poslední dítě(
padding-right:0px;
}

Navulli a (
barva: #e4f2ff;
velikost písma: 19px;
odsazení: 24px 19px;
displej: inline-block;
text-shadow: 0 1px 0 #2e2f2e;
}

Nav ul li a:hover (
barva pozadí: #143a06;
barva: #fff9c8;
přechod: všech 0,7s náběh 0s;
text-shadow: 0 1px 0 #282b28;
}

Nav ul li a:hover i (
barva: #fdf7c9;
přechod: všech 0,7s náběh 0s;
text-shadow: 0 1px 0 #1c1d1c;
}

Nav ul li a i (
padding-right: 9px;
barva: #f4faff;
přechod: všech 0,7s náběh 0s;
text-shadow: 0 1px 0 #202120;
}

Navigace-menusaita ul(
display:table;
šířka:24px;
}

Navigace-menusaita ul li(
šířka:100%;
výška:3px;
background-color:#e9f0f7;
margin-bottom:4px;
}

Navigační-menusaita ul li:poslední-dítě(
margin-bottom:0px;
}

Vstup, štítek(
displej:žádný;
}

@media only obrazovka a (max. šířka: 1440px)(
sekce(
max. šířka: 95 %;
}
}

@media only obrazovka a (maximální šířka: 980px)(
záhlaví(
padding:20px 0px;
}

#kamtukagnpos(
padding:0px;
}

Vstup(
pozice: absolutní;
horní: -9999px;
vlevo: -9999px;
pozadí:žádné;
}

Vstup: fous(
pozadí:žádné;
}

Označení(
plovák:pravý;
padding:8px 0px;
displej:inline-block;
kurzor:ukazatel;
}

Input:checked ~ nav(
displej:blok;
}

Nav(
displej:žádný;
poloha:absolutní;
vpravo:0px;
top:53px;
background-color:#174810;
padding:0px;
z-index:99;
}

Nav ul(
šířka:auto;
}

Navulli(
float:none;
padding:0px;
šířka:100%;
display:table;
}

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

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

@media only obrazovka a (max. šířka: 480px) (
sekce (max. šířka: 90 %;)
}

@media only obrazovka a (max. šířka: 360px) (
label(padding:5px 0px;)
#kamtukagnpos(velikost písma: 20px;)
nav(top:47px;)
}

Toto je seznam odkazů vedoucích na různé stránky na webu. Dobře vypadá, když je seznam odkazů místo jednoduchých značek doplněn o ikony a není zde vůbec nutné používat grafiku. Proč vytvářet zbytečné databázové dotazy?

HTML kód

Mezi tagy li napište odkaz A(# dočasný útržek) se dvěma blokovými prvky uvnitř rozpětí. V prvním rozpětí - tag i s třídou ikon, jejíž kód byl zkopírován z webu Písmo úžasné. Ve druhém rozpětí- název odkazu, tedy text.

• 
  
  
  jízdní kola
  
  


• 
  
  
  Motocykly
  
  


• 
  
  
  Autobusy
  
  


• 
  
  
  Auta
  
  


• 
  
  
  Vrtulníky
  
  

Po propojení mezi tagy hlava písmo ikony Písmo úžasné- menu vypadá takto.

CSS styly

Pro začátek Písmo Google Pokud je vertikální nabídka v ruštině, vybereme atraktivní písmo, které podporuje azbuku.

Zkopírujte kód připojení vybraného písma a vložte jej nahoru CSS soubor.

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

Ve voliči tělo napište název vybraného písma a nastavte jeho velikost.

Tělo (
okraj: 0;
výplň: 0;
font-family: "Marck Script", bezpatkové;
velikost písma: 20px;
}

Umístíme naši nabídku vzhledem k oknu prohlížeče, ustoupíme shora o 10 % a zleva o 20 %. Tato čísla jsou samozřejmě převzata ze stropu, budete mít vlastní.

ul(
pozice: absolutní;
horní: 10 %;
vlevo: 20 %;
}

Šířku nabídky zafixujeme na 200 pixelů.

Šířka: 200px;

Dosáhli jsme položek nabídky seznamu. Odstraňování značek z položek li.

Ulli (
styl seznamu: žádný;
}

Nahoře a dole označujeme rámečky, které oddělují položky nabídky od sebe.

Border-top: 1px solid #131313;
border-bottom: 1px solid #131313;
okraj: -1px 0;

Mezi ikonami a názvy odkazů není dostatek postranních rámečků a oddělovačů.

Nakreslete správný rám pro značku A, což je vložený prvek, a kolem vloženého prvku nemůžete vytvořit ohraničení. Proto zobrazíme značku A blokový prvek.

Ulli a (
displej: blok;
}

Nyní můžete nastavit rámeček, odstranit podtržení odkazů a určit barvu odkazů.

Okraj vpravo: 1px plný #131313;
text-dekorace: žádná;
barva: #131313;

Levý rám stále chybí.

Tagy rozpětí- blokové prvky, které budou obsahovat text, tak rozpětí zobrazit jej jako prvek inline bloku.

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

Potřebujeme pro první rozpětí, uvnitř kterého bude ikona, nastavte styly, které se liší od druhého rozpětí. Za tímto účelem první rozpětí označovat pseudotřídou - span:n-té dítě(1) a stylizujte jej samostatně. Nastavte pravý a levý rám a šířku.

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

Ikony budou umístěny uprostřed s okraji 10 pixelů ve všech směrech.

Zarovnání textu: na střed;
odsazení: 10px;

Ikony budou tmavé barvy o velikosti 20 pixelů na červeném pozadí.

Barva: #131313;
velikost písma: 20px;
pozadí: #f44336;

V druhé pseudotřídě stačí nastavit pole.

Ul li a span:nth-child(2) (
odsazení: 10px;
}

Teď vertikální menu nabyla konečné podoby. Podívejte se na celý kód a výsledek.

Vertikální menu provedené na základě seznamu s odrážkami nebo číslováním. Ve výchozím nastavení jsou všechny prvky seznamu uspořádány svisle a zabírají celou šířku prvku kontejneru, který zase zabírá celou šířku jeho bloku kontejneru.

Prvky seznamu mohou obsahovat nejen odkazy, ale také nadpisy, ikony a obrázky. Pomocí vertikální nabídky můžete vytvářet komentáře na webu, seznam kategorií atd.

1. Vertikální menu se záhlavím

Možnost jednoduchého elegantního designu. Vhodné pro styling kategorií na webu. Po umístění kurzoru změní položka seznamu barvu odkazu.

2. Vertikální menu ve stylu „mapy metra“

Zajímavým řešením pro návrh vertikálního menu je možnost přidávat vnořené menu; „linka metra“ je levý okraj seznamu, značky jsou generovány před každým odkazem.

• Položka seznamu
  • Vnořený prvek seznamu
  • Vnořený prvek seznamu
  • Vnořený prvek seznamu
• Položka seznamu
• Položka seznamu

3. Vertikální nabídka s efekty hoveru

Ikona a výplň pozadí, které se objeví, když umístíte kurzor na položku seznamu, pomohou diverzifikovat design vertikálních prvků nabídky.

barva: bílá; )

4. Vertikální menu s ikonami

* (velikost rámečku: border-box; margin: 0;).widget ( padding: 20px; border: 5px solid #f1f1f1; background: #fff; border-radius: 5px; font-family: "Roboto", sans- serif; ) .widget h3 ( okraj-dole: 20px; zarovnání textu: střed; velikost-písma: 24px; váha-písma: normální; barva: #424949; ) . -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; svisle zarovnat:dole barva: #dd3333; okraj-vpravo: 14px; před (obsah:"\f0d0";) f0cd";) .widget li:nth-child(4):before (content:" \f028";).widget li:nth-child(5):before (content:"\f03d";)

5. Vertikální menu s obrázky

Tento příklad lze použít k návrhu bloků s novými produkty, podobnými produkty atd. webové stránky internetového obchodu.