Black Friday je tu! Využij jedinečnou příležitost a získej až 80 % znalostí navíc zdarma! Více zde
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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

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

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

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 753x (6.06 kB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

Předchozí článek
Responzivní webdesign pomocí Media Queries v CSS 3
Všechny články v sekci
Responzivní webdesign
Přeskočit článek
(nedoporučujeme)
Dokončení responzivního menu
Článek pro vás napsal Honza Bittner
Avatar
Uživatelské hodnocení:
168 hlasů
Absolvent FIT ČVUT :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Aktivity

 

 

Komentáře
Zobrazit starší komentáře (4)

Avatar
Filip Růžička:19.9.2019 7:22

Mám označeno:

.menu li:hover, .aktivni {
  transform: matrix(1.10,0.00,0.00,1.10,25,0);
  transition-duration: 0.5s;
}

a potřebuji zároveň aby se změnila barva textu. Prosím o radu.

 
Odpovědět
19.9.2019 7:22
Avatar
Kristína Ruščáková:22.10.2020 13:57

super clanok :-)

 
Odpovědět
22.10.2020 13:57
Avatar
Jakub Janáček:17.2.2021 13:04

Super článek :-)

 
Odpovědět
17.2.2021 13:04
Avatar
KaMl
Člen
Avatar
KaMl:23.7.2021 16:18

Skvělý článek!
Hoover s průhledností je fajn vychytávka.
A člověk se tu i pobaví:

všemi oblíbené starší verze IE...

:-D
 
Odpovědět
23.7.2021 16:18
Avatar
rucka43
Člen
Avatar
rucka43:21.12.2021 9:51

Výborně, dobrý - jen v mobil verzi to mohlo být jiné.

 
Odpovědět
21.12.2021 9:51
Avatar
Zdeněk Plicka:10. ledna 20:45

Ma smysl se jeste zabyvat IE navic v ramci mobile first? Jestli ano, proc rovnou neoprasit podporu Netscape apod.

Odpovědět
10. ledna 20:45
Nejprve je třeba naučit se plazit
Avatar
Jaroslav Drobek:3. dubna 8:21

Hodnocení

  • Nové prvky v HTML skeleton nejsou komentovány/vys­větleny (script) - předpokládám, že by čtenář měl mít povědomí o JavaScript..
  • Trocha češtiny by neuškodila: 1.pád - "všemi oblíbené starší verze" ... 6.pád - "všemi oblíbených starších verzích"...
  • Import proběhne v poznámkovém tagu?
  • Importovat tedy html5shiv-printshiv.js nebo html5shiv.js? Nebo oba tyto 7 let staré soubory?
 
Odpovědět
3. dubna 8:21
Avatar
Blanka Svobodová:4. srpna 16:24

tak jak je to s tím IE v roce 2022? Přijde mi, že už ujel vlak někam dál....

Odpovědět
4. srpna 16:24
Kdy, když né teď. Kdo, když né já?
Avatar
Martin Truhlář:5. srpna 18:25

Zatím hodně shrnuté. Některé info dovyhledávám jinde. Jinak spokojenost s průběhem.

 
Odpovědět
5. srpna 18:25
Avatar
Jiří Ress
Člen
Avatar
Jiří Ress:3. října 11:26

při nastavení
nav.menu{
background: blue;
}
menu je celé modré nečitelné, je nutné nastavit buďto nějakou průhlednost a nebo zvolit jiné barvy případně rovnou změnit barvu písma. Je mi jasné, že si s tím asi každý poradil, každopádně jsem se na tom chvilku zasekl 😁

 
Odpovědět
3. října 11:26
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 14. Zobrazit vše