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.

V tomto tutoriálu responzivního webdesignu budeme pokračovat v úpravách našeho responzivního menu.

Media queries

Media queries nám zajistí spuštění specifických stylů pro určité šířky zařízení. Pro naše účely budeme reagovat na šíř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 vedle sebe a nejlépe ještě vycentrovány. Budeme také chtít vylepšit efekt :hover, 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;
  }
}

V prohlížeči vidíme, jak aktuálně menu vypadá:

Responzivní menu

index.html

Nyní globálně v celém menu nav.menu mimo blok @media vynulujeme velikost fontu, aby se nám nedělali mezery. 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;
}

Po těchto úpravách tedy vypadají nav.menu a nav.menu a následovně:

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

nav.menu a {
    padding: 0 15px;
    display: block;
    color: white;
    text-decoration: none;
    font-family: sans-serif;
    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:

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ě, 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 {
  /* ... Naše 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 bude vypadat naše menu v prohlížeči:

Responzivní menu

index.html

Menu je responzivní, využíváme metodu mobile-first, ve které napíšeme méně kódu a celkově je taková přehlednější.

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.

V příští lekci, Responzivní obrázky - Resolution switching a Art direction, 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 1729x (3.79 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í:

490 hlasů

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

Aktivity