Navigačné menu – Dizajn zoznamu 2

S dizajnom nášho menu začneme pekne poporiadku a to od najvrchnejšieho elementu (ul) až po najspodnejší (a). Na začiatok si odstránime nadpis a nadizajnujeme samotný zoznam. Možno si pamätáte a možno nie, defaultne má zoznam určené nejaké to vonkajšie odsadenia zhora a zdola (margin) a taktiež vnútorné zľava (padding), my to ale nechceme. Naše menu bude pekne vypĺňať celý rozmer bloku sidebar, takže bude všetko od kraja po kraj. Okrem toho nechceme odrážky, takže margin, padding bude na hodnote 0 a list-style-type bude na hodnote none.

Teraz musíme naštýlovať jednotlivé položky zoznamu. Defaultne zaberá li celú šírku, pretože je to blokový element a odkaz (a) je inline element, takže bude zaberať iba taký priestor, ako si to vyžaduje text. Ak by sme chceli, aby sa klikalo len na konkrétny text odkazu – vo vnútri prvku li, zadávali by sme si štýl aj pre prvok li (.sidebar ul li), aby to nejako vyzeralo, odsadenie odkazu od kraja (padding) a podobne. My však chceme, aby celý prvok li – bolo akokeby tlačítko, čiže aby celá plocha prvku li bol aj samotný odkaz. Keďže bude celú našu plochu zaberať odkaz, nejdeme zadávať štýl pre prvky li (.sidebar ul li), pretože ich môžeme rovno aplikovať na samotný odkaz (.sidebar UL LI A).

Chceme teda, aby náš odkaz zaberal celú plochu prvku li. Vieme, že aby prvok zaberal celú šírku, musí byť blokový, takže na začiatok nastavíme odkazu toto pravidlo. Ďalej nechceme, aby bol taký úzky na výšku, iba ako je text, takže mu pridáme nejaký padding zhora a zdola a aj z ľavej strany, aby nebol nalepený na ľavý okraj stránky. Čo sa týka textu, nastavíme mu font na Arial, zrušíme podčiarknutie, pretože to nie je vizuálne pekne a nastavíme transformáciu textu na uppercase, aby boli všetky písmená veľké.

Pravidlá ohľadom rozmiestnenia a rozmerov sme vyriešili, všetko by malo byť tak veľké ako chceme a malo by to byť na miestach, kde chceme. Teraz si nadefinujeme ešte nejaké farby, aby bolo vidno, že celú plochu na šírku zaberá náš odkaz a aby sme mali jednotlivé prvky zoznamu oddelené. Pridáme si na spodok každého odkazu v menu orámovanie, aby sme mali čiarou oddelené položky v menu a taktiež nastavíme farbu pre pozadie a pre text. Náš kód bude nateraz vyzerať takto:

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

.content{
}

.footer{
    background-color: #000000;
    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;
    border-right: 1px solid #000000;
}

.sidebar UL{
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.sidebar UL LI{
    background-color: #f6f7f1;
}

.sidebar UL LI A{
    display: block;
    padding: 15px 0px 15px 35px;
    border-bottom: 1px solid #7d8079;
    color: #7d8079;
    font-family: Arial;
    text-decoration: none;
    text-transform: uppercase;
}

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

Pozrite sa na výsledok tohto kódu, menu už teraz vyzerá s použitým dizajnom troška krajšie, však? Ako je vidieť, celú plochu prvku zoznamu tvorí náš odkaz, keď sa zobrazíme myšou kdekoľvek ponad tlačítko, zobrazí sa nám kurzor myši pre odkaz (prst – pointer). Celá stránka však vyzerá s tými farbami jednotlivých častí odstračujúco, tak to poďme napraviť.

Odstránime si všetky background-color pre jednotlivé časti, ktoré nám slúžili na to, aby sme videli, ako máme stránku rozdelenú na jednotlivé časti (header, footer, main-content, main). Celému priestoru prehliadača (body) nastavíme troška tmavšiu farbu (kód uvidíte v ukážke) a celej ploche stránky (main) nastavíme troška svetlejšiu farbu, tú ktorú sme použili ako pozadie odkazu v menu. Z menu túto farbu (background-color) odstránime a nastavíme to ako farbu celej stránke.

Aby sme mali troška oddelené jednotlivé časti a vyzeralo to lepšie, pridáme spodnú hranicu hlavičky tmavou farbou, ktorú sme použili ako spodný okraj odkazu v menu. Podobne nastavíme ľavý okraj bloku main-content aj s menším paddingom z ľavej strany, aby sme mali oddelené menu od hlavného obsahu a také isté horné orámovanie pre footer. Pravé orámovanie, ktoré bolo nastavené na prvok sidebar dáme preč. Pozastavím sa ešte nad paddingom zľava, ktoré pridáme prvku main-content. Ako sme si už dávnejšie vraveli, padding rozširuje rozmer daného prvku. Keďže šírku bloku main-content máme rátanú cez funkciu calc, po pridaní paddingu by sa nám šírka zväčšila o 20 pixelov kvôli paddingu, takže by nám tento blok teraz odskočil, pretože by sa nezmestil. Musíme týchto 20 pixelov, ktoré sme dali ako padding následne odrátať od celkovej šírky, takže budeme odpočítavať nie 201 ale 221 pixelov. Okrem toho si ešte nastavíme horný a spodný okraj celej stránky (main), aby nebola nalepená na okraje prehliadača. Teraz to už začne naozaj vyzerať ako skutočná webstránka:) Náš kód by mal vyzerať asi takto:

global.css:

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

.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{
}

.sidebar UL LI A{
    display: block;
    padding: 15px 0px 15px 35px;
    border-bottom: 1px solid #7d8079;
    color: #7d8079;
    font-family: Arial;
    text-decoration: none;
    text-transform: uppercase;
}

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

Teraz už naša stránka začína naozaj vyzerať ako skutočná. Samozrejme, farby si môžete nastavovať ako chcete a aj celkovo dizajn, ktorý si teraz budeme spolu robiť, je len ukážkový, aby sem sa ako tak naučili a pochopili, akým štýlom sa to asi robí. Aby bolo menu dizajnovo kompletné, mali by sme nastaviť nejaký iný dizajn prvku, nad ktorým sa nachádzame myšou (hover) a taktiež by sme nejako dizajnovo mohli rozlíšiť prvok, ktorá je aktívny, čiže aktuálne navštívená stránka.

Nastavíme si teda pre hover odkaz inú farbu, použijeme zase iný odtieň farby, ktorý bude tmavšia. Keďže bude farba tmavšia, aktuálna farba písma by sa na nej stratila, takže nastavíme aj farbu pre písmo troška svetlejšiu. Tieto pravidlá budeme definovať pre odkaz, nad ktorým sa nachádzame myšou, takže to bude selector .sidebar UL LI:HOVER A. Okrem toho si ešte vytvoríme triedu s názvom active, ktorá bude slúžiť na odkaz, ktorý je práve navštívený. Na začiatok si túto triedu natvrdo priradíme prvému odkazu v našom menu. Náš kód by mal vyzerať takto:

menu.php:

<div class="sidebar left">
    <ul>
        <li><a href="index.php" class="active">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>

global.css (iba pridaný kód):

.sidebar UL LI A.active{
    color: #f5f7f4;
    background-color: #f96b81;
}

.sidebar UL LI:HOVER A{
    background-color: #5b6b78;
    color: #d6e3e9;
}

Ako vidíte vo výsledku, prvá položka (domov) má iný dizajn, bude signalizovať aktuálne aktívnu položku z menu. Keď prejdeme myšou ponad prvky z menu, zvýraznia sa inou farebnou kombináciou.