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é.

Máte nejakú otázku alebo Vám niečo nie je jasné? Napíšte nám na info@zacni-programovat.sk a poradíme!

Obsah súborov projektu po tejto prednáške

1 - footer.php

<div class="footer">
</div>

2 - fotogaleria.php

<!DOCTYPE html>

<html lang="sk">
<head>
<title>Vitajte na našej prvej skutočnej webstránke!</title>

<meta charset=“UTF-8“>
<meta name="description" content="Ponúkame vám lekcie jazykov HTML, CSS, PHP a mnoho ďalších užitočných rád pri programovaní">
<meta name="keywords" content="programovanie, html, css, php, webstranka, web, tvorba webu, web developer, ucenie programovania, ako programovat">

<link rel="stylesheet" type="text/css" href="global.css">
</head>

<body>
<?php $actual_page = "fotogaleria";?>
<div class="main">

<?php include "header.php";?>

<div class="content">

<?php include "menu.php";?>

<div id="gallery-content" class="main-content right">
<h1>Fotogaléria</h1>
<div class="line"></div>

<?php

$pictures = array();

for($i = 0; $i < 30; $i++){
$pictures[] = 'images/placeholder.jpg';
}

//zadefinovanie maximalneho poctu pre jednu stranku a nacitanie parametra (urcenie aktualnej stranky)
$countPerPage = 12;
if($_GET['page']){
$page = $_GET['page'];
}else{
$page = 1;
}

//vypocet od ktorej po ktoru fotku zobrazujeme galeriu
$start = ($page-1)*$countPerPage;
$end = $page*$countPerPage;

echo '<ul id="gallery">';
for($i = $start; $i < $end; $i++){

if($pictures[$i]){
echo '<li>';

echo '<a class="left';
if(($i+1)%3){
echo ' photo-margin';
}
echo '" target="_blank" href="'.$pictures[$i].'">';

echo '<img src="'.$pictures[$i].'">';
echo '</a>';
echo '</li>';
}
}
echo '</ul>';

//cyklus, ktory nam vypise dostatocny pocet odkazov pre jednotlive stranky
$pageLink = 1;
$photosCount = count($pictures);

echo '<ul class="pagination">';
while($photosCount > 0){

echo '<li><a ';

if($pageLink == $page){
echo ' class="active" ';
}

echo 'href="fotogaleria.php?page='.$pageLink.'">'.$pageLink.'</a>';
echo '</li>';
$photosCount = $photosCount - $countPerPage;
$pageLink++;
}
echo '</ul>';

?>
</div>

<div class="clear"></div>
</div>

<?php include "footer.php";?>
</div>
</body>
</html>

3 - global.css

BODY{
margin: 0;
background-color: #dee8e7;
font-family: Arial;
}

H1{
color: #5b6b78;
margin-bottom: 10px;
}

.line{
height: 3px;
border-top: 1px dotted #5b6b78;
border-bottom: 1px dotted #5b6b78;
margin-bottom: 25px;
}

.main{
background-color: #f6f7f1;
width: 900px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
}

.header{
border-bottom: 1px solid #7d8079;
height: 150px;
}

.header-inner1{
}

.header-inner2{
}

.content{
}

.footer{
border-top: 1px solid #7d8079;
height: 200px;
}

.half-width{
width: 50%;
}

.full-height{
height: 100%;
}

.left{
float: left;
}

.right{
float: right;
}

.clear{
clear: both;
}

/**********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{
display: none;
border: 2px solid #7d8079;
position: absolute;
top: -1px;
left: 201px;
width: 200px;
background-color: #FFFFFF;
}

.sidebar UL LI:HOVER .submenu{
display: block;
}

.sidebar UL LI:HOVER .submenu A{
background-color: #FFFFFF;
}

.main-content{
width: calc(100% - 241px);
min-height: 700px;
border-left: 1px solid #7d8079;
padding-left: 20px;
padding-right: 20px;
}

/**********GALERIA***********/
#gallery{
display: inline-block;
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
}

#gallery A{
display: block;
height: 133px;
margin-bottom: 10px;
}

#gallery A:HOVER{
outline: 2px solid #7d8079;
}

#gallery IMG, #gallery A{
width: 213px;
}

.photo-margin{
margin-right: 10px;
}

/**********PERSONS***********/
.persons{
width: 100%;
table-layout: fixed;
font-family: Arial;
}

