Python týden ITnetwork summer 2020
Pouze tento týden sleva až 80 % na e-learning týkající se Pythonu
80 % bodů zdarma na online výuku díky naší Letní akci!

Lekce 4 - Dokončení responzivního menu

V minulé lekci, Responzivní menu, jsme si vytvořili jednoduché responzivní menu metodou mobile-first. Řekli jsme si, na co si dávat pozor a jakým způsobem zajistit co nejlepší chod.

Jak vytvořit web pro telefony, tablety a desktopy? Je to úplně jednoduché a poslouží nám k tomu media queries.

Media queries

Media queries nám zajistí spuštění specifických stylů pro určité šířky zařízení.

Pro naše účely budeme odchytávat šířku s hranicí 600px. Příslušný kód budeme psát do @media bloku, který pro nás vypadá následovně:

@media (min-width: 600px) {
    /* ... kód ... */
}

Takže přemýšlejme, co všechno budeme muset upravit. Pravděpodobně budeme chtít mít položky hezky vedle sebe a nejlépe ještě vycentrovány. Budeme také chtít vylepšit :hover efekt, u kterého můžeme např. přidat nějaký dolní rámeček, ale to není otázka rozložení.

Abychom jasně rozpoznali, že jsme ve verzi tabletu/desktopu, změníme barvu na zelenou. Současně si také nastavíme barvu položek na červenou:

@media (min-width: 600px) {
  nav.menu {
    background: #5cba40;
  }

  nav.menu ul li {
    width: auto;
    background: red;
    display: inline-block;
  }
}

Na obrázku níže vidíme, jak aktuálně menu vypadá:

Menu má mezi položkami mezery
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Proč že tam jsou ty mezery? Mezery se nám mohou přidat mezi položky, protože formátováním našeho HTML vznikla jedna mezera. V HTML lze udělat mezeru odsazováním, entery atd., více v HTML klasicky neuděláte. Mezera má šířku podle velikosti fontu.

Globálně v celém menu nav.menu mimo blok @media vynulujeme velikost fontu a mezery se nám dělat nebudou. Nesmíme zapomenout přidat velikost fontu 16px na nav.menu a, taktéž mimo blok @media:

/* kód mimo @media blok */
nav.menu {
  font-size: 0;
}

nav.menu a {
  font-size: 16px;
}

Ladíme desktop verzi

Na desktopech obvykle požadujeme nějaké větší výšky menu, např. 50px. Nastavme tedy výšku řádku na odkazy, nyní již zase vše do bloku @media:

nav.menu a {
  line-height: 50px;
}

Menu budeme chtít vycentrovat. To je obvykle dosti složité a pracné, ale v našem případě můžeme využít centrování pomocí vlastnosti text-align na seznamu. Ujistěte se, že máte šířku seznamu nav.menu ul na 100%:

nav.menu ul {
  width: 100%;
  text-align: center;
}

Naše červené pozadí položek už potřebovat nebudeme, takže řádek můžeme smazat (nebo zakomentovat):

/* kód v @media bloku */
nav.menu ul li {
  width: auto;
  /* background: red; */
  display: inline-block;
}

Podtržení

Jako další vylepšení jsme chtěli "podtržení" položky při najetí myši (:hover). Na to, abychom nemuseli bořit strukturu, nastavovat větší velikost seznamu než položek a podobné nesmysly, můžeme využít pseudo element ::after, který vhodně nastylujeme. Tento pseudo element budeme chtít zobrazit jen při hoveru na odkaz:

nav.menu a:hover::after {
  /* ... styly ... */
}

Aby se nám vůbec něco zobrazilo, musíme nejprve nastavit vlastnost content. Následně chceme pseudo element stylovat a měnit jeho rozměry. Nastavíme vlastnost display hodnotu block, šířku na 100% a výšku na 3px. Barvu nastavíme, jako u pozadí, na 15% průhlednou černou. Pozor, tady budeme mít 15% černou na 10% černé, což nám udělá barvu tmavší. Následně nastavíme pozici bottom a left na 0 a využívat budeme absolutní pozicování, abychom nepřidávali další místo (resp. nezvyšovali menu):

nav.menu a:hover::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background: rgba(0, 0, 0, 0.15);
  bottom: 0;
  left: 0;
  position: absolute;
}

Jelikož je u nav.menu a:hover::after nastavena position: absolute, musí se někde stanovit "zarážka", což se provede právě nastavením position: relative na některý z rodičovských prvků (defaultně se zastavuje až na <body>).

A jelikož nám ::after přidá spodní linku tlačítka, chceme tuto "zarážku" mít relativně k tlačítku:

nav.menu a {
    line-height: 50px;
    position: relative;
}

A takto by tedy měl vypadat náš výsledek:

Naše výsledné menu s hover efektem na druhé položce.

Menu je responzivní, využíváme metodu mobile-first, ve které napíšeme méně kódu a celkově je taková přehlednější. Myslím, že výsledné menu vypadá docela dost dobře a nemusel by se za něj nikdo stydět :)

