3. diel - Responzívne menu

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

Responzívne menu - 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.:) Pokiaľ sa nám rozsype menu, sme jednoducho nahraní a užívateľ bude prinajlepšom rozmrznutý.

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še menu vyzerať, čo má vedieť a ako sa má správať. Našim 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 - pokiaľ 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">První</a></li>
    <li><a href="#2">Druhý</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:

<!-- 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š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 zložke src/) a naimportujeme 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 5 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ívnej 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štylujeme element nav.menu, ktorý obsahuje celé menu.

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

Menu sme zafarbili 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 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 nenastavujem výšku menu. To z toho dôvodu, pretože chceme mať vždy celý zoznam zabalený, nezávisle od 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štylujeme jednotlivé položky a odkazy tak, aby mali nejaký ľúbivý dizajn. Nastavíme výšku riadku, ktorú nastavíme napr. na 2em, a padding. Pri hoveri 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. Pokiaľ 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);
}

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

Článok pre vás napísal Honza Bittner

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