Vodorovné navigačné menu je v súčasnosti bežnou súčasťou navigácie na weboch. Jeho základné charakteristiky:
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).
<!-- 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ácianav
vie dať nevidiaci dať povel prehliadaču skoč na navigáciu, a tak sa môže na stránke lepšie zorientovať/* tento kód bude v súbore so štýlom */
.menu-vodorovne {
display: flex; /* zobrazovací režim flexbox */
justify-content: space-around;
}
class="menu-vodorovne"
sa sformátuje určeným spôsobom nav
a elementami odkazy a
display
prepína zobrazovací režim prvku, hodnota flex
znamená flexboxjustify-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.Na zlepšenie estetického dojmu do CSS pripíšeme ešte ďalšie pravidlá.
nav {
background-color: white;
height:200%;
}
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.
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.