Vodorovné menu

Vodorovné navigačné menu je v súčasnosti bežnou súčasťou navigácie na weboch. Jeho základné charakteristiky:

nachádza sa na každej podstránke webu
obsahuje prehľadný zoznam odkazov na jednotlivé podstránky
práve zobrazená podstránka je vizuálne zvýraznená (aby bolo jasné, kde sa práve nachádzame)

Flexbox

Ukážeme si, ako vyrobiť horizontálne menu v HTML a CSS menu vyrobiť pomocou techniky flexbox, ktorá sa v ostatnom čase zaslúžene presadzuje ako webdkóderska technika č. 1 na pozicovanie elementov na stránke.

(Rovnako vyzerajúce menu sa dá docieliť aj inými technikami, ale ani jedna z nich nie je taká jednoduchá a priamočiara ako flexbox).

1. Horizontálne menu - HTML kód:

<!-- nasledovný úryvok textu sa nachádza vo vnútri body v súboroch .html -->

<nav class="menu-vodorovne">
  <a href="index.html">Domov</a>
  <a href="o-mne.html">O mne</a>
  <a href="galeria.html">Galéria</a>
  <a href="preberanie.html">Na prevzatie</a>
  <a href="kontakt.html">Kontakt</a>  
</nav>

nav je blokový prvok s významom navigácia
vďaka prvku nav vie dať nevidiaci dať povel prehliadaču skoč na navigáciu, a tak sa môže na stránke lepšie zorientovať
v tomto bloku sa nachádza séria odkazov na podstránky - položky menu

2. CSS - nastavenie flexbox kontajnera

/* tento kód bude v súbore so štýlom */

.menu-vodorovne {
  display: flex;   /* zobrazovací režim flexbox */
  justify-content: space-around;
}

Flexbox využíva nadradený prvok ako kontajner a podradené prvky ako položky (items).
na výber použivame selektor triedy, t.j. ktorýkoľvek prvok stránky, ktorý bude mať atrbút class="menu-vodorovne" sa sformátuje určeným spôsobom
v našom prípade je kontajnerom prvok nav a elementami odkazy a
vlastnosť display prepína zobrazovací režim prvku, hodnota flex znamená flexbox
vlastnosť justify-content určuje, ako sa v kontajneri položky rozložia, v tomto prípade sa voľné miesto rozdelí rovnomerne okolo každého prvku.

3. Vzhľad vodorovného menu

Na zlepšenie estetického dojmu do CSS pripíšeme ešte ďalšie pravidlá.

  nav {
    background-color: white;
    height:200%;
  }

4. Menu bude všade

Vytvor všetky .html súbory, na ktoré odkazuješ vo svojej verzii. Menu prekopíruj do všetkých html súborov - globálne navigačné menu sa musí nachádzať na všetkých podstránkach.

5. Úlohy na záver

Návštevníkovi tvojho webu veľmi pomôže pri orientácii, ak práve čítanú stránku zvýrazníš v menu. Teda napr. ak si na podstránke Fotogaléria či Kontakt, tak v menu je zvýraznený príslušný odkaz. (Nazýva sa to vizuálna spätná väzba). S využitím atribútu class="active" a CSS vlastnosti background-color vyrob takúto vizuálnu odozvu pre všetky práve vytvorené podstránky tvojho webu.
Pridaj do css štýlu rovnakú vizuálnu odozvu na odkazy menu, ponad ktoré sa ide myšou.