Při vytváření menu někdy chceme, aby položka, na kterou je kliknuto zůstala aktivní - zůstala např. podržená, zvýrazněná apod. Řešíme to nejčastěji pomocí pseudotřídy v CSS - a:hover. Pokud máme webové stránky v PHP skládané s jednotlivých částí pomocí příkazu include nebo require, pak máme společné menu v jednom souboru, pak tento požadavek můžeme řešit např. za pomoci podmínky. Klasické menu vypadá např. takto:
V rámci frameworku Bootstrap pak dále např. takto:
Pokud chceme, aby zůstala aktivní položka menu, na kterou bylo kliknuto, stačí přidat třídu active (v příkladu níže je to položka Reference):
Tato varianta ale nebude fungovat, pokud budeme mít ve stránce menu vložené (např. pomocí příkazu include...), a tedy stále stejné na každé stránce, kterou načítáme. Tak že tam už musíme použít např. podmínku:
- Pozn. 1: tato varianta není doplněna o Bootstrap styly.
- Pozn. 2: u první položky "Titulní strana" si všimněte, že podmínka kontroluje, zda bylo kliknuto na položku uvod nebo pokud je načtena čistá adresa webu, tedy bez jakýchkoliv parametrů v adrese (přes metodu _GET)
- Pozn. 3: samotný kód takto testovat nemůžete. Musel by se ještě doplnit o chybějící definice.
Existuje spousta dalších možností, jak to můžeme vyřešit. Jednou z nich je např. použití pole - array (viz níže). Součástí kódu je i "obarvení" aktivní (nakliknuté) položky na červeno. Některé řádky jsou vysvětleny přímo v kódu.
Vyzkoušejte v tomto demu. Dále je vhodné doplnit kód o fragmenty frameworku Bootstrap (tentokrát již bez vysvětlování v kódu):
Bez napojení na knihovny Bootstrap to samozřejmě nebude fungovat, tak že si musíme tyto položky doplnit. nejlépe tak, že celé menu zakomponujeme do hotové stránky. To opět můžeme učinit např. za pomoci příkazu include:
Součástí je také soubor mujstyl.css v adresáři css. Ten může vypadat nějak takto:
Výsledek pak vypadá takto:
Ještě potřebujeme, aby se po kliknutí na danou položku zobrazoval správný obsah webu.