Chci geek triko! Chci geek triko!
Extra 10 % bodů navíc a tričko zdarma při zadání kódu "TRIKO10"

Lekce 3 - Dokončení responzivního menu

HTML a CSS Responzivní webdesign Dokončení responzivního menu

Unicorn College ONEbit hosting Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

V předchozím článku jsme si ukázali, jak vytvořit základní pro menu, které se zobrazí flexibilně.

Tablety a desktopy - Yay!

Jak tedy začneme a jak toho vlastně můžeme docílit? Je to úplně jednoduché a poslouží nám k tomu media queries - ty mají dobrou podporu a kromě IE 8 a starších by nám to mělo jít v pohodě všude - caniuse. Pokud stránku spustíte v již zmiňovaných starých prohlížečích IE, nebo na ledničce, zobrazí se vá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. :)

Pro naše účely budeme odchytávat šířku s hranicí např. 600px - vy si tam můžete dát co chcete, prostě podle libosti. Všechen následující kód budeme psát tedy 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 - čistě jen kvůli rozpoznání a jasné viditelnosti v článku => reálně si barvu asi měnit nebudete. Současně si také nastavíme barvu položek na červenou (protože už tuším, co se asi stane), a uvidíme, co se nám vykreslí.

Nezapomeňte všechno psát do @media bloku!

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á. Proč že tam jsou ty mezery? Mezery se nám mohou přidat mezi položky pro to, jelikož formátováním našeho HTML - odsazováním, entery atd. - vznikla 1 mezera (více v HTML klasicky neuděláte), která má nějakou šířku - konkrétně jako je velikost fontu v tom seznamu.

Menu má mezi položkami mezery

Menu má mezi položkami mezery.

V seznamu, resp. můžeme globálně v celém menu (tzn. element nav.menu), velikost fontu vynulujeme a mezery se nám dělat nebudou - resp. budou, ale s nulovou velikostí. Vynulujeme velikost fontu v našem nav.menu - mimo @media. Nesmíme zapomenout přidat velikost fontu na nav.menu a, kam nastaváme třeba 16px - taktéž mimo @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 @media bloku.

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

Budeme chtít menu vycentrovat - to je obvykle dosti složité a pracné, ale v našem případě můžeme využít centrování pomocí text-align na seznamu - tady se ale ujistěte, že máte seznam, tedy nav.menu ul na 100% šířky.

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

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

Podtržení

Jako další vylepšení jsme chtěli "podtržení" položky při hoveru. 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 {
  ... kód ...
}

Jako první - aby se nám vůbec něco zobrazilo, musíme nastavit content. Následně - jelikož pseudo elementent chceme stylovat a měnit jeho rozměry, nastavíme display na block. Nastavíme šíř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 právě toto ::after funguje tak, že nám přidá spodní linku tlačítka, chceme tuto "zarážku" mít relativně k tlačítku.

A takto by tedy měl vypadat náš výsledek. 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. :)

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

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 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 JS.

Objektové CSS a BEM

Osobně rád využívám objektové CSSko se syntaxí BEM, které dávají mému webu a komponentách na něm - např. naše menu - nějaký hlubší význam a propojení. Pokud bychom tedy chtěli aplikovat myšlenku objektů na naše menu, měli bychom zhruba takovéto třídy.

.menu {}
.menu__seznam {}
.menu__polozka {}
.menu__odkaz {}

Asi netřeba říkat, za co se jednotlivé třídy dají nahradit.

Sice můžete oponovat, že proč používat a mít v kódu třídy navíc, když mohu mít jen jednu třídu - naše .menu - a zbytek odvodit jako jeho potomky... To je samozřejmě hloupost, jelikož s objektovou myšlenkou musíte dělat kód univerzální a nezávislý na jiných třídách a hlavně na určitých elementech - je pak tedy jedno, jestli využíváte element nav, nebo div.

Sass

A jak bychom mohli vhodně zkombinovat OOCSS (objektové CSS) a preprocesor Sass? Pro vytvoření našeho menu bychom měli nějaký takovýto kód.

.menu {

  &__seznam {}

  &__polozka {}

  &__odkaz {}
}

Závěr

Doufám tedy, že jste principy tvorby responzivního menu a možné výhody využití OOCSS či Sass pochopili. Mějte ale stále, prosím, na paměti, že je velmi důležité, aby se vám menu spustilo vždy v HTML a CSS bez problémů - až potom řešte nějaké Javascripty. :)


 

Stáhnout

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

 

 

Článek pro vás napsal Honza Bittner
Avatar
Jak se ti líbí článek?
27 hlasů
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Miniatura
Předchozí článek
Responzivní menu
Miniatura
Všechny články v sekci
Responzivní webdesign
Miniatura
Následující článek
Dokonalá HTML hlavička - 1. díl
Aktivity (3)

 

 

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

Avatar
lucie.moravcova:30.5.2015 18:37

Díky :o)

Odpovědět  +1 30.5.2015 18:37
Svět patří těm, co se neposerou!
Avatar
Aleš Bacul
Člen
Avatar
Aleš Bacul:21.7.2015 18:39

:-) Moc hezké, díky za článek.

 
Odpovědět 21.7.2015 18:39
Avatar
freearea
Člen
Avatar
freearea:16.11.2015 22:33

Super Hobi ! ... a díky za volné stáhnutí ...

 
Odpovědět 16.11.2015 22:33
Avatar
Jakub Rychlý:4.2.2016 18:27

Zdravím, mohu se zeptat jak do tohoto responzivního menu dostanu subpoložky? Předem děkuji

Odpovědět 4.2.2016 18:27
Čím víc toho vím, tím víc zjišťuju, že vlastně nic nevím.
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  +1 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
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
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
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
Lukáš Hypša:18. června 20:55

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

Odpovědět  +1 18. června 20:55
Jsem lama co se roky snaží naučit napsat aspoň pár řádků a furt mu to nejde...
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na Lukáš Hypša
Honza Bittner:18. června 21:01

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

Odpovědět 18. června 21:01
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
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 12. Zobrazit vše