Veľkonočná akcia je tu a s ňou aj extra kredity ZADARMO na náš interaktívny e-learning. Dobij si teraz kredity a posuň sa vo svojej kariére vpred!
Zarábaj až 6 000 € mesačne! Akreditované rekvalifikačné kurzy od 0 €. Viac informácií.

3. diel - Responzívne menu

Predchádzajúci
Ďalší

V minulej lekcii, Responzívny webdesign pomocou Media Queries v CSS3, sme sa naučili používať media queries a vysvetlili si, prečo ísť smerom k mobile-first prístupu.

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

HTML skeleton

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Responsive menu</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="description" content="Page description" />
    <meta name="author" content="Author's name" />

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

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

    ... code ...

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

Idea

Najprv je dobré si určiť, ako má naše 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ívnu metódu 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 iba 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 navyše a nemusí byť všade prítomný či podporovaný.

Príprava HTML

Naše HTML bude vyzerať zhruba nejako takto. Využijeme element <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">First</a></li>
    <li><a href="#2">Second</a></li>
        ...
  </ul>
</nav>

V HTML budeme využívať sémantické 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če, môžu postupovať nejako takto:

<!-- browser: okay, this structure looks like it could be a navigation element? -->
<div class="some-meaningless-class"><ul><li><a href="internal_link">...</div>

<!-- browser: ah, the navigation element! -->
<nav class="some-meaningless-class"><ul><li><a>...</nav>

Keďže budeme využívať spomínané HTML5 elementy, ktoré sa vo všetkých obľúbených starších verziách IE nedajú zobraziť (keďže IE8 a staršie 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 importujeme si 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 s 5 položkami. Vyplníme 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ť pretvoriť na nádherné responzívne menu - Responzívny webdesign

Defaultný zoznam, ktorý budeme chcieť pretvoriť na nádherné responzívne menu.

Navigácia

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

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

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

Ako ste si určite všimli, na kraji obrazovky je medzera. Tá je spôsobená defaultným nastavením body, čo na naše účely ukážky responzívneho menu ničomu nebráni. Ak chcete medzeru odstrániť, vynulujte padding a margin na body :)

Všimnite si tiež, že nenastavujeme výšku menu. To z toho dôvodu, že chceme mať vždy celý zoznam zabalený nezávisle od jeho výšky.

Zoznam

Potrebujeme upraviť zoznam, ktorý je sám o sebe pre menu nevyhovujúci - odstránime teda odráž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 naštýlujeme jednotlivé položky a odkazy tak, aby mali nejaký pekný dizajn. Nastavíme výšku riadku napr. na 2em a padding. Pri hover si nastavíme stmavenie pozadia, čo docielime pomocou čiernej farby v rgba s priehľadnosťou 0.1, teda 10 %. Volím použitie rgba, či obdobných metód práve preto, že nie sme závislí na farbe, ale len stmavujeme. Ak by sme napr. zvolili farbu červenú, farba hoveru 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);
}

Výsledok v prehliadači:

Aktuálne menu s hoverom na druhej položke - Responzívny webdesign

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

Máme teda hotové menu pre mobily a menu sa vie 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ž potom sa môžeme hrať so skrývaním, či inými JS efektmi :)

Také menu je síce super, ale my by sme skôr potrebovali vedieť, ako na tie desktopové verzie. To si ale ukážeme až nabudúce.

V ďalšej lekcii, Dokončenie responzívneho menu, si vytvoríme jednoduché responzívne menu metódou mobile-first pre desktopy a tablety s využitím @media.


 

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é 6x (6.87 kB)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS

 

Ako sa ti páči článok?
Pred uložením hodnotenia, popíš prosím autorovi, čo je zleZnakov 0 z 50-500
Predchádzajúci článok
Responzívny webdesign pomocou Media Queries v CSS3
Všetky články v sekcii
Responzívny webdesign
Preskočiť článok
(neodporúčame)
Dokončenie responzívneho menu
Článok pre vás napísal Honza Bittner
Avatar
Užívateľské hodnotenie:
6 hlasov
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Aktivity