Lekce 3 - Responzivní menu

V minulé lekci, Responzivní webdesign pomocí Media Queries v CSS 3, jsme se naučili používat media queries a vysvětlili si, proč jít směrem k mobile-first přístupu.

V tomto tutoriálu responzivního designu se zaměříme na responzivní menu. Menu je v podstatě nejdůležitější prvek naší stránky hned po obsahu, protože právě díky menu se uživatel může po webu jednoduše a rychle pohybovat.

Kostra HTML

Vytvořme si nejprve novou složku, např. responzivni_menu/ a v ní soubor index.html. Kód pro kostru HTML stránky bude následující:

<!DOCTYPE html>
<html lang="cs">
<head>
  <meta charset="UTF-8">
  <title>Responzivní menu</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="ITnetwork">
  <link rel="stylesheet" href="style.css">
</head>
<body>

  ... kód ...

</body>
</html>

Myšlenka

Nejprve si je dobré určit, jak má naše menu vypadat, co má umět a jak se má chovat. Naším cílem bude vytvoření klasického horizontálního menu, které se bude dobře zobrazovat jak na desktopech, tak i na mobilech či tabletech. Využívat budeme responzivní metody mobile-first.

Technologie

Využívat budeme HTML a CSS, ve kterém uděláme v podstatě celé menu. Menu musí být použitelné i bez JavaScriptu. Ten berme jen jako doplněk, který nám poskytne různé efekty a manipulaci s menu. Je tedy dobré dbát na to, aby JS (JavaScript) přicházel na řadu vždy až jako poslední, jelikož je to něco navíc a nemusí být všude přítomen či podporován.

Příprava HTML

Naše HTML bude vypadat zhruba nějak takto. Využijeme elementu <nav>, který bude obalovat celé menu, seznam (element <ul>), který bude obsahovat jednotlivé položky (elementy <li>) a poté také odkazy (elementy <a>), které budou obsahovat text položky a budeme s nimi moci odkazovat na webové stránky.

<nav class="menu">
  <ul>
    <li><a href="#1">Domů</a></li>
    <li><a href="#2">O mně</a></li>
    ...
  </ul>
</nav>

V HTML budeme využívat sémantické HTML5 elementy. To jsou ty elementy, které nejsou obyčejné jako např. <div>, ale mají nějaký větší význam. Stroj, respektive např. vyhledávače, mohou postupovat nějak takto:

<!-- stroj: dobře, tato struktura vypadá jako by to mohl být element pro navigaci? -->
<div class="some-meaningless-class">
  <ul>
    <li><a href="internal_link">...</a></li>
  </ul>
</div>

<!-- stroj: ah, element pro navigaci! -->
<nav class="some-meaningless-class">
  <ul>
    <li><a href="internal_link">...</a></li>
  </ul>
</nav>

Mobilní verze

Vytvořme si nyní menu o pěti položkách:

<nav class="menu">
    <ul>
        <li><a href="#1">Domů</a></li>
        <li><a href="#2">O mně</a></li>
        <li><a href="#3">Projekty</a></li>
        <li><a href="#4">Reference</a></li>
        <li><a href="#5">Kontakt</a></li>
    </ul>
</nav>

Nyní otevřeme webovou stránku a uvidíme následující obrazovku:

Responzivní menu

index.html

Navigace

Současný vzhled menu pro většinu z nás nebude jistě stačit, a proto si ho nastylujeme. Vytvořme si nový soubor style.css. V něm jako první odstraníme mezeru u okraje obrazovky pomocí margin. Následně nastavíme barvu pozadí elementu nav.menu, který obsahuje celé menu:

body {
    margin: 0;
}

nav.menu {
  background: lightblue;
}

Výstup v prohlížeči:

Responzivní menu

index.html

Výšku menu nenastavujeme, protože chceme, aby se přirozeně přizpůsobila obsahu. Barvu textu odkazů nastavíme v následujícím kroku.

Seznam

Potřebujeme upravit seznam, který je sám o sobě pro menu nevyhovující. Odstraníme odrážky a vynulujeme margin a padding. Položky (elementy li) jsou blokové prvky, takže už přirozeně zabírají celou šířku kontejneru, šířku jim není nutné nastavovat:

nav.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

V dalším kroku upravíme odkazy, kterým nastavíme bílé písmo, odstraníme podtržení a rovnou nastavíme font na sans-serif:

nav.menu a {
    padding: 0 15px;
    display: block;
    color: white;
    text-decoration: none;
    font-family: sans-serif;
}

Odkazy jsou ve výchozím stavu inline prvky. Nastavením display: block zajistíme, že klikací plocha zabírá celý řádek položky menu, nikoli pouze samotný text odkazu.

Při hoveru si nastavíme ztmavení pozadí, čehož docílíme pomocí černé barvy v rgba s průhledností 0.1, tedy 10 %. Volíme použití rgba (či obdobných metod) právě proto, že nejsme závislí na konkrétní barvě, ale jen ztmavujeme. Pokud bychom např. zvolili pevnou barvu (třeba červenou), hover by se různým barvám pozadí nepřizpůsobil:

nav.menu a:hover {
  background: rgba(0, 0, 0, 0.1);
}

Na dotykových zařízeních se :hover může chovat různě (někde se simuluje při tapu, jinde vůbec). To je v pořádku a není to chyba kódu.

Výsledek v prohlížeči:

Responzivní menu

index.html

Máme tedy hotové menu pro mobily, které se umí flexibilně zobrazovat. Samozřejmě by se nám hodilo pro mobilní verze nějaké tlačítko, kterým bychom menu zobrazili, ale nezapomínejte, že vždy musíme udělat vše v HTML a CSS tak, aby to fungovalo a teprve až poté si můžeme hrát se skrýváním, či jinými JS efekty

V další lekci, Dokončení responzivního menu, si vytvoříme jednoduché responzivní menu metodou mobile-first pro desktopy a tablety s využitím @media.

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 1016x (3.62 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í:

558 hlasů

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

Aktivity

Nejčastěji vyhledáváné

Lekce 3 - Responzivní menu

Kostra HTML

Myšlenka

Technologie

Příprava HTML

Mobilní verze

Navigace

Seznam

Stáhnout