2. díl - Responzivní menu

HTML a CSS Responzivní webdesign Responzivní menu

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ž v příštím článku, kde si ukážeme, jak celé menu dokončit a přidat verzi pro velké obrazovky.


 

Stáhnout

Staženo 206x (6.06 kB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

  Aktivity (1)

Článek pro vás napsal Honza Bittner
Avatar
Autor je vášnivý web developer. Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)

Jak se ti líbí článek?
Celkem (13 hlasů) :
4.923084.923084.923084.923084.92308


 


Miniatura
Předchozí článek
Mobile first responzivní design
Miniatura
Všechny články v sekci
Responzivní webdesign
Miniatura
Následující článek
Dokončení responzivního menu

 

 

Komentáře

Avatar
Josef Kuchař (Pepa489):

Super, přesně to co potřebuju :)

Odpovědět 21.4.2015 18:29
2x piš, jednou debuguj
Avatar
Ales
Člen
Avatar
Ales:

Fakt super :-)

 
Odpovědět 21.7.2015 20:42
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 2 zpráv z 2.