Štítek: Pro CSS: menu
Drobečková navigace v CSS
Drobečková navigace je výborná pomůcka pro to, aby návštěvník stránky získal a udržel si představu o tom, kde se právě nachazí, a mohl se dostat jednoduše a bez přemýšlení na
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.
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ů.
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.
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.
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
Vertiká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.
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
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.
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
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.
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
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.
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ů.
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.