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 - Responzivní webdesign

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.

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

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

Článek pro vás napsal Honza Bittner

Uživatelské hodnocení:

341 hlasů

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

Aktivity