3. diel - Dokončenie responzivního menu

V predchádzajúcom článku sme si ukázali, ako vytvoriť základné pre menu, ktoré sa zobrazí flexibilne.

Tablety a desktopy - Yay!

Ako teda začneme a ako to vlastne môžeme docieliť? Je to úplne jednoduché a poslúži nám k tomu media queries - tie majú dobrú podporu a okrem IE 8 a starších by nám to malo ísť v pohode všade - caniuse. Ak stránku spustíte v už spomínaných starých prehliadačoch IE, alebo na chladničke, zobrazí sa vám menu tak, ako sme si ho nastylovali v predchádzajúcom článku - čo je super, pretože sa nám rozloženie nezruinuje.

Pre naše účely budeme odchytávať šírku s hranicou napr. 600px - vy si tam môžete dať čo chcete, jednoducho podľa ľubovôle. Všetok nasledujúci kód budeme písať teda do @media bloku, ktorý pre nás vyzerá nasledovne:

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

Takže, premýšľajme, čo všetko budeme musieť upraviť. Pravdepodobne budeme chcieť mať položky pekne vedľa seba a najlepšie ešte vycentrované. Budeme tiež chcieť vylepšiť hover efekt, u ktorého môžeme napr. Pridať nejaký dolnej rámček - ale to nie je otázka rozloženie.

Aby sme jasne rozpoznali, že sme vo verzii tabletu / desktopu, zmeníme farbu na zelenú - čisto len kvôli rozpoznanie a jasné viditeľnosti v článku => reálne si farbu asi meniť nebudete. Súčasne si tiež nastavíme farbu položiek na červenú (pretože už tuším, čo sa asi stane), a uvidíme, čo sa nám vykreslí.

Nezabudnite všetko písať do @media bloku!

nav.menu {
  background: #5cba40;
}

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

Na obrázku nižšie vidíme, ako aktuálne menu vyzerá. Prečo že tam sú tie medzery? Medzery sa nám môžu pridať medzi položky pre to, pretože formátovaním nášho HTML - odsadzovaním, enter atď. - vznikla 1 medzera (viac v HTML klasicky neurobíte), ktorá má nejakú šírku - konkrétne ako je veľkosť fontu v tom zozname.

Menu má medzi položkami medzery.

V zozname, resp. môžeme globálne v celom menu (tzn. element nav.menu), veľkosť fontu vynulujeme a medzery sa nám robiť nebudú - resp. budú, ale s nulovou veľkosťou. Vynulujeme veľkosť fontu v našom nav.menu - mimo @media. Nesmieme zabudnúť pridať veľkosť fontu na nav.menu a, kam nastávajú treba 16px - taktiež mimo @media.

/* kód mimo @media blok */

nav.menu {
  font-size: 0;
}

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

Ladíme desktop verziu

Na desktopoch zvyčajne požadujeme nejaké väčšej výšky menu, napr. 50px. Nastavme teda výšku riadku na odkazy, teraz už zase všetko do @media bloku.

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

Budeme chcieť menu vycentrovať - to je zvyčajne dosť zložité a pracné, ale v našom prípade môžeme využiť centrovanie pomocou text-align na zozname - tu sa ale uistite, že máte zoznam, teda nav.menu ul na 100% šírky.

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

Naše červené pozadie položiek už teraz potrebovať nebudeme, takže riadok môžeme zmazať (alebo zakomentovat).

Podčiarknutie

Ako ďalšie vylepšenie sme chceli "podčiarknutie" položky pri Hover. Na to, aby sme nemuseli boriť štruktúru, nastavovať väčšiu veľkosť zoznamu ako položiek a podobné nezmysly, môžeme využiť pseudo element :: after, ktorý vhodne nastylujeme. Tento pseudo element budeme chcieť zobraziť len pri Hover na odkaz.

nav.menu a:hover::after {
  ... kód ...
}

Ako prvý - aby sa nám vôbec niečo zobrazilo, musíme nastaviť content. Následne - keďže pseudo elementent chceme stylovať a meniť jeho rozmery, nastavíme display na block. Nastavíme šírku na 100% a výšku na 3px. Farbu nastavíme, ako u pozadie, na 15% priehľadnú čiernou - pozor, tu budeme mať 15% čiernu na 10% čiernej, čo nám urobí farbu tmavšiu ... Následne nastavíme pozíciu bottom a left na 0 a využívať budeme absolútnu pozicovanie - aby sme nepridávali ďalšie miesto, 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;
}

Keďže je u nav.menu a:hover::after nastavená position: absolute, musí sa niekde stanoviť "zarážka", čo sa urobí práve nastavením position: relative na niektorý z rodičovských prvkov (defaultne sa zastavuje až na <body>).

A keďže nám práve toto ::after funguje tak, že nám pridá spodnú linku tlačidlá, chceme túto "zarážku" mať relatívne k tlačidlu.

A takto by teda mal vyzerať náš výsledok. Menu je responzívne, využívame metódu mobile-first, v ktorej napíšeme menej kódu a celkovo je taká prehľadnejšie. Myslím, že výsledné menu vyzerá celkom dosť dobre a nemusel by sa za neho nikto hanbiť.

Naša výslednej menu s hover efektom na druhej položke.

Čo ďalej?

Ďalšími, pomerne jednoduchými, kroky môžeme menu vylepšiť tak, aby sa zobrazovalo vo viacerých variantoch - teda pridať viac @media blokov, ktoré ale bude vhodné ohraničiť z oboch strán (max i min width). Môžeme tiež urobiť, aby sa na malých zariadeniach zobrazovala ikonka pre otvorenie / zatvorenie - to už je JS.

Objektové CSS a BEM

Osobne rád využívam objektovej CSSko so syntaxou BEM, ktoré dávajú môjmu webu a komponentoch na ňom - napr. Naše menu - nejaký hlbší význam a prepojenie. Ak by sme teda chceli aplikovať myšlienku objektov na naše menu, mali by sme zhruba takéto triedy.

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

Asi netreba hovoriť, za čo sa jednotlivé triedy dajú nahradiť.

Síce môžete oponovať, že prečo používať a mať v kóde triedy navyše, keď môžem mať len jednu triedu - naše .menu - a zvyšok odvodiť ako jeho potomkov ... To je samozrejme hlúposť, pretože s objektovú myšlienkou musíte robiť kód univerzálny a nezávislý od iných tried a hlavne na určitých elementoch - je potom teda jedno, či využívate element nav, alebo div.

Sass

A ako by sme mohli vhodne skombinovať OOCSS (objektové CSS) a preprocesor Sass? Pre vytvorenie nášho menu by sme mali nejaký takýto kód.

.menu {

  &__seznam {}

  &__polozka {}

  &__odkaz {}
}

Záver

Dúfam teda, že ste princípy tvorby responzivního menu a možné výhody využitia OOCSS či Sass pochopili. Majte ale stále, prosím, na pamäti, že je veľmi dôležité, aby sa vám menu spustilo vždy v HTML a CSS bez problémov - až potom riešte nejaké JavaScriptami.

V budúcej lekcii, Responzívne obrázky - Resolution switching a Art REDIRECTION , si ukážeme niekoľko spôsobov, ako prispôsobiť obrázky na našom webe.

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.