Tak začíname s menu, ktoré sa zobrazuje v hornom okraji okna.
Pre toto menu ste už vykonali veľa predpráce. Určite si pamätáte na pekný farebný prechod, ktorý bol uložený ako jednopixelový obrázok. Práve ten je teraz v hre. Avšak pred tým je potrebné vytvoriť príslušnú HTML štruktúru pre oblasť menu. Môže to vyzerať nasledovne:
<div class="header"> <div class="header-top"> <h1>Tvoj daňový poradca</h1> </div> <div class="topmenu"> <ul> <li><a href="index.html">Domov</a></li> <li><a href="#">O nás</a></li> <li><a href="#">Ako pracujeme</a></li> <li><a href="#">Kontakt</a></li> <li><a href="#">Impressum</a></li> </ul> </div> <div class="header-img"> </div> </div>
Na vytvorenie pozadia sa vloží jednopixelový obrázok a vertikálne sa opakuje, kým nie je vyplnený celý prvok.
.topmenu {
background-image: url(../images/menue.jpg);
background-repeat: repeat-x;
width: 978px;
height: 37px;
float: left;
}
Následne sa môže formátovať menu. V zásade tu nie sú žiadne špeciálne požiadavky. Pri takýchto menu sú vždy kľúčové nasledujúce aspekty:
• Skryte odrážky pomocou list-style-type: none;.
• Uistite sa, že položky zoznamu sú zobrazené vedľa seba.
Pracujem v tomto bode - ako už dávno viete - s farebným prechodom, ktorý sa realizuje cez obrázok. Medzitým sú samozrejme k dispozícii mnohé ďalšie možnosti pre menu. Môžete napríklad myslieť na JavaScriptové rámce ako jQuery. Všetky tieto možnosti tu však predstaviť by jednoznačne prekročilo rámec tohto článku. Existuje mnoho online generátorov, cez ktoré je možné vytvoriť menu iba niekoľkými kliknutiami. Jedným z nich - bez hodnotenia, či je najlepší vo svojom druhu - nájdete na http://www.cssmenubuilder.com/.
Ja som sa osobne rozhodol pre nasledovnú variantu:
.topmenu ul {
width: 100%;
height: 37px;
list-style-type: none;
}
.topmenu ul li {
height: 37px;
float: left;
padding-right: 25px;
padding-left: 25px;
}
.topmenu ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 37px;
color: #fff;
text-decoration: none;
display: block;
height: 37px;
float: left;
padding-right: 20px;
padding-left: 20px;
}
.topmenu ul li a:hover {
background-image: url(../images/menue-hover.jpg);
background-repeat: repeat-x;
background-position: left top;
}
Skutočne dôležitý je len stav Hover. Keď nastane tento stav, zobrazí sa iný pozadiový obrázok.
Pravé menu
Webová stránka nemá len horizontálne menu, aj v pravej časti okna je zobrazené jedno.
Toto menu patrí do oblasti div s triedou content-right. Počas vývojovej fázy stránky som tam vložil len testovacie údaje.
<div class="content-right"> <h2>Hlavné menu</h2> <ul> <li><a href="#">Odkaz 1</a></li> <li><a href="#">Odkaz 2</a></li> <li><a href="#">Odkaz 3</a></li> <li><a href="#">Odkaz 4</a></li> <li><a href="#">Odkaz 5</a></li> <li><a href="#">Odkaz 6</a></li> <li><a href="#">Odkaz 7</a></li> <li><a href="#">Odkaz 8</a></li> <li><a href="#">Odkaz 9</a></li> <li><a href="#">Odkaz 10</a></li> </ul>
Oblasť sa najprv umiestni na vhodné miesto a nastaví sa požadovaná veľkosť.
.content-right {
width: 210px;
float: right;
padding-right: 20px;
margin-top: 20px;
border: 1px solid #eee;
}
Pokračuje sa definovaním samotného menu. Tentoraz sú položky usporiadané pod sebou. Stačí však dbať na to, aby boli skryté odrážky. Ostatné formátovanie menu je nakoniec na vás.
.content-right ul {
list-style-type: none;
}
.content-right ul li {
padding-left: 45px;
padding-top: 4px;
padding-bottom: 4px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #ccc;
}
.content-right ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
text-decoration: none;
text-align: left;
display: block;
}
.content-right ul li a:hover {
color: #0b90d6;
}V prehliadači by sa teraz malo zobraziť nasledujúce:
Dolné menu
V päte webovej stránky bude ďalšie menu. Aj na PSD-Tutorials.de sa používa takéto menu na poskytnutie odkazov na všeobecné informácie.
Na našej webovej stránke je tiež copyright upozornenie. Obe veci sú vlastne celkom typické pre webové stránky. Najprv opäť HTML štruktúra.
<div class="bottom"> <ul> <li><a href="index.html">Domov</a></li> <li><a href="#">O nás</a></li> <li><a href="#">Novinky</a></li> <li><a href="#">Ovládací panel</a></li> <li><a href="#">Kontakt</a></li> <li><a href="#">Imprint</a></li> <li><a href="#">Mapa stránok</a></li> </ul> <p>© Copyright 2014 by PSD-Tutorials.de</p> </div>
Je to jednoduchý ul-zoznam. Každá položka zoznamu obsahuje položku menu. Pod ul-zoznamom je p-element, v ktorom je copyright upozornenie. Čo teraz chýba, je samozrejme CSS syntax.
.bottom {
background-image: url(../images/footer.jpg);
background-repeat: no-repeat;
background-position: left top;
text-align: center;
width: 1000px;
height: 110px;
float: left;
}
Akýkoľvek spôsob, akým navrhnete svoj pätu, je nakoniec celkom na vás. Opäť používam farebný gradient. Môžete však napríklad zvoliť jednoduchú pozadiovú farbu alebo rovno použiť syntax CSS3. V prípade mojej grafickej variantu je však rozhodujúce, že opakovanie je zablokované pomocou background-repeat: no-repeat;.
Najprv sa pozrite na výsledok:
To, čo je na tomto mieste zaujímavé, sú biela čiary vedľa jednotlivých položiek menu. Tieto sú definované rôznymi príkazmi border-left, čo v konečnom dôsledku znamená, že jednolžové údaje sa vždy vzťahujú na ľavý okraj prvku.
Celkovo, syntax pre dolné menu vyzerá nasledovne:
.bottom ul {
margin-top: 30px;
list-style-type: none;
}
.bottom ul li {
display: inline;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #fff;
}
.bottom ul li a {
font-size: 12px;
color: #fff;
text-decoration: none;
padding-right: 15px;
padding-left: 15px;
}
.bottom ul li a:hover {
text-decoration: underline;
}
.bottom p {
font-size: 12px;
color: #fff;
margin-top: 40px;
}
.bottom a {
font-size: 12px;
color: #fff;
margin-top: 40px;
}
.bottom a:hover {
text-decoration: none;
}
Na rozdiel od horného menu tu existuje špecifika. V skutočnosti sa pri znázornení Hover nezobrazuje ďalší obrázok. Aby sa však návštevníkom stále dalo vedieť, že sa kurzorom myši prechádza nad odkazom, jednotlivé odkazy sa podčiarujú, keď nastane Hover udalosť.
Na konci tohto tutoriálu sú základné kroky smerujúce k webovej stránke hotové. Čo ešte chýba, je vylepšenie stránky. O tom viac v ďalších tutoriáloch.
