Vysúvacie menu
Na našej stránke sme použili statické menu, ktorého položky sa zobrazujú na svojom danom mieste. To znamená, že ak by sme stránke pridali viacero podstránok, pravdepodobne by odkazy na ne skončili v zozname ako ďalšia položka, pretože sú položky zotriedené od hora dole a je teoreticky nane dosť priestoru. Vo väčšine majú webové stránky oveľa viacej podstránok s rôznym obsahom. Tieto stránky sú zotriedené (rozdelené) do niekoľko hlavných kategórii, na ktoré sa odkazy vyskytujú v hlavnom menu a sú na stránke viditeľné po celý čas. Takéto menu, podobne ako to naše, je najčastejšie umiestnené v ľavom bočnom stĺpci (ako v našom prípade) alebo v hlavičke v riadku – ako navigačná lišta. Keďže je podstránok veľa, nie je priestor, aby boli odkazy na všetky viditeľné v hlavnom menu. Preto sa do hlavného menu zvykne zobraziť len hlavná kategória/oblasť stránok.
Odkazy na podstránky alebo aj podkategórie, ktoré môžu v sebe zahŕňať ďalšie podkategórie alebo priamo už odkazy na nejaké podstránky, sú vo väčšine skryté (nezobrazujú sa) a zobrazujú sa v momente, kedy sa myšou zobrazíme ponad odkaz hlavnej kategórie alebo niekedy až po kliknutí. Takýto zoznam, ktorý sa následne zobrazí, sa zvykne nazývať ako dropdown list (rozbaľovací/vysúvací zoznam) a slúži na zobrazenie submenu (podmenu – vnorené menu). Takýto zoznam sa vo väčšine akokeby vysunie, buď zhora nadol v prípade horného menu, zľava doprava v prípade bočného menu alebo sa jednoducho len zobrazí v momente, ako sme myšou ponad odkaz v hlavnom menu.
Takúto funkcionalitu je možné zabezpečiť iba pomocou použita jazyka CSS, nič extra na to nie je potrebné. Poďme si teda rozobrať náš problém, rozdelíme si ho na dve hlavé časti. Najprv by sme mali spraviť dané submenu nejakej hlavnej položke, ktoré sa bude pri načítaní stránky zobrazovať. Problém je v tom, že sa budeme musieť troška pohrať s pravidlami v CSS, pretože toto menu sa musí zobrazovať ponad ostatný obsah webstránky a musí ho prekrývať. Keby to tak nebolo, tak nám to rozhádže ostatné elementy a to nechceme, menu by bolo v tomto prípade súčasťou flowu (toku) elementov na stránke (zľava doprava, od hora dole, ako kocky lega...).
Potrebujeme v podstate rovnaké menu, ako máme, len ho musíme zobraziť na inej pozícii a to tak, aby sa zobrazoval ponad ostatný obsah. Ak si dobre pamätáme, tak vlastnosť position mala viacero hodnôt, defaultne sú prvky statické (static), čo znamená, že sú súčasťou štandardného flowu prvkov na stránke. Dve hodnoty tejto vlastnosti sú také, kedy prvok nie je súčastou tohto flowu, ale zobrazuje sa akokeby v inej vrstve prvkov a sú to fixed a absolute. Ak si pamätáte, fixed je prípad, kedy sa prvok zobrazuje fixne na pevne zadanej pozícii voči zobrazovanej ploche prehliadača. My však chceme, aby sa menu po zobrazení normálne scrollovalo, preto bude mať práve pozíciu absolútnu. Z definície vieme, že táto pozícia je absolútna voči najbližšiemu prvku so zadanou pozíciou (relative, fixed alebo absolute). Naše submenu bude obsahom odkazu z hlavného menu, takže pre prvky LI nášho menu nastavíme position na relative, aby submenu mohlo byť zobrazené absolútne k tomuto prvku. Zadáme mu aj pozíciu (top, left) tak, aby sa zobrazoval na úrovni tlačítka z hlavného menu a aby jeho ľavý kraj bol zarovno s pravým krajom hlavnej položky. Skúste si to sami, mohlo by to vyzerať asi takto:
menu.php:
<div class="sidebar left">
<ul>
<li><a class="<?php if($actual_page == "index"){echo 'active';}?>" href="index.php">Domov</a></li>
<li><a class="<?php if($actual_page == "o-nas"){echo 'active';}?>" href="o-nas.php">O nás</a></li>
<li><a class="<?php if($actual_page == "fotogaleria"){echo 'active';}?>" href="fotogaleria.php">Fotogaléria</a></li>
<li>
<a class="<?php if($actual_page == "kontakt"){echo 'active';}?>" href="kontakt.php">Kontakt</a>
<ul class="submenu">
<li><a href="kontakt.php">Kontakt</a></li>
<li><a href="kontakt.php">Kontakt</a></li>
</ul>
</li>
</ul>
</div>
global.css (časť menu):
/**********MENU***********/
.sidebar{
width: 200px;
height: 400px;
}
.sidebar UL{
list-style-type: none;
padding: 0;
margin: 0;
}
.sidebar UL LI{
position: relative;
}
.sidebar UL LI A, .sidebar UL LI:HOVER .submenu A{
display: block;
padding: 15px 0px 15px 35px;
border-bottom: 1px solid #7d8079;
color: #7d8079;
text-decoration: none;
text-transform: uppercase;
}
.sidebar UL LI A.active{
color: #f5f7f4;
background-color: #f96b81;
}
.sidebar UL LI:HOVER A, .sidebar UL LI .submenu LI:HOVER A{
background-color: #5b6b78;
color: #d6e3e9;
}
.main-content{
width: calc(100% - 241px);
min-height: 700px;
border-left: 1px solid #7d8079;
padding-left: 20px;
padding-right: 20px;
}
.submenu{
border: 2px solid #7d8079;
position: absolute;
top: -1px;
left: 201px;
width: 200px;
background-color: #FFFFFF;
}
.sidebar UL LI:HOVER .submenu A{
background-color: #FFFFFF;
}
Ako vidíte vo výsledku, pri položke kontakt sa nám zobrazuje submenu. Ako sme spomenuli, jeho pozíciu zabezpečí relatívne LI, absolútne submenu a zadanie pozície. Keďže sme si dizajn hlavného menu zadávali cez selector elementu UL, všetky tieto pravidlá sa aplikujú aj na naše submenu, pretože je to takisto prvok UL s LI, v ktorých sú odkazy (a). Čiže ak ste toto neriešili, stalo sa vám to, že pri hover stavu elementu LI v hlavnom menu sa vyfarbili aj položky v submenu, aj keď sa nemali. Je to preto, pretože pravidlo .sidebar UL LI:HOVER A sa aplikovalo aj na odkaz v submenu, pretože táto cesta jasne vraví že všetky odkazy (a) v ul kde je prvok li práve v stave hover. V danom li sa nachádza zoznam (ul) submenu, ktorý má tiež odkazy. Tu je vidieť, že tento selector nehovorí, že to pravidlá majú mať len odkazy, ktoré sú priamo v danom LI – akokeby v prvej vrstve (prvej úrovni), ale jednoducho všetko čo je ďalej (hlbšie). Preto sme museli zadať k normálnemu dizajnu odkazu aj selector .sidebar UL LI:HOVER .submenu A, aby odkazy submenu boli pri hover stave prvku z hlavného menu aj tak zobrazené normálne. Tie majú byť iným dizajnom (pre hover) len, ak je v stave hover prvok zo submenu, čiže .sidebar UL LI .submenu LI:HOVER A. Aby bolo submenu viditeľné od zvyšku stránky, pridali sme mu orámovanie a biele pozadie.
Prvú úlohu sme teda splnili, ostáva nám ešte vyriešiť to, aby sa menu schovávalo, resp. aby nebolo zobrazené a aby sa zobrazilo len v prípade, že sme sa myšou zobrazili ponad prvok z hlavného menu. Ak si spomeniete, pri preberaní vlastnosti display a jej hodnotách sme si povedali, že hodnota none (nič) sa používa na schovávanie elementov. Ak má prvok zadané toto pravidlo, tak ho nevidno, nie je zobrazené. A presne toto použijeme v našom prípade. Defaultne bude naše submenu schované a zobrazené (display : block) bude iba v prípade, že prvok hlavného menu je v stave hover, takže by to malo vyzerať takto:
global.css (iba zmeny):
.submenu{
display: none;
}
.sidebar UL LI:HOVER .submenu{
display: block;
}
Takéto zadanie pravidiel sa využíva vo webstránkach veľmi často. Nastavenie hlavného prvku na relatívnu pozíciu a jeho potomka (child element) na absolútnu vzhľadom k nemu sa používa vo veľmi veľa prípadoch, kedy potrebujeme niečo zobraziť pri danom prvku ponad zvyšný obsah stránky (popup bubliny a podobne...). Takisto schovávanie/zobrazovanie elementov po nejakej akcii pomocou vlastnosti display je veľmi často používané.