4. diel - Dokončenie responzívneho menu

V minulej lekcii, Responzívne menu , sme si vytvorili jednoduché responzívne menu metódou mobile-first. Povedali sme si, na čo si dávať pozor a akým spôsobom zaistiť čo najlepší chod.

Ako vytvoriť web pre telefóny, tablety a desktopy? Je to úplne jednoduché a poslúži nám k tomu media queries.

Media queries

Media queries nám zaistí spustenie špecifických štýlov pre určité šírky zariadenia.

Na naše účely budeme odchytávať šírku s hranicou 600px. Príslušný kód budeme písať 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, pri ktorom môžeme napr. pridať nejaký dolný rámček, ale to nie je otázka rozloženia.

Aby sme jasne rozpoznali, že sme vo verzii tabletu/desktopu, zmeníme farbu na zelenú. Súčasne si tiež nastavíme farbu položiek na červenú:

@media (min-width: 600px) {
  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á:

Menu má medzi položkami medzery - Responzívne webdesign - Responzívne webdesign

Prečo že tam sú tie medzery? Medzery sa nám môžu pridať medzi položky, pretože formátovaním nášho HTML vznikla jedna medzera. V HTML je možné urobiť medzeru odsadzovaním, entermi atď., viac v HTML klasicky neurobíte. Medzera má šírku podľa veľkosti fontu.

Globálne v celom menu nav.menu mimo blok @media vynulujeme veľkosť fontu a medzery sa nám robiť nebudú. Nesmieme zabudnúť pridať veľkosť fontu 16px na nav.menu a, taktiež mimo blok @media:

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

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

Ladíme desktop verziu

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

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

Menu budeme chcieť vycentrovať. To je obvykle dosť zložité a pracné, ale v našom prípade môžeme využiť centrovanie pomocou vlastnosti text-align na zozname. Uistite sa, že máte šírku zoznamu nav.menu ul na 100%:

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

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

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

Podčiarknutie

Ako ďalšie vylepšenia sme chceli "podčiarknutie" položky pri nabehnutí myši (: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 naštylujeme. Tento pseudo element budeme chcieť zobraziť len pri hoveri na odkaz:

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

Aby sa nám vôbec niečo zobrazilo, musíme najprv nastaviť vlastnosť content. Následne chceme pseudo element štylovať a meniť jeho rozmery. Nastavíme vlastnosť display hodnotu block, šírku na 100% a výšku na 3px. Farbu nastavíme, ako pri pozadí, na 15% priehľadnú čiernu. 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útne pozíciovanie, 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 vykoná práve nastavením position: relative na niektorý z rodičovských prvkov (defaultne sa zastavuje až na <body>).

A pretože nám ::after pridá spodnú linku tlačidla, chceme túto "zarážku" mať relatívne k tlačidlu:

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

A takto by teda mal vyzerať náš výsledok:

Responzívne webdesign - Responzívne webdesign

Naše výsledné menu s hover efektom na druhej položke.

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

Čo ďalej?

Ďalšími, pomerne jednoduchými, krokmi 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-width aj min-width). Môžeme tiež urobiť, aby sa na malých zariadeniach zobrazovala ikonka na otvorenie/zatvorenie, to už je JavaScript.

Záver

Dúfam, že ste pochopili princípy tvorby responzívneho menu. Majte ale stále na pamäti, že je veľmi dôležité, aby sa menu spustilo vždy v HTML a CSS bez problémov. Až potom riešte nejaké JavaScripty:)

Pokiaľ stránku spustíte v starých prehliadačoch IE, zobrazí sa nám menu tak, ako sme si ho naštylovali v predchádzajúcom článku. Čo je super, pretože sa nám rozloženie nezruinuje:)

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

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 1627x (6.23 kB)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS

Článok pre vás napísal Honza Bittner

Užívateľské hodnotenie:

1 hlasov

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Aktivity