Co dál?

Dalšími, poměrně jednoduchými, kroky můžeme menu vylepšit tak, aby se zobrazovalo ve více variantách. Tedy přidat více @media bloků, které ale bude vhodné ohraničit z obou stran (max-width i min-width). Můžeme také udělat, aby se na malých zařízeních zobrazovala ikonka pro otevření/zavření, to už je JavaScript.

Závěr

Doufám, že jste principy tvorby responzivního menu pochopili. Mějte ale stále na paměti, že je velmi důležité, aby se menu spustilo vždy v HTML a CSS bez problémů. Až potom řešte nějaké JavaScripty :)

Pokud stránku spustíte ve starých prohlížečích IE, zobrazí se nám menu tak, jak jsme si jej nastylovali v předešlém článku. Což je super, jelikož se nám rozložení nezruinuje :)

V příští lekci, Responzivní obrázky - Resolution switching a Art redirection, si ukážeme několik způsobů, jak přizpůsobit obrázky na našem webu.


 

Stáhnout

Staženo 1099x (6.23 kB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

Předchozí článek
Responzivní menu
Všechny články v sekci
Responzivní webdesign
Článek pro vás napsal Honza Bittner
Avatar
Jak se ti líbí článek?
28 hlasů
Student FIT ČVUT. In love with Flutter. :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Aktivity (5)

 

 

Komentáře
Zobrazit starší komentáře (6)

Avatar
AUK, s.r.o
Člen
Avatar
AUK, s.r.o:12.4.2016 23:26

Zdravim, akorat v tom tutorialu ti chybi ze se ma pozicovat nav.menu a relativne pro desktop. Nez jsem si to stahl jako soubor a hledal chybu celkem mi to zabralo casu. Jsem zacatecnik dik za tutorialy :)

 
Odpovědět
12.4.2016 23:26
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na AUK, s.r.o
Honza Bittner:13.4.2016 19:46

Po maturitě na to kouknu, díky. :-)

Odpovědět
13.4.2016 19:46
Student FIT ČVUT. In love with Flutter. :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://g...
Avatar
Michal Dvořáček:3.10.2017 16:49

Zdravím, nevim jestli to tu ještě někdo čte, ale zeptám se :)

Proč, aby se mi zobrazil pro desktopy element ::after správně, je nutné mít

positive:relative;

u nav.menu a?

 
Odpovědět
3.10.2017 16:49
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na Michal Dvořáček
Honza Bittner:3.10.2017 20:40

Jelikož je u nav.menu a:hover::after position: absolute;, musí se někde stanovit "zarážka", což se provede právě nastavením position:relative na některý z rodičovských prvků. (defaultně se zastavuje na <body>)

A jelikož nám právě toto ::after funguje tak, že nám přidá spodní linku tlačítka, chceme to tedy mít relativně k tomuto tlačítku.

Odpovědět
3.10.2017 20:40
Student FIT ČVUT. In love with Flutter. :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://g...
Avatar
Lukáš Hypša:18.6.2018 20:55

Pořád tam chybí poznámka, že "nav.menu a" se styluje relativně :D

Odpovědět
18.6.2018 20:55
Jsem lama co se roky snaží naučit napsat aspoň pár řádků a furt mu to nejde...
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na Lukáš Hypša
Honza Bittner:18.6.2018 21:01

Díky, dopsal jsem to a poslal ke schválení. :-)

Odpovědět
18.6.2018 21:01
Student FIT ČVUT. In love with Flutter. :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://g...
Avatar
Pavel Svarc
Člen
Avatar
Pavel Svarc:21.5.2019 14:18

Děkuji... skvělý námět.

 
Odpovědět
21.5.2019 14:18
Avatar
Aleš Novotný:1. ledna 22:59

Prosimtě, jak máš ty tlačítka vedle sebe a červeně, tak se mi to zaboha nedaří, mám je pořád jako názvy pod sebou a modře.
Tak sem si stáhl ten hotový vzor od tebe pod článkem. Tak tam taky jsou jen názvy pod sebou a modrá plocha.
Jak to?

 
Odpovědět
1. ledna 22:59
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na Aleš Novotný
Honza Bittner:2. ledna 0:51

V ukázce pro stažení je samozřejmě finální verze, kde červeně zvýrazněné bloky nejsou. Kód je popsán dle mého v souladu s tím, co to má dělat, takže zřejmě děláš někde chybu. Zkus se ujistit, že splňuješ danou podmínku pro @media, případně celý kód otestuj bez @media pravidla. ;)

Odpovědět
2. ledna 0:51
Student FIT ČVUT. In love with Flutter. :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://g...
Avatar
Aleš Novotný:2. ledna 8:16

závadu jsem našel, ale neodstranil.
Učím se to na mobilu. Kody mám napsané dobře, ale mobil mi to nezobrazí - po zadání kódu @media mi to mobil nezobrazuje. Nezobrazí mi ani váš hotový vzor. PC ano.

 
Odpovědět
2. ledna 8:16
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 16. Zobrazit vše