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.

Responzivní menu - v podstatě nejdůležitější prvek naší stránky, hned po obsahu, jelikož díky menu se uživatel může pohybovat po vaší stránce. Pokud se nám rozsype menu, jsme jednoduše nahraní a uživatel bude přinejlepším rozmrzen.

HTML Skeleton

Vytvoříme si jednoduchou HTML stránku podle kostry níže:

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8" />
    <title>Titulek stránky</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="description" content="Popis stránky" />
    <meta name="author" content="Jméno autora" />

    <link rel="stylesheet" href="css/style.css" type="text/css"/>

    <!--[if lt IE 9]>
        <script src="js/vendor/html5shiv.js"></script>
    <![endif]-->
</head>
<body>

    ... kód ...

    <script src="js/script.js"></script>
</body>
</html>

Idea

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 - pokud nevíte oč se jedná, doporučuji se podívat na článek o mobile-first, kde je všechno vysvětleno a jsou uvedeny její výhody.

Technologie

Využívat budeme klasicky HTML a CSS, ve kterém uděláme v podstatě celé menu. Menu nám musí fungovat bez Javascriptu, který se využívá jen jako doplněk, který nám poskytne různé efekty a manipulaci s menu.

Je tedy dobré dbát na to, že JS (Javascript) by měl přicházet na řadu vždy 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">První</a></li>
    <li><a href="#2">Druhý</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">...</div>

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

Jelikož budeme využívat zmíněné HTML5 elementy, které se ve všemi oblíbenými staršími verzemi IE nedají zobrazit (jelikož IE8 a starší vykreslují jen elementy, které znají), budeme potřebovat nějaký menší trik, jak na to. Využijeme html5shiv, kde si stáhneme soubor html5shiv-printshiv.js (ve složce src/) a naimportujeme asi jej tak, jak je ukázáno na kódu níže a to do hlavičky webu. HTML5 elementy by se nám pak měly vykreslovat správně.

<!--[if lt IE 9]>
  <script src="js/html5shiv-printshiv.js"></script>
<![endif]-->

Mobilní verze

Vytvoříme si tedy menu o 5ti položkách. Vyplním jej částmi Lorem ipsum textu - v praxi se pak obvykle využívají např. položky jako domů, kontakt, reference, o mně atd.

<nav class="menu">
    <ul>
        <li><a href="#1">Lorem</a></li>
        <li><a href="#2">Accusantium</a></li>
        <li><a href="#3">Adipisci</a></li>
        <li><a href="#4">Aut</a></li>
        <li><a href="#5">Eos</a></li>
    </ul>
</nav>

Spustíme webovou stránku a uvidíme něco podobného jako na následujícím obrázku.

Defaultní seznam, který budeme chtít upravit v nádherné responzivní menu.

Navigace

Předchozí vzhled menu pro většinu z vás nebude jistě stačit, a proto si napíšeme nějaké styly. Jako první si nastylujeme element nav.menu, který obsahuje celé menu.

nav.menu {
  display: block;
  width: 100%;
  background: blue;
}

Menu jsme obarvili a nechali automaticky nastavovat výšku.

Jak jste si určitě všimli, od kraje obrazovky je mezera. Ta je ale způsobena defaultním nastavením body, což pro naše účely ukázky responzivního menu ničemu nebrání. Pokud chcete mezeru odstranit, vynulujte padding a margin na body.

Všimněte si také, že nenastavuji výšku menu. To z toho důvodu, jelikož chceme mít vždy celý seznam zabalen, nezávisle na výšce.

Seznam

Potřebujeme upravit seznam, který je sám o sobě pro menu nevyhovující - odstraníme tedy odrážky, margin a padding a položky nastavíme na 100% šířku - ta by měla být sice standardně nastavena, ale jistota je jistota.

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

nav.menu ul li {
  width: 100%;
}

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

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

Nyní si trochu nastylujeme jednotlivé položky a odkazy tak, aby měly nějaký líbivý design. Nastavíme výšku řádku, kterou nastavíme např. na 2em, a padding. 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ím použití rgba, či obdobných metod, právě proto, že nejsme závislí na barvě, ale jen ztmavujeme. Pokud bychom např. zvolili barvu červenou, barva hoveru se nám přizpůsobí.

nav.menu a {
  line-height: 2em;
  padding: 0 15px;
}

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

Aktuální menu s hoverem na druhé položce.

Máme tedy hotové menu pro mobily a menu 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 - vždy musíme udělat všechno 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.

Takové menu je sice super, ale my bychom spíše potřebovali vědět, jak na ty desktopové verze. To si ale ukážeme až příště.

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 975x (6.06 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í:

498 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é