PC-politika.cz - Novinky: CSS: Menu s pohybujícími titulky PC-politika

V poslední době mě zaujal zajímavý nápad autora webdesignu - Mike Cherima, který nepředstavitelně jednoduchým fíglem rozpohyboval odkazy v menu. Jeho kód, který má některá práva vyhrazena, jsem upravil, a to bez použití flashe, což na světových profesionálních webech již stejně přestává být moderní. Takže nabízená jednoduchost tohoto menu vás možná zaujme.

Ukázka menu s titulkem po kliknutí...

V poslední době mě zaujal zajímavý nápad autora webdesignu - Mike Cherima, který nepředstavitelně jednoduchým fíglem rozpohyboval odkazy v menu. Jeho kód, který má některá práva vyhrazena, jsem upravil, a to bez použití flashe, což na světových profesionálních webech již stejně přestává být moderní. Takže nabízená jednoduchost tohoto menu vás možná zaujme.

Mike Cherima, kterého mnozí známe z jeho webu Green-beast.com. Tento autor je propagátorem CMS systému WordPress, nicméně jeho práce jsou použitelné v širším rozsahu. Rozpohyboval menu pomocí flashe. Je to sice hezké, ale již přichází pomalu z módy. Takže jsem jeho kód Menu pohybující titulky využil (přístupný je k veřejnému použití) pro vlastní pohybové menu. Je jednodušší a pohyb si přitom zachovalo.

Ukázka menu s titulkem po kliknutí...

O rozpohybování odkazu v menu (text se přesune se po klknutí vpravo), což působí netreadičně a podle mě hezky, se stará CSS třída ul a.on . CSS kód pracuje již s nastavením pro IE 6 a nově rovněž pro IE 7,8, což je dílem dalšího autora Franz Sadjaka.

Je to skoro triviální. O pohyb/přemístění pozice titulku v menu se stará v uvedené třídě zápis text-align : right; , jak je vidět ve zkráceném kódu CSS.

// Ukázka třídy, která mění pozici titulku
ul a.on {
background : #E0AC94 url("post-top-center.gif");
color : #000;
text-align : right;
letter-spacing :0.3em;
}

Balíček pro Menu pohybující titulky

Menu pohybující titulky má svůj HTML kód: menu_pohyb.html. Ten má rovněž v HEADu svůj CSS styl. Doporučuji však umístit do externího souboru (viz. bod. č.2).
Dále obsahuje externí CSS styl kaskádových stylů: menu_pohyb.css.
Aby menu chodilo dobře i v nejnovějších prohlížečích IE 7 a 8, nakopírujte malý kód ze souboru ie7.css do hlavičky DTD svého webu, do sekce HEAD.
Kompletní sestavu pro menu si můžete stáhnout z balíčku: menu_zdrojak.zip.
Vyzkoušejte zde: menu_pohyb.html

· CSS: nehezké kódy, brrr!
· CSS: Validace věc ošidná [5]; error 500
· CSS: Menu s pohybujícími titulky
· CSS: Validace věc ošidná, atribut id [4]
· CSS: Weby jdou donaha vždy 9. dubna!
· CSS: Validita věc ošidná - Opera 9xx [3]
· CSS: Selektory v CSS 3
· CSS: Validita věc ošidná! [2]
· CSS: Pro barvy stačí tři číslice RGB kódu
· CSS: Vzhled pro IE, sémantický kód oddělit
· CSS: Typy médií
· CSS: Validita věc ošidná! [1]

Zatím nikdo nekomentoval. Buďte proto první a vložte svůj komentář.

URL:
BB-Code:
HTML:
Sdílet:	Share \|