Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
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í.

2. diel - Responzívne menu

V minulej lekcii, Úvod do responzivního webdesignu , sme sa uviedli do responzivního webdesignu.

Responzívne menu - v podstate najdôležitejší prvok našej stránky, hneď po obsahu, pretože vďaka menu sa užívateľ môže pohybovať po vašej stránke. :) Ak sa nám rozsype menu, sme jednoducho pridaní a užívateľ bude prinajlepšom rozmrzen.

Html Skeleton

Vytvoríme si jednoduchú HTML stránku podľa kostry nižšie.

<!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

Najprv si je dobré určiť, ako má naša menu vyzerať, čo má vedieť a ako sa má správať. Naším cieľom bude vytvorenie klasického horizontálneho menu, ktoré sa bude dobre zobrazovať ako na desktopoch, tak aj na mobiloch či tabletoch. Využívať budeme responzívne metódy mobile-first - ak neviete o čo sa jedná, odporúčam sa pozrieť na článok o mobile-first, kde je všetko vysvetlené a sú uvedené jej výhody.

Technológie

Využívať budeme klasicky HTML a CSS, v ktorom urobíme v podstate celé menu. Menu nám musí fungovať bez Javascriptu, ktorý sa využíva len ako doplnok, ktorý nám poskytne rôzne efekty a manipuláciu s menu.

Je teda dobré dbať na to, že JS (Javascript) by mal prichádzať na rad vždy ako posledný, pretože je to niečo naviac a nemusí byť všade prítomný či podporovaný.

Príprava HTML

Naša HTML bude vyzerať zhruba nejako takto. Využijeme elementu nav, ktorý bude obaľovať celé menu, zoznam (element ul), ktorý bude obsahovať jednotlivé položky (elementy li) a potom tiež odkazy (elementy a), ktoré budú obsahovať text položky a budeme s nimi môcť odkazovať 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žívať sémantickej HTML5 elementy - to sú tie elementy, ktoré nie sú obyčajné ako napr. Div, ale majú nejaký väčší význam. Stroj, respektíve napr. Vyhľadávača, môžu postupovať nejako 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>

Keďže budeme využívať spomínané HTML5 elementy, ktoré sa vo všetkými obľúbenými staršími verziami IE nedajú zobraziť (keďže IE8 a starší vykresľujú len elementy, ktoré poznajú), budeme potrebovať nejaký menší trik, ako na to. Využijeme html5shiv, kde si stiahneme súbor html5shiv-printshiv.js (v priečinku src /) a importujete asi ho tak, ako je ukázané na kóde nižšie a to do hlavičky webu. HTML5 elementy by sa nám potom mali vykresľovať správne.

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

Mobilná verzia

Vytvoríme si teda menu o 5tich položkách. Vyplním ho časťami Lorem ipsum textu - v praxi sa potom obvykle využívajú napr. Položky ako domov, kontakt, referencie, o mne atď.

<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 webovú stránku a uvidíme niečo podobné ako na nasledujúcom obrázku.

Defaultný zoznam, ktorý budeme chcieť upraviť v nádhernej responzívne menu - Responzívne webdesign

Defaultný zoznam, ktorý budeme chcieť upraviť v nádhernej responzívne menu.

Navigácia

Predchádzajúci vzhľad menu pre väčšinu z vás nebude iste stačiť, a preto si napíšeme nejaké štýly. :) Ako prvý si nastylujeme element nav.menu, ktorý obsahuje celé menu.

nav.menu {
  display: block;
  width: 100%;
  background: blue;
}
Menu sme nafarbili a nechali automaticky nastavovať výšku - Responzívne webdesign

Menu sme nafarbili a nechali automaticky nastavovať výšku.

Ako ste si určite všimli, od kraja obrazovky je medzera. Tá je ale spôsobená defaultným nastavením body, čo pre naše účely ukážky responzivního menu ničomu nebráni. Pokiaľ chcete medzeru odstrániť, vynulujte padding a margin na body. :)

Všimnite si tiež, že nenastavuje výšku menu. To z toho dôvodu, pretože chceme mať vždy celý zoznam zabalený, nezávisle na výške.

Zoznam

Potrebujeme upraviť zoznam, ktorý je sám o sebe pre menu nevyhovujúci - odstránime teda zarážky, margin a padding a položky nastavíme na 100% šírku - tá by mala byť síce štandardne nastavená, ale istota je istota. :)

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

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

V ďalšom kroku upravíme odkazy, ktorým dáme biele písmo, odstránime podčiarknutie a rovno nastavíme font na sans-serif.

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

Teraz si trochu nastylujeme jednotlivé položky a odkazy tak, aby mali nejaký pekný dizajn. Nastavíme výšku riadka, ktorú nastavíme napr. Na 2em, a padding. Pri Hover si nastavíme stmavenie pozadie, čoho docielime pomocou čiernej farby v RGBA s priehľadnosťou 0.1, teda 10%. Volím použitie RGBA, alebo podobných metód, práve preto, že nie sme závislí na farbe, ale len stmavuje. Ak by sme napr. Zvolili farbu červenú, farba hover sa nám prispôsobí.

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

nav.menu a:hover {
  background: rgba(0, 0, 0, 0.1);
}
Aktuálne menu s hover na druhej položke - Responzívne webdesign

Aktuálne menu s hover na druhej položke.

Máme teda hotové menu pre mobily a menu sa vedia flexibilne zobrazovať. Samozrejme by sa nám hodilo pre mobilné verzie nejaké tlačidlo, ktorým by sme menu zobrazili, ale nezabúdajte - vždy musíme urobiť všetko v HTML a CSS tak, aby to fungovalo a až až potom si môžeme hrať so skrývaním, či inými JS efekty. :)

Takéto menu je síce super, ale my by sme skôr potrebovali vedieť, ako na tie desktopové verzie. To si však ukážeme až v ďalšom článku, kde si ukážeme, ako celé menu dokončiť a pridať verziu pre veľké obrazovky.


 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 896x (6.06 kB)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS

 

Predchádzajúci článok
Úvod do responzivního webdesignu
Všetky články v sekcii
Responzívne webdesign
Preskočiť článok
(neodporúčame)
Dokončenie responzivního menu
Článok pre vás napísal Honza Bittner
Avatar
Užívateľské hodnotenie:
1 hlasov
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Aktivity