Jak zvýraznit zvolenou položku v menu
Možná jste si všimli, tady nebo na jiném webu, té vychytávky - v menu je ta položka, která označuje právě zvolenou stránku, označena jinak. Správně asi tušíte, že je to zařízeno CSS; jak ale ví, kterou položku zvýraznit, když je to pokaždé jiná? Podíváme se na to; pomůže nám PHP a poznatky z minulých kapitol.
Ačkoli jde o CSS, odkazy a to o aktivní odkazy - nenechte se zmást, s pseudotřídou a:active to nemá nic společného. Pseudotřída active, která se používá a styluje podobně jako hover, označuje odkaz, na který se právě kliklo; když už ale kliknete a stránka se načte, už to zase "active" není.
Čeho chceme docílit
Nejdřív zapomeňte na PHP; kdybyste to chtěli udělat v prostém HTML, muselo by na každé stránce být menu s jiným kódem. Odkaz na právě zvolenou stránku by měl být nastylován jinak než ostatní, neboli by měl mít nějakou zvláštní třídu. Jak tuto třídu pak ostylujeme, to teď není podstatné. Ten kód by měl tedy vypadat asi takhle:
Menu na první stránce:
<ul>
<li class="aktivni"><a href="prvni.htm">první odkaz</a></li>
<li><a href="druha.htm">druhý odkaz</a></li>
<li><a href="treti.htm">třetí odkaz</a></li>
</ul>
Menu na druhé stránce:
<ul>
<li><a href="prvni.htm">první odkaz</a></li>
<li class="aktivni"><a href="druha.htm">druhý odkaz</a></li>
<li><a href="treti.htm">třetí odkaz</a></li>
</ul>
Menu na třetí stránce:
<ul>
<li><a href="prvni.htm">první odkaz</a></li>
<li><a href="druha.htm">druhý odkaz</a></li>
<li class="aktivni"><a href="treti.htm">třetí odkaz</a></li>
</ul>
My ale chceme mít jen jeden kód; ten si pěkně uložíme do menu.php, budeme ho includovat do každé stránky, a skript sám pozná, na které jsme stránce, a příslušnému odkazu přiřadí tu speciální třídu.
Jak to zařídit
Dá rozum, že do souboru menu.php můžeme s klidným srdcem dát to, co bude určitě na všech stránkách stejné. A předpokládám, že stránky jsou vytvořeny podle dříve popsaného způsobu. Takže kód menu bude vypadat asi takto:
<?php
echo "<ul>
<li><a href='index.php?str=prvni'>první odkaz</a></li>
<li><a href='index.php?str=druha'>druhý odkaz</a></li>
<li><a href='index.php?str=treti'>třetí odkaz</a></li>
</ul>";
?>
Někde na začátku, dřív než menu.php includujeme, máme skript na rozeznání parametru "str" z URL - to už jsme, milí studenti, probírali. A modří už vědí - protože právě podle proměnné $str vybíráme stránku s obsahem, kterou includujeme, můžeme podle ní rozeznat, kterou položku v menu máme zvýraznit.
Ke každé položce menu tedy přidáme podmínku, která zkontroluje, jestli ten daný odkaz nevede na stránku, která se zároveň právě includuje; pokud ano, přidáme k takovému odkazu do HTML příslušný kód, tedy označení třídy. HTML kód rozdělíme v místě, kde by případně mělo označení třídy být, vložíme na to místo podmínku a ta případně opravdu vloží ten název třídy.
Každý odkaz tedy zapíšeme podle následujícího mustru, přičemž "hodnota" je vždycky u jednoho odkazu stejný řetězec. Trošku jsem to ještě probarvila, modře vidíte výsledné HTML:
<?php
echo "<li";
if ($str=="hodnota") { // neboli pokud je ve $str to samé, jako níže v odkazu
echo " class='aktivni'"; // tak se zobrazí kód pro třídu "aktivní"
}
echo "><a href='index.php?str=hodnota'>první odkaz</a></li>";
?>
Pokud stále ještě někdo tápe, ukážeme si to na příkladu - jak by vypadalo výše zmíněné třípoložkové menu:
<?php
echo "<ul>";
echo "<li";
if ($str=="prvni") {
echo " class='aktivni'";
}
echo "><a href='index.php?str=prvni'>první odkaz</a></li>";
echo "<li";
if ($str=="druha") {
echo " class='aktivni'";
}
echo "><a href='index.php?str=druha'>první odkaz</a></li>";
echo "<li";
if ($str=="treti") {
echo " class='aktivni'";
}
echo "><a href='index.php?str=treti'>první odkaz</a></li>
</ul>";
?>
Nezapomeňte - nemůžete vzít tento kód, zkopírovat ho, a předpokládat že vám bude fungovat. Je nezbytné, abyste prostudovali tuhle a před tím ještě ty předchozí stránky; kódu musíte porozumět a případně si ho upravit. Vaše proměnná, předávaná v URL, se nemusí nutně jmenovat $str, vaše odkazy můžou vypadat jinak apod.
Zajímá někoho, jak vypadá kód mého levého menu?
