Navigačné menu – Dizajn zoznamu

Po naprogramovaní layoutu pre našu stránku sa môžeme konečne pustiť do programovania konkrétnych častí – obsahu. Začneme tým, že si spravíme navigačné menu, pomocou ktorého sa budeme medzi podstránkami nášho projektu pohybovať. Použijeme na to prvok zoznam (list), ktorého položky budú obsahovať odkazy na jednotlivé stránky. Toto menu bude samozrejme v samostatnom súbore, ktorý si budeme načítavať do každého súboru (podstránky). Toto menu si naštýlujeme, takže sa tým naučíme dizajnovať prvok list.

 

Začnime teda tým, že si vytvoríme okrem našej domovskej stránky (index.php) ďalšie tri, nateraz ich pomenujme page1, page2, page3 a vložme do nich základný kód (štruktúru) webstránky s jedným nadpisom, aby sme vedeli, na ktorej stránke sa nachádzame. Ďalej si vytvoríme súbor menu.php, do ktorého budeme naše menu definovať. Toto menu si načítame do každej stránky pomocou funkcie include, nateraz doňho vložíme len nadpis s textom menu. Okrem toho vás možno napadlo, že aj kód našej hlavičky a pätičky by sa opakoval, takže aj pre tieto časti webstránky si vytvoríme osobitné súbory a nazveme ich header.php a footer.php a vnoríme si ich do každého súboru. Náš projekt by mal teda vyzerať takto:

 

menu.php:

<div class="sidebar left">
    <h2>Menu</h2>
</div>

 

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>

 

footer.php:

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

 

index.php:

<body>
    <div class="main">

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

        <div class="content">

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

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

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

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

 

page1/page2/page3.php – len zmenený h1:

<body>
    <div class="main">

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

        <div class="content">

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

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

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

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

 

Súborovú štruktúru nášho projektu máme pripravenú, menu budeme programovať iba v súbore menu.php a jeho dizajn v súbore global.css, ostatné súbory nás nebudú teraz zaujímať. Našou úlohou je vytvoriť menu, ktoré bude obsahovať odkazy na všetky štyri stránky. Pri programovaní webstránky by sme sa mali riadiť systémom, že sa vždy najprv naprogramuje funkcionalita (html + PHP) a dizajn sa rieši až na záver. Poďme teda na to.

 

Tak ako sme to spravili už v sekcii jazyka HTML, základ nášho menu bude tvoriť nezotriedený zoznam (ul), ktorého každá položka (li – item) bude obsahovať jeden odkaz (a) na príslušnú stránku. Spomenuli sme si aj rôzne odrážkovanie zoznamu pomocou atribútov html, ako napríklad veľké písmena alebo rímske číslice. Na tieto parametre však slúžia samostanté vlastnosti, pomocou ktorých vieme naštýlovať zoznam pomocou jazyka CSS. My ich na naše menu však nebudeme aplikovať, pretože nechceme, aby jednotlivé položky menu mali nejaké odrážkovanie, budú mať vzhľad tlačítok s textom. Jednotlivé vlastnosti si však ukážeme, aby sme ich ovládali do budúcna.

 

Štýl odrážkovania, čiže či pred každou položkou bude bodka, štvorček, písmeno alebo číslo, sa určuje vlastnosťou list-style-type (typ šýtlu zoznamu). Jej hodnoty môžu byť viaceré, za zmienku stoja hodnoty dics (defaultná hodnota - plný krúžok), circle (prázdny krúžok), decimal (číslo), lower-latin (malé písmená), lower-roman (malé rímske číslice), none (žiadna), square (štvorček), upper-latin (veľké písmená našej abecedy) a upper-roman (veľké rímske číslice). Naše menu bude vertikálne, takže pôjde od hora dole. Vizuálne to bude vyzerať tak, že aktívna položka (tá stránka, na ktorej sa práve nachádzame) bude jednou farbou po celej dĺžke menu, ostatné položky budú inou farbou a jednotlivé položky budú oddelené tenkou čiarou. V samotnej položke – tlačítku bude iba text, takže nebudeme chcieť pre náš zoznam žiadne odrážkovanie, takže budeme mať vlastnosť list-style-type nastavenú na hodnotu none.

 

