HTML Tip č. 24: Roletkové navigační menu
Navigace na některých internetových stránkách je řešena pomocí jednoduchého roletkového menu, v němž si návštěvník jednoduše vybere sekci nebo stránku, na kterou chce přejít a po zvolení položky je automaticky nasměrován na tuto stránku. Dnes si stručně vysvětlíme, jak takové navigační menu vytvořit. Budeme pochopitelně potřebovat JavaScript, takže tento způsob bude fungovat pouze v prohlížečích, které JavaScript podporují. Nejprve si prohlédneme celý postup:
<script language="JavaScript"> - tím prohlížeči sdělujeme, že půjde o skript napsaný v JavaScriptu
function surfto(form) - definování funkce surfto
var myindex=form.select1.selectedIndex - definování proměnné myindex
if (form.select1.options[myindex].value != "0") - tato podmínka zajišťuje, aby při výběru položky s hodnotou 0 nedošlo k pokusu o přesměrování stránky (v našem případě pokud uživatel zvolí položku Rychlý přechod do sekce...)
{location=form.select1.options[myindex].value;} - přesměrování na adresu odpovídající hodnotě vybrané položky
} - ukončení definice funkce
</script> - ukončení skriptu
Nyní je potřeba vložit do stránky jednoduchý formulář (tj. roletkové menu), který při výběru položky zavolá funkci surfto.
<form name="form1"> - klasický začátek formuláře, atribut name určuje jméno formuláře.
<select name="select1" onChange="surfto(this.form)" size=1> - říká prohlížeči, že půjde o roletkové menu (viz. atribut size=1), přičemž při změně vybrané položky (onChange) má být volána funkce surfto, které bude jako parametr předána adresa stránky, na kterou bude uživatel přesměrován.
Následuje výčet jednotlivých položek ve formátu:
<option value="adresa">zobrazeno jako nazev polozky</option>
Atribut adresa určuje URL adresu serveru nebo stránky, na kterou bude probíhat přesměrování, druhý atribut zobrazeno jako nazev polozky pak určuje, jak bude tato volba v roletkovém menu zobrazena. Chcete-li nějakou položku deaktivovat (tj. aby byla viditelná v menu a přitom nezpůsobila přesměrování na jinou stránku), stačí do hodnoty value zapsat nulu.
</select> - ukončení roletkového menu
</form> - ukončení formuláře
Nyní si ukážeme, jak by vypadal kompletní zdrojový kód například pro naší 1. PC Revue!:
<script language="JavaScript">
function surfto(form) {
var myindex=form.select1.selectedIndex
if (form.select1.options[myindex].value != "0")
{location=form.select1.options[myindex].value;}
}
</script>
<form name="form1">
<select name="select1" onChange="surfto(this.form)" size=1>
<option value="0">Rychlý přechod do sekce...</option>
<option value="aktuality.htm">Aktuality</option>
<option value="software.htm">Software</option>
<option value="internet.htm">Internet</option>
<option value="hardware.htm">Hardware</option>
<option value="serialy.htm">Seriály</option>
<option value="viry.htm">Viry</option>
<option value="tipytrik.htm">Tipy a triky</option>
<option value="download.htm">Download</option>
<option value="ceniky.htm">Ceníky</option>
<option value="nefunguj.htm">Nefunguje...!</option>
<option value="hledani.htm">Vyhledávače</option>
<option value="konferen.htm">Konference</option>
<option value="registrace.htm">Registrace</option>
</select>
</form>
Výsledek si můžete vyzkoušet v praxi přímo zde:
|