.persons, .persons TH, .persons TD{
border: 1px solid #D9E4E6;
}

.persons TH, .persons TD{
padding: 15px;
}

.persons TH{
background-color: #167F92;
color: #FFFFFF;
font-weight: normal;
text-transform: uppercase;
}

.persons TR:nth-child(odd){
background-color: #D9E4E6;
}

.persons TR{
color: #024457;
background-color: #FFFFFF;
}

.persons TD{
font-size: 14px;
}

.persons TR:HOVER{
color: #f5f7f4;
background-color: #f96b81;
cursor: pointer;
}

/**********PERSONS***********/
.contact_form{
padding: 20px;
border: 1px solid #ebebeb;
background-color: white;
font-family: Arial;
font-size: 14px;
color: #455560;
text-transform: uppercase;
text-align: center;
}

.contact_form INPUT, .contact_form TEXTAREA, .contact_form LABEL{
display: block;
width: 100%;
}

.contact_form LABEL{
margin-bottom: 5px;
text-align: left;
}

.contact_form INPUT, .contact_form TEXTAREA{
height: 30px;
border: 1px solid #bababa;
margin-bottom: 30px;
}

.contact_form TEXTAREA{
min-height: 100px;
min-width: 100%;
max-width: 100%;
}

.contact_form INPUT[type="submit"]{
display: inline;
width: 200px;
height: 40px;
background-color: #7bc143;
border: 1px solid #6fae3c;
font-size: 16px;
color: #FFFFFF;
text-transform: uppercase;
}

.contact_form INPUT[type="submit"]:HOVER{
cursor: pointer;
background-color: #42aa44;
}

.success, .error{
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 10px;
}

.success {
color: #4F8A10;
background-color: #DFF2BF;
}

.error {
color: #D8000C;
background-color: #FFBABA;
}
/**********PAGINATION***********/
#gallery-content{
text-align: center;
}

ul.pagination {
display: inline-block;
padding: 0;
margin: 10px 0px 20px 0px;
}

ul.pagination li {
display: inline;
}

ul.pagination li a {
color: black;
padding: 8px 16px;
text-decoration: none;
border: 1px solid #ddd;
}

ul.pagination li a.active {
background-color: #4CAF50;
color: white;
}

ul.pagination li a:hover{
background-color: #ddd;
}

.map{
margin: 30px 0px;
text-align: center;
padding: 25px 0px;
background-color: #FFFFFF;
}

4 - header.php

<div class="header">
<div class="header-inner1 full-height half-width left"></div>
<div class="header-inner2 full-height half-width left"></div>
</div>

5 - index.php

<!DOCTYPE html>

<html lang="sk">
<head>
<title>Vitajte na našej prvej skutočnej webstránke!</title>

<meta charset=“UTF-8“>
<meta name="description" content="Ponúkame vám lekcie jazykov HTML, CSS, PHP a mnoho ďalších užitočných rád pri programovaní">
<meta name="keywords" content="programovanie, html, css, php, webstranka, web, tvorba webu, web developer, ucenie programovania, ako programovat">

<link rel="stylesheet" type="text/css" href="global.css">
</head>

<body>
<?php $actual_page = "index";?>
<div class="main">

<?php include "header.php";?>

<div class="content">

<?php include "menu.php";?>

<div class="main-content right">
<h1>Domov</h1>
<div class="line"></div>
</div>

<div class="clear"></div>
</div>

<?php include "footer.php";?>
</div>
</body>
</html>

6 - kontakt.php

<!DOCTYPE html>

<html lang="sk">
<head>
<title>Vitajte na našej prvej skutočnej webstránke!</title>

<meta charset=“UTF-8“>
<meta name="description" content="Ponúkame vám lekcie jazykov HTML, CSS, PHP a mnoho ďalších užitočných rád pri programovaní">
<meta name="keywords" content="programovanie, html, css, php, webstranka, web, tvorba webu, web developer, ucenie programovania, ako programovat">

<link rel="stylesheet" type="text/css" href="global.css">
</head>

<body>
<?php $actual_page = "kontakt";?>
<div class="main">

<?php include "header.php";?>

<div class="content">

<?php include "menu.php";?>

<div class="main-content right">
<h1>Kontakt</h1>
<div class="line"></div>

<?php
if($_SERVER['REQUEST_METHOD'] == 'POST' && $_POST['contact_form']){
if(!preg_match('#^[a-zA-Z0-9]{5,10}$#', $_POST['name']) || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)){
echo '<p class="error">Zadajte prosim korektne udaje</p>';

//naplnenie formulara
$name = $_POST['name'];
$email = $_POST['email'];
$subject = $_POST['subject'];
$message = $_POST['message'];
}else{
//odoslanie emailu
echo '<p class="success">Vasa sprava bola uspesne odoslana.</p>';

$name = '';
$email = '';
$subject = '';
$message = '';
}

}

?>

<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post" class="contact_form">
<label for="email">Meno a priezvisko</label>
<input type="text" name="name" id="name" value="<?php echo $name;?>"><br><br>

<label for="email">Email</label>
<input type="text" name="email" id="email" value="<?php echo $email;?>"><br><br>

<label for="subject">Predmet</label>
<input type="text" name="subject" id="subject" value="<?php echo $subject;?>"><br><br>

<label for="message">Správa</label>
<textarea name="message" id="message" placeholder="Zadajte text spravy..."><?php echo $message;?></textarea><br><br>

<input type="submit" name="contact_form" value="Odoslat">
</form>

<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d84199.38373426767!2d19.06093170408453!3d48.73928892777478!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47153de36e8ad42f%3A0xf8223f8a0b8b9032!2sBansk%C3%A1+Bystrica!5e0!3m2!1ssk!2ssk!4v1465151393672" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>

<div class="clear"></div>
</div>

<?php include "footer.php";?>
</div>
</body>
</html>

7 - 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>

8 - o-nas.php

<!DOCTYPE html>

<html lang="sk">
<head>
<title>Vitajte na našej prvej skutočnej webstránke!</title>

<meta charset=“UTF-8“>
<meta name="description" content="Ponúkame vám lekcie jazykov HTML, CSS, PHP a mnoho ďalších užitočných rád pri programovaní">
<meta name="keywords" content="programovanie, html, css, php, webstranka, web, tvorba webu, web developer, ucenie programovania, ako programovat">

<link rel="stylesheet" type="text/css" href="global.css">
</head>

<body>
<?php $actual_page = "o-nas";?>
<div class="main">

<?php include "header.php";?>

<div class="content">

<?php include "menu.php";?>

<div class="main-content right">
<h1>O nás</h1>
<div class="line"></div>

<?php
$person_1 = array('Raťafák', 'Plachta', 'plachtos@mail.sk','0903 123 123');
$person_2 = array('Od kuka', 'do kuka', 'kuko@mail.sk','0903 123 123');
$person_3 = array('Joey', 'Tribbiani', 'ako.sa.mas@mail.sk','0903 123 123');
$person_4 = array('Charlie', 'Harper', 'hooker@mail.sk','0903 123 123');
$person_5 = array('Chruno', 'Moysey', 'abstinent@mail.sk','0903 123 123');

$pole = array($person_1, $person_2, $person_3, $person_4, $person_5);

$pole[5] = array('Jardo', 'Jágr', 'legenda@mail.sk','0903 123 123');

echo '<table class="persons">';
echo '<tr>';
echo '<th>Meno</th>';
echo '<th>Priezvisko</th>';
echo '<th>Email</th>';
echo '<th>Telefónne číslo</th>';
echo '</tr>';

for($i=0; $i<count($pole); $i++){
echo '<tr>';

for($j=0; $j<count($pole[$i]); $j++){
echo '<td>'.$pole[$i][$j].'</td>';
}

echo '</tr>';
}

echo '</table>';

?>
</div>

<div class="clear"></div>
</div>

<?php include "footer.php";?>
</div>
</body>
</html>

Ťažko sa vám učí samému?

Máte problémy s niektorými časťami alebo sa neviete učiť sám? Využite našu možnosť individuálnej asistencie:

  • samostatný prístup
  • vysvetlenie nejasností prebraného učiva
  • úlohy a cvičenia navyše
  • všetko z pohodlia domova cez mail a skype

Pre viac info kliknite tu

Kľúčové slová prednášky

vysuvacie menuschovavacie menudropdown listschovavanie poloziekpodmenusubmenu

IT ftip

Programátor ide o ôsmej večer z práce a stretne šéfa. Čo tak skoro? Vzali ste si pol dňa voľna? Ale nie, pán šéf, len si skočím na obed.