Okrem týchto niekoľkých preddefinovaných typov odrážok je možnosť nastaviť ako odrážku vlastný obrázok. Doteraz sme obrázok definovali len v jazyku HTML pomocou atribútu img, kde sme do atribútu src zadávali URL adresu obrázka. Obrázok sa však dá viacerými spôsobmi priradiť aj v jazyku CSS, takisto pomocou URL adresy. Pri zozname slúži na to vlastnosť list-style-image, ktorej hodnota je štandardne url adresa obrázka. Táto hodnota sa zadáva slovom url, za ktorým je v okrúhlych zátvorkách v úvodzovkách URL adresa obrázka.

 

Posledná vlastnosť CSS, ktorá sa dá nastaviť pri zozname je list-style-position a slúži na zadefinovanie toho, či sa dané odrážky (písmeno, krúžok...) budú nachádzať priamo v zozname (hodnota inside – vo vnútri - v prvkoch li) alebo mimo nich (defaultná hodnota outside – von – mimo li). Toto sa využíva napríklad vtedy, ak máme samotné prvky (obdĺžnik prvku li) jednou farbou a okolie zoznamu (celého elementu) inou farbou. Touto vlastnosťou si zadefinujeme, či chceme mať odrážky v rámci prvku li alebo nie. Podobne ako pri iných prvkoch, ktoré sa môžu dizajnovať viacerými vlastnosťami, aj tu je možné zadať všetky pravidlá naraz pomocou vlastnosti list-style, kde poradie vlastností je type, position a image. V nasledujúcej ukážke si vyskúšame všetky tieto vlastnosti zoznamu, aby sme ich poznali:

 

menu.php:

<div class="sidebar left">
    <!-- <ul>
        <li class="active"><a href="index.php">Domov</a></li>
        <li><a href="page1.php">page1</a></li>
        <li><a href="page2.php">page2</a></li>
        <li><a href="page3.php">page3</a></li>
    </ul> -->

    <ul>
        <li><a href="index.php">Domov</a></li>
        <li><a href="page1.php">page1</a></li>
        <li><a href="page2.php">page2</a></li>
        <li><a href="page3.php">page3</a></li>
    </ul>

    <ul class="zoznam1">
        <li><a href="index.php">Domov</a></li>
        <li><a href="page1.php">page1</a></li>
        <li><a href="page2.php">page2</a></li>
        <li><a href="page3.php">page3</a></li>
    </ul>

    <ul class="zoznam2">
        <li><a href="index.php">Domov</a></li>
        <li><a href="page1.php">page1</a></li>
        <li><a href="page2.php">page2</a></li>
        <li><a href="page3.php">page3</a></li>
    </ul>

    <ol class="zoznam3">
        <li><a href="index.php">Domov</a></li>
        <li><a href="page1.php">page1</a></li>
        <li><a href="page2.php">page2</a></li>
        <li><a href="page3.php">page3</a></li>
    </ol>
</div>

 

global.css:

.zoznam1{
    list-style-type: square;
    background-color: red;
}

.zoznam1 LI{
    background-color: yellow;
}

.zoznam2{
    list-style-image: url('http://www.w3schools.com/css/sqpurple.gif');
    list-style-position: inside;
    /*list-style: inside url('http://www.w3schools.com/css/sqpurple.gif');*/
    background-color: green;
}

.zoznam2 LI{
    background-color: yellow;
}

.zoznam3{
    list-style: upper-roman;
}

 

Poďme si rozobrať našu ukážku. Prvý zoznam je defaultný, nepriradili sme mu žiadne pravidlá jazyka CSS, takže má hodnotu list-style-type nastavenú defaultne na disc (plný krúžok). Druhému zoznamu sme nastavili túto vlastnosť na hodnotu square, takže ako vidíte, odrážkovanie je tvorené štvorčekmi. Okrem toho sme nastavili jednu farbu prvku UL a druhú farbu jeho prvkom (LI). Keďže sme nedefinovali vlastnosť list-style-position, je táto vlastnosť nastaveá defaultne na hodnotu outside (vonka). Je vidieť, že odrážkovanie (štvorčeky) sa nachádza mimo položiek zoznamu, ktoré sú žlté. Nachádza sa v priestore samotného zoznamu (ul) v červenej ploche.

 

Na treťom zozname (trieda zoznam2) sme túto vlastnosť nastavili na hodnotu inside (vnútri) a ako je vidieť na výsledku, odrážkovanie sa nachádza tentoraz vo vnútri položiek zoznamu, čiže v žltej ploche prvkov zoznamu (li). Okrem toho sme tomuto zoznamu nastavili vlastnosť list-style-image a ako hodnotu sme použili obrázok, ktorý je uložený na internete. Všimnite si, že sa URL používa podobne ako v prípade tagu img v atribúte src. Pri poslednom zozname sme použili zotriedený zoznam (ol) a nastavili sme mu veľké rímske číslice. Všimnite si, že sme mu to nezadali pomocou vlastnosti list-style-type, ale použili sme globálnu vlastnosť pre tento prvok list-style, v ktorej môžeme nadefinovať všetky tri vlastnosti naraz. Zadali sme na začiatku iba typ, pretože position sme nechali defaultnú a image sme nepoužili, takže sa berie hodnota none. V prípade tretieho zoznamu (trieda zoznam2) sme mohli zadať dve zadané vlastnosti pomocou jednou ako:
list-style: inside url('http://www.w3schools.com/css/sqpurple.gif');

 

Ak ste si poskúšali jednotlivé vlastnosti zoznamu a pochopili ste ich, môžete si kód CSS z poslednej ukážky v súbore global.css vymazať a takisto si vymažte aj posledné tri zoznamy, nechajte si tam iba ten prvý. V nasledujúcej kapitole si ideme toto menu naštýlovať do finálnej podoby. Súbor menu.php by mal teda vyzerať takto:

 

menu.php:

<div class="sidebar left">
    <h2>Menu</h2>
    <ul>
        <li><a href="index.php">Domov</a></li>
        <li><a href="page1.php">page1</a></li>
        <li><a href="page2.php">page2</a></li>
        <li><a href="page3.php">page3</a></li>
    </ul>
</div>

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 - global.css

BODY{
margin: 0;
}

.main{
width: 900px;
margin: auto;
background-color: #CCCCCC;
}

.header{
background-color: #00FF00;
height: 150px;
}

.header-inner1{
background-color: #0000FF;
}

.header-inner2{
background-color: #FFA500;
}

.half-width{
width: 50%;
}

.full-height{
height: 100%;
}

.left{
float: left;
}

.content{
}

.right{
float: right;
}

.clear{
clear: both;
}

.sidebar{
width: 200px;
height: 400px;
border-right: 1px solid #000000;
}

.main-content{
width: calc(100% - 201px);
background-color: #FFFF00;
min-height: 700px;
}

.footer{
height: 200px;
background-color: #000000;
}

.zoznam1{
list-style-type: square;
background-color: red;
}

.zoznam1 LI{
background-color: yellow;
}

.zoznam2{
list-style-image: url('http://www.w3schools.com/css/sqpurple.gif');
list-style-position: inside;
/*list-style: inside url('http://www.w3schools.com/css/sqpurple.gif');*/
background-color: green;
}

.zoznam2 LI{
background-color: yellow;
}

.zoznam3{
list-style: upper-roman;
}

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

4 - 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>
<div class="main">

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

<div class="content">

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

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

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

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

5 - menu.php

<div class="sidebar left">
<h2>Menu</h2>
<ul>
<li><a href="index.php">Domov</a></li>
<li><a href="page1.php">page1</a></li>
<li><a href="page2.php">page2</a></li>
<li><a href="page3.php">page3</a></li>
</ul>
</div>

6 - page1.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>
<div class="main">

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

<div class="content">

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

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

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

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

7 - page2.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>
<div class="main">

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

<div class="content">

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

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

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

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

8 - page3.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>
<div class="main">

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

<div class="content">

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

<div class="main-content right">
<h1>Page3</h1>
</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

htmlcssdizajn zoznamumenu na strankenavigacne menumenumenu zoznamzoznam csscss listlist style

IT ftip

Zomrie programátor a dostane sa do pekla. Po týždni Lucifer volá Bohovi: - Čo za blázna si mi sem poslal? Zničil mi všetky kotly, poškrtil všetkých čertov a už tri dni bezhlavo behá po všetkých chodbách pekla a reve "Kde je prechod do druhého levelu?"