Menu webstránky | HTML-kurz-2016

Menu webovej stránky vytvoríme vďaka Bootstrapu pomerne jednoducho. Vo väčšine prípadov v praxi programátori tento kód kopírujú a zatiaľ nepoznám nikoho, kto by ho písal ručne, alebo poznal naspamäť, preto sa nezľakni, keď uvidíš trochu dlhší kód, ktorému možno v tejto chvíli nebudeš celkom rozumieť. Prejdeme si ho krok po kroku. :)

<div class="navbar-wrapper">
    <nav class="navbar navbar-default navbar-static-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Tu bude logo</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a href="#">O mne</a></li>
            <li><a href="#">Záujmy</a></li>
            <li><a href="#news">Aktualita týždňa</a></li>
          </ul>
          <ul class="nav navbar-nav">
            <li><a href="#contact"><img src="img/user-photo.png" class="img-circle" width=30 height=30 />Napíšte mi</a></li>
          </ul>
        </div>
      </div>
    </nav>
</div>

Čo ten kód vlastne znamená?

Týmto kódom sme vytvorili desktopové a zároveň už pre mobil pripravené responzívne navigačné menu.

V praxi je potrebné vedieť najmä čo znamenajú nasledujúce html tagy a triedy.

Nav

<nav class="navbar navbar-default navbar-static-top"></nav> - Definuje zobrazenie a typ navigačného menu.

Hodnoty, ktoré môžeš meniť:

.navbar-default nám určuje defaultne sivé navigačné menu. Zmenou na .navbar-inverse bude navigačné menu čiernou farbou a text bude farbou bielou.
.navbar-static-top nám určuje, že navigačné menu je navrchu webstránky. V praxi sa najčastejšie zamieňa za .navbar-fixed-top, čo znamená, že hlavička stránky bude vždy viditeľná bez ohľadu na to, kde na webe sa nachádzame.

Navbar-header

<div class="navbar-header"></div> - obsahuje informácie, ktoré budú zobrazené iba na mobilnej verzii. V tomto prípade mobilná verzia obsahuje iba navigačné hamburger menu. V praxi sa zvykne do .navbar-header dávať napríklad odkaz na registráciu, prepínač jazykov, alebo ikonka nákupného košíka vrátane hamburger menu. Hamburger menu je definované pomocou informácií v <span></span> tagoch.

Navbar-brand

<a class="navbar-brand" href="#">Napríklad logo</a> - obsahuje logo webstránky. Sem môžeš namiesto textu v budúcnosti vložiť aj obrázok, ktorý logo reprezentuje.

Navbar-nav

<ul class="nav navbar-nav"> - obsahuje už konkrétne položky menu. V praxi najčastejšie môžeme zmeniť preddefinované zarovananie menu doľava na zarovanie doprava pomocou triedy .navbar-right. Rovnako ako .navbar-right je možné explicitne použiť aj triedu .navbar-left.

Práca so zoznamom

Zoznam položiek sa v HTML definuje dvoma spôsobmi.

Nečíslovaný zoznam

Nečíslovaný zoznam definuje tag <ul></ul>. Zoznam obsahuje položky, ktoré sú v tagoch <li></li>. Koľko tagov <li></li> máme, toľko bude mať zoznam položiek.

<ul>
  <li>Položka 1</li>
  <li>Položka 2</li>
  <li>Položka 3</li>
</ul>

Výsledok vyzerá takto:

Položka 1
Položka 2
Položka 3

Číslovaný zoznam

Číslovaný zoznam definuje tag <ol></ol>. Zoznam obsahuje položky, ktoré sú v tagoch <li></li>. Koľko tagov <li></li> máme, toľko bude mať zoznam položiek.

<ol>
  <li>Položka 1</li>
  <li>Položka 2</li>
  <li>Položka 3</li>
</ol>

Výsledok vyzerá takto:

Položka 1
Položka 2
Položka 3

Informácia: Na menu webstránok sa pozeráme ako na položky nečíslovaného zoznamu. Preto sa nachádzajú aj v našom príklade v <ul></ul> tagu. Vo worde tiež väčšinou položky menu štruktúruješ ako zoznam, buď v odrážkach alebo číslami. :)

Úloha

Skopíruj celý kód zo začiatku tutoriálu k tejto lekcii
Vlož ho na webstránku v súbore index.html hneď za <body> element.
Vyplň názov namiesto loga v sekcii <div class="navbar-brand"></div>.
Uprav názvy položiek menu, tak aby odpovedali tvojej štruktúre webstránky (ak je iná ako v tutoriáli).
Skús zmeniť triedu .navbar-default na .navbar-inverse. Zmenila sa farba menu na čiernu?
Skús do tagu <ul class="nav navbar-nav"></ul> pridať triedu .navbar-left.
Pridaj do druhého <ul class="nav navbar-nav"></ul> triedu .navbar-right. Presunul sa kontakt napravo?

Fotka užívateľa

Veľkosť obrázku je možné upraviť v HTML alebo v CSS. Zmena veľkosti sa nastaví priamo v <img /> tagu pomocou width a height. Ak obrázok nemáš pripravený, stiahni si obrázok avataru a ulož ho do priečinka img v priečinku htmlkurz2016.

<img src="img/user-photo.png" class="img-circle" width=30 height=30 />

Upozornenie: Aby sa obrázok zobrazil správne, je dôležité aby bol v správnom pomere (štvorec). Ikonky: Namiesto obrázku sa zvyknú často používať ikonky. Ak nejaké hľadáš, mnoho voľne dostupných je ich na stránke icons8 alebo iconfinder.

V tejto chvíli naše menu vyzerá takto:

<div class="navbar-wrapper">
    <nav class="navbar navbar-default navbar-static-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Sveťa Margetová</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-left">
            <li><a href="#">O mne</a></li>
            <li><a href="#">Záujmy</a></li>
            <li><a href="#news">Aktualita týždňa</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#contact"><img src="img/user-photo.png" class="img-circle" width=30 height=30 />Napíšte mi</a></li>
          </ul>
        </div>
      </div>
    </nav>
</div>