www.volny.cz/peter.mlich/ © 2004 Peťova stránka, Peter Mlích: peter.mlich at volny.cz

Pokud uvidíte hezké menu napište mi na mail, kde se nachází.

Legenda: ... prvky, bez kterych to nebude fungovat
! = JS csshover.htc (body behaviour...) (Hover v IE funguje pouze jako A:hover)
o = obrazek(zky)
JS = JavaSkript
modrofialová modrá zelená žlutá bílá žlutá oranžová červená červenofialová (Bíla nepaří do duhy)

Vertikální menu

o Menu 1
odkaz 1 odkaz 2 odkaz 3 odkaz 4
Menu 2
odkaz 1 odkaz 2 odkaz 3 odkaz 4
Menu 5
odkaz 1 odkaz 2 odkaz 3 odkaz 4
Menu 14
odkaz 1 odkaz 2 odkaz 3 odkaz 4
Menu 6
odkaz 1 odkaz 2 odkaz 3 odkaz 4
Menu 3
odkaz 1 odkaz 2 odkaz 3 odkaz 4
Menu 4
odkaz 1 odkaz 2 odkaz 3 odkaz 4
Menu 12
odkaz 1 odkaz 2 odkaz 3 odkaz 4
o Menu 7
odkaz 1 odkaz 2 odkaz 3 odkaz 4
Menu 8
Menu 9
-> odkaz 1 <- -> odkaz 2 <- -> odkaz 3 <- -> odkaz 4 <-
! Menu 10
!o Menu 11
o Menu 13
odkaz 1 odkaz 2 odkaz 3 odkaz 4
o Menu 15
odkaz 1 odkaz 2 odkaz 3 odkaz 4
o Menu 16
 odkaz 1  odkaz 2  odkaz 3  odkaz 4
Menu 17
odkaz 1 odkaz 2 odkaz 3 odkaz 4
Menu 18
odkaz 1 odkaz 2 odkaz 3 odkaz 4
Menu 19
odkaz 1 odkaz 2 odkaz 3 odkaz 4
Menu 20
odkaz 1 odkaz 2 odkaz 3 odkaz 4
Menu 21
odkaz 1 odkaz 2 odkaz 3 odkaz 4
Menu 22
o   odkaz 1 o   odkaz 2 o   odkaz 3 o   odkaz 4
Menu 23
(odkaz 1) (odkaz 2) (odkaz 3) (odkaz 4)
Menu 24
odkaz 1 odkaz 2 odkaz 3 odkaz 4
Menu 25
odkaz 1 odkaz 2 odkaz 3 odkaz 4


Horizontální menu - lišty, záložky
Lista 1a: odkaz 1|odkaz 2|odkaz 3|odkaz 4
Lista 1b: ODKAZ 1 | ODKAZ 2 | ODKAZ 3 | ODKAZ 4
Lista 2: odkaz 1 odkaz 2 odkaz 3 odkaz 4
Text
Lista 3: odkaz 1 odkaz 2 odkaz 3 odkaz 4
Text
Lista 5:  odkaz 1odkaz 2odkaz 3odkaz 4
Lista 6: odkaz 1|odkaz 2|odkaz 3|odkaz 4
Lista 9: odkaz 1 odkaz 2 odkaz 3 odkaz 4
o Lista 10:  odkaz 1   odkaz 2   odkaz 3 
Lista 8: odkaz 1 dlouhy odkaz 2 odkaz 3 odkaz 4  
! Lista 13:
MENU A
odkaz 1a odkaz 1b odkaz 1c
MENU B
odkaz 2a odkaz 2b

Rolovaci - csshover.htc
! Lista 14:
MENU A
odkaz 1a odkaz 1b odkaz 1c
MENU A
MENU B
odkaz 2a odkaz 2b
MENU B

Rolovaci - csshover.htc
! Lista 8b: odkaz 1 dlouhy odkaz 2 odkaz 3 odkaz 4  
JS menu, rozbalovaci
Lista 4
Lista 7
Lista 12



Poznamka:
Stranka pouziva dost JavaScriptu, proto jsem vyradil vstup csshover.htc, pozdeji presunu na jinou stranku.
Hover testovany prevazne v IE

Tip0: Zobrazte si ZDROJOVÝ KÓD (Source Code).
Tip1: Při více-barevném menu je hezké dodržovat duhové pořadí, působí to dobře na oko.
Tip2: Uvažujte i situaci, kdy prohližeč ignoruje CSS, zejména pri rozbalovacím menu!
Tip3: Uvažujte, co se stane v extrémních podmínkách, třeba malé šířce výšce prohlížeče. Na inetu je spoustu menu, které vyplyvnou rolovatko nebo ani to ne, při menší šířce obrazu. Ja osobně miluji prohlížeč formatu A4, krásně se chytají oči na text.
Tip3: Jako nejrychlejsi se ukazuje tr:hover
Chyby:
Mozzila - Změna rámečku v hover zpomaluje.
Mozzila - nezvlada pozici u hromadne definice pozadi, reseni "background: ... left top; background-position: 2px top;"
Explorer/Mozzila - dlouhy div/span zpomaluje hover. (hodne tlacitek v jednom divu/spanu), resi treba tabulka.
Mozzila (ve win) - !DOCTYPE umožňuje hover jiné objekty nez A:hover
Explorer - csshover.htc umožňuje hover na jiné objekty za pomoci JS. Pomalý, pomalé načítání stránky! (pokud je obsah z vnějšího souboru)
Explorer - pomalý hover v LI. Jak LI A:hover, tak LI:hover
Win XP sp2 - spousteni csshover.htc vytvori chybovou hlasku, kvuli javaskriptum, problem nastava pouze u spousteni z mistniho disku.