MENU pro web

toto je hodně hodně starý článek ze starého blogu a tak neručím za správnost odkazů… v podstatě to dnes již k ničemu nepotřebuji 🙂

Menu je základním nástrojem pro pohyb mezi stránkami.

1. Horizontální průhledné hover menu: Toto menu patří spíše mezi ta ozdobnější. Pomocí několika částečně průhledných obrázků docílíme snadno velmi pěkných efektů. Toto menu funguje ve všech prohlížečích, kromě Microsoft Internet Exploreru, který nepodporuje standardním způsobem průhlednost (alfa kanál) u PNG obrázků. Proto je z důvodu zajištění alespoň částečné funkčnosti v MSIE použita proprietární vlastnost „filter“.
2. Image map menu: Toto menu využijete především na stránkách s bohatě propracovaným designem. K jeho vykreslení je použit pouze jeden obrázek.
3. Horizontální menu s náhledem stránky: Toto menu se hodí spíše pro konstrukce, ve kterých je dobré k položkám menu uvést delší popis, třeba i s obrázky nebo jinými XHTML prvky.
4. Horizontální dvouúrovňové menu: Toto menu je vhodné pro křížovou navigaci, podobně jako klasické hover-menu. Je ale výhodnější na webu, kde jen přepínáme mezi podkategoriemi, nemusíme pořád otevírat ‚roletky‘. Zároveň ale toto menu reaguje na :hover, je tedy možné se z libovolného místa webu dostat kamkoli.
5. Horizontální obrázkové blokové menu s popisem: Toto řešení ukazuje, jak vytvořit horizontální obrázkové blokové menu s popisem. Menu využívá techniky image replacement a jako základu je využito nečíslovaného seznamu. Uvedeny jsou dvě rozdílné ukázky.
6. Horizontální menu s šířkou nadřazeného bloku: Toto řešení ukazuje, jak vytvořit vizuálně jednoduché, ale efektní horizontální menu s šířkou přizpůsobující se šířce nadřazeného bloku.
7. Horizontální obrázkové menu: Klasické float-menu s obrázkovým pozadím a hover efektem. Za zmínku stojí zde použité vertikální vycentrování jednořádkového odkazu s využitím CSS vlastnosti height a line-height.
8. Onclick menu bez reloadu i JS: Menu je zaměřeno na využití málo známé vlastnosti HTML odkazů. Opera si s tímto řešením příliš nerozumí, proto je zde použit hack, který způsobí zobrazení posuvníku. Ten je zde nežádoucí, ale menu funguje. Tento posuvník je možné překrýt několika způsoby. V IE i Mozille menu funguje bez problémů.
9. Vertikální menu s komentáři: Toto řešení ukazuje, jak za pomoci CSS vytvořit hover menu, kde jsou jednotlivé položky menu opatřeny komentáři, které se objevují v reakci na kurzor myši. Komentáře mohou být opatřeny i obrázky.
10. Vertikální dvouúrovňové obrázkové menu: Toto řešení využijeme, pokud chceme položky menu ozdobit obrázkovým pozadím. Využijeme CSS vlastnosti background-image a background-position.
11. Vertiktální dvouúrovňové obrázkové menu 2: Klasické vertikální menu s obrázkovým pozadím. Je třeba dát pozor na formulářový prvek SELECT, který dělá těmto menu problémy. Nezbývá, než si dát při tvorbě na tuto chybu pozor.
12. Hover menu: Klasické hover menu (menu reagující na kurzor).
13. Horizontální záložkové obrázkové menu: Toto řešení ukazuje, jak vytvořit působivé a plasticky působící horizontální menu, které využívá třech obrázků jako pozadí. Koncepce rozdělení obrázku na pozadí na tři části umožňuje mimo jiné využít i delší text položky v menu
14. Horizontální dvouúrovňové obrázkové menu: Klasické horizontální menu s obrázkovým pozadím. Je třeba dát pozor na formulářový prvek SELECT, který dělá těmto menu problémy – v IE se vnutí do popředí a není vidět obsah podmenu, ve Firefoxu se vnutí do popředí pouze tehdy, je-li rozbalen. Tuto chybu nelze rozumně eliminovat, protože řada prohlížečů (typicky Mozilla, Opera) kreslí formulářové prvky po svém. Nezbývá tedy, než si dát při tvorbě na tuto chybu pozor.
15. Vertikální obrázkové menu: Toto menu nevykazuje nepříjemný efekt blikání při najetí v MSIE, přestože není použit žádný preload obrázků.
16. Odrážkové horizontální menu: Toto řešení ukazuje, jak vytvořit jednoduché horizontální menu s odrážkami různých tvarů jakoby s efektem známých „tabů“. Jeho hlavní využití je v základní navigaci nebo u jednodušších layoutů.
17. Horizontalní menu se zvětšením: Toto řešení ukazuje, jak vytvořit horizontální menu s efektem zvětšení při najetí kurzoru myši. Jsou zde dva příklady jeden s použitím poloprůhledného obrázku jako stínu a druhý bez jakéhokoli obrázku.
18. Horizontalní stínované menu: Tento příklad ukazuje jednoduché horizontální menu s efektem stínu v textu odkazů. Menu je tvořeno pouze textem bez využití obrázků. Znak oddělující odkazy v řádku může být jednoduše nahrazen jiným.
19. Experimentální vysouvací hover menu bez skriptování: Menu je plně XHTML 1.0 Strict a případně i XHTML 1.1 validní, stejně jako CSS validní. Funguje v Opeře, MSIE, Firefoxu i Mozille. Menu je vystavěno bez jakéhokoli využití skriptů (JavaScript ani Behavior není použit).
20. Horizontální menu s vertikálním písmem: Toto řešení ukazuje, jak vytvořit působivé horizontální menu s písmeny orientovanými vertikálně. Jeho využití je možné u netradičních layoutů.
21. Vysouvací menu – rozcestník: Toto menu využijeme, pokud potřebujeme do navigace umístit velké množství odkazů, například na různé servery, které obsahují podkategorie.
22. Horizontální ZDnet menu: ZDnet menu
23. Horizontální vysouvací menu: Horizontální hover menu (menu reagující na kurzor).
24. Záložkové menu vysouvající se dolů: Záložkové menu, ve kterém se záložky vysouvají dolů.
25. Záložkové menu vysouvající se nahoru: Záložkové menu, ve kterém se záložky vysouvají nahoru.
26. Vertikální 3D menu: Vertikální menu s 3D efektem.
27. Vertikální menu s podnabídkami: Menu s podnabídkami, bez rozbalování.
28. Vertikální vysouvací menu
29. Vertikální hover menu: Klasické vertikální hover menu.
30. Kartičkové hover menu: Neobvyklé hover menu s kartičkami.
31. Menu s náhledy: Toto menu můžeme použít ve všech stránkách, kde potřebujeme rychle, bez klikání zobrazit podrobnější informace. Část se samotným menu je nezávislá na části pro zobrazení, z toho plyne možnost využití např. v různých side-barech, kde obvykle bývá málo místa.

Pár dalších článků o menu je zde:

• Hodně dobrý tutoriálů o menu – http://e-lusion.com/design/menu/ – fakt dobrý
•  Vertikální obrázkové menu : http://css.interval.cz/clanky/vertikalni-obrazkove-menu/
• Obrázkové rollovery bez načítání: http://www.wellstyled.com/css-nopreload-rollovers.html
• Vertikální hover menu: http://css.interval.cz/clanky/vertikalni-hover-menu/