ZaRohem.cz Pražské metro Test osobnosti CowParade 2004 Praha MHD v ČR
Blog ZaRohem 1.PCRevue.cz Vinárna Na roli (Petřvald) Restaurace Třebovická role kapela Terra Ignota

Reklama
Hlavní stránka
Aktuality
Software
Internet
Hardware
Seriály
Viry
Tipy a triky
Download
Konference
Napište nám
Reklama
Doporučujeme užitečný crm systém od CÍGLER SOFTWARE!
31. červenec 2000 - Tipy a triky

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:

Reklama
 
 
Aktuální články:
Reklama
Program eWay-CRM je praktické CRM řešení integrované přímo do Microsoft Outlooku.
 
 
Reklama
 
© 1.PC Revue.cz - všechna práva vyhrazena
ISSN: 1213-080X
© Karel Kilián ml.
Zásady ochrany osobních údajů
Reklama