3. díl - Dokončení responzivního menu

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

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;
}

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 489x (6.23 kB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

  Aktivity (1)

Článek pro vás napsal Honza Bittner
Avatar
Autor je vášnivý web developer. Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)

Jak se ti líbí článek?
Celkem (21 hlasů) :
4.857144.857144.857144.857144.85714


 


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

 

 

Komentáře

Avatar
Dominik Gavrecký:

Pekný článok :)

Odpovědět  +2 21.4.2015 19:26
Hlupák nie je ten kto niečo nevie, hlupákom sa stávaš v momente keď sa na to bojíš opýtať.
Avatar
TomasGlawaty
Člen
Avatar
TomasGlawaty:

Výborně, na články o mobile-first a OOCSS jsem se těšil! :)

Odpovědět 21.4.2015 21:46
Člověk může dosáhnout čeho si zamane. Jen musí chtít, případně něco obětovat ...
Avatar
lucie.moravcova:

Díky :o)

Odpovědět  +1 30.5.2015 18:37
Svět patří těm, co se neposerou!
Avatar
Ales
Člen
Avatar
Ales:

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

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

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

 
Odpovědět 16.11.2015 22:33
Avatar
Jakub Rychlý
Redaktor
Avatar
Jakub Rychlý:

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

Odpovědět 4. února 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:

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. dubna 23:26
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na AUK, s.r.o
Honza Bittner:

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

Odpovědět 13. dubna 19:46
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
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 8 zpráv z 8.