Takže začneme s menu, které je zobrazeno v horní oblasti okna.
Pro toto menu jste již udělali hodně předsazení. Jistě si pamatujete na pěkný barevný přechod, který byl uložen jako jednopixelová grafika. Přesně ten se nyní použije. Nicméně je třeba nejprve vytvořit odpovídající HTML strukturu pro oblast menu. Může to vypadat takto:
<div class="header"> <div class="header-top"> <h1>Váš daňový poradce</h1> </div> <div class="topmenu"> <ul> <li><a href="index.html">Domovská stránka</a></li> <li><a href="#">O nás</a></li> <li><a href="#">Jak pracujeme</a></li> <li><a href="#">Kontakt</a></li> <li><a href="#">Impresum</a></li> </ul> </div> <div class="header-img"> </div> </div>
Pro vytvoření pozadí se do menu vloží jednopixelová grafika a bude vertikálně opakována tolikrát, dokud nebude prvek kompletně vyplněn.
.topmenu {
background-image: url(../images/menue.jpg);
background-repeat: repeat-x;
width: 978px;
height: 37px;
float: left;
}
Následně může být menu formátováno. Zde není v podstatě nic zvláštního, na co byste se měli zaměřit. U těchto menu jsou zásadní ve skutečnosti vždy jen následující aspekty:
• Skryjte odrážky pomocí list-style-type: none;.
• Ujistěte se, že položky seznamu jsou zobrazeny vedle sebe.
Pracuji v tomto bodě – jak již víte – s barevným přechodem, který je realizován pomocí grafiky. Mezitím samozřejmě existuje pro menu k dispozici mnoho jiných možností. Stačí si například vzpomenout na JavaScriptové frameworky jako jQuery. Všechny tyto možnosti by zde samozřejmě přesahovaly rámec. Nicméně existuje spousta online generátorů, pomocí kterých lze vytvářet menu jedním kliknutím. Jedním z nich - aniž bychom posuzovali, zda je teď ten nejgeniálnější svého druhu - najdete na http://www.cssmenubuilder.com/.
Každopádně jsem se rozhodl pro následující 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;
}
Zásadní je skutečně pouze stav při najetí myší. Při vstupu do tohoto stavu je zobrazena jiná pozadí grafika.
Pravé menu
Stránka neobsahuje jen horní menu, stejně tak je zobrazeno menu v pravé oblasti okna.
Toto menu patří do oblasti div s třídou content-right. Pro vývojovou fázi stránky jsem tam umístil pouze falešné obsahy.
<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>
Oblast bude nejprve umístěna na správném místě a v požadované velikosti.
.content-right {
width: 210px;
float: right;
padding-right: 20px;
margin-top: 20px;
border: 1px solid #eee;
}V prohlížeči by se nyní měl zobrazit následující obrázek: V patičce webové stránky bude další menu. Zde na PSD-Tutorials.de se také používá podobné menu k poskytnutí odkazů na obecné informace..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;
}
Dolní menu
Na naší webové stránce je také copyright upozornění. Obě věci jsou ve skutečnosti docela typické pro webové stránky. Nejprve zde je HTML struktura.<div class="bottom">
<ul>
<li><a href="index.html">Domů</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="#">Impresum</a></li>
<li><a href="#">Mapa stránek</a></li>
</ul>
<p>© Copyright 2014 od PSD-Tutorials.de</p>
</div>
Jedná se o jednoduchý seznam ul. Každý položka seznamu obsahuje položku v menu. Pod ul seznamem je p prvek, ve kterém je copyright upozornění. Nyní zbývá samozřejmě CSS syntaxe..bottom {
background-image: url(../images/footer.jpg);
background-repeat: no-repeat;
background-position: left top;
text-align: center;
width: 1000px;
height: 110px;
float: left;
}
Jak nakonec navrhnete patu, zůstává samozřejmě pouze na vás. Já zase používám barevný přechod. Ale můžete například použít jednoduchou pozadí nebo rovnou syntaxi CSS3. V případě mé grafické varianty je však důležité, aby bylo opakování pomocí background-repeat: no-repeat; zabráněno.
Nejprve se podívejte na výsledek:
To, co zde upoutá pozornost, jsou bílé čáry vedle jednotlivých položek menu. Ty jsou definovány různými údaji pro border-left, což ve skutečnosti znamená, že údaje se vztahují k levému okraji elementu.
Celková syntax pro dolní menu pak vypadá následovně:.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;
}
Zde je jedna zvláštnost oproti hornímu menu. Skutečně se v případě přejetí myší nezobrazuje žádný další obrázek. Aby ale návštěvníkům přesto bylo jasné, že nad odkazem projíždějí myší, jsou jednotlivé odkazy podtržené, pokud dojde ke události hover.
Na konci tohoto průvodce základními kroky k webové stránce byly provedeny. To, co teď chybí, je zkrášlení stránky. O tom více v dalších průvodcích.
