Autor Zpráva
Matesxxx
Profil *
Chtěl bych udělat menu podobné temu to na [url=http://linkinpark.com/těchto stránkách[/url] (nejprve musíte najet na hlavní stránku a je to uplne nahore) nevite prosim nekdo jak to udelat? dík
Casero
Profil
www.linkinpark.com
Joker
Profil
Casero
Spíš www.linkinpark.com :-)
Ano, menu na těch stránkách je natolik speciální, že v Opeře ani ve Firefoxu ho vůbec nevidím :-/
Titulek stránky se změní na "Linkin Park: Requires Flash Player upgrade", přitom mám Flash zapnutý.

Naproti tomu v IE to funguje... nicméně co je na tom menu tak zvláštního? Dalo by se to udělat dvěma nahrazujícími se obrázky
Casero
Profil
Joker
upraveno

Matesxxx
myslím, že takové menu není nutné, jiank ti to vysvětlil Joker uživateli de především o obsah ne o menu
Matesxxx
Profil *
Urcite mas prvdu ale zalezi i na vzhledove stránce a byl bych rad kdyby ste mi napsali jak to muzu udelat! dik prosim o odpoved treba jokera prosim
Bubák
Profil
Matesxxx
Pokud popíšeš, jak to menu vypadá...
Matesxxx
Profil *
For bubak: Pokud si prectes to co jsem uz psal! Je to uplne to same na tom odkazetady
Bubák
Profil
Matesxxx
Já to četl, ale menu nevidím, je nepřístupné. Do Windows dneska bootovat nebudu.
iru
Profil
Já tam taky žádný menu nevidím.
Bubák
Profil
Já vidím meni jenom ve windousím Firefoxu, IE, Opera, Konqueror, linuxový Firefox nic, takže z šesti pokusů 5x neúspěch. Ať žije Flash, co se prý všude zobrazuje stejně :o)

Použil bych upravený http://css.interval.cz/clanky/prohlizec-panoramatickych-obrazku/
Joker
Profil
Já menu viděl v IE, Opera a Firefox nic (vše pod Win).
A přitom jsem měl všechny ty kravinky pozapínané (CSS, Javascript, Flash,...) a nainstalovaný Flash plugin a Flash na jiných webech mi funguje bez problému. Prostě tomuhle se říká kompatibilita :-/

Nicméně na tom menu není nic zas tak světoborného, aby se to nedalo udělat klasicky v CSS...
Nebo, kdyžtak
Matesxxx
co přesně v tom menu chcete?
Změnu tlačítka po najetí myší?
Tak udělejte odkaz třeba s obrázkem na pozadí a na :hover mu dejte nový obrázek
Taky to můžete udělat Javascriptem, přes událost onmouseover / onmouseout.
Nebo co přesně požadujete?
Matesxxx
Profil *
Po najetí myší na odkaz by se měli všechny ostatní odkazy v menu rozmazat. Byl bych moc rád kdyby mi někdo poslal zdroják. moc dík!
kat
Profil *
zkus si přečíst stránku s filtry . Myslím, že je to filter blur, ale taky to pojede jenom na IE, ale aspoň to v jiných prohlížečích bude vidět, pak to musíš spojit s JavaScriptem a událostmi a jestli to chceš tak postupně rozmazat, jako mají Linkini, tak budeš muset vytvořit funkci s rekurzí.
Joker
Profil
Matesxxx
Jo takhle... i to by šlo udělat skriptem... akorát na onmouseover nenastavovat jiný obrázek aktuální položce, ale všem ostatním položkám. A na onmouseout to zase změnit zpátky.
Ale formuje se mi v hlavě elegantnější řešení...
Joker
Profil
Jo, tak by to šlo... co mě napadlo:

- tlačítka udělat odkazy a dát je do nějakého prvku s určitým ID, například "menu" a určitou třídou CSS, třeba "menu_off".
- Styl tlačítek menu by byl v CSS definovaný přes .menu_off a{...}
- Na událost onmouseover by se Javascriptem menu přiřadila jiná třída, třeba "menu_on"
- Na tlačítka by se tím pádem přestal aplikovat syl .menu_off a, namísto toho by se aplikoval .menu_on a, kde by se udělalo to rozmazání
- Ale tlačítko nad kterým je myš potřebujeme mít normálně, což jednoduše zařídíme v CSS: menu_on a:hover{...}

Rozmazání tlačítka by se dalo řešit třeba posuvným obrázkem na pozadí
U prohlížečů podporujících pseudotřídu :hover i u jiných prvků než odkazů by to možná šlo řešit kompletně v CSS (místo změny třídy v Javascriptu bych udělal .menu a .menu:hover)
Matesxxx
Profil *
Jokere poslal by si mi prosimte kompletní zdrojak? dík!
Joker
Profil
Matesxxx
Fuj, nebylo to zas tak snadné, ale dal jsem dohromady příklad.
http://skripty.webz.cz/menu_tlacitka/rozmazani.html

Je to jen takový příkad a bylo by fajn, kdyby to někdo zkontroloval a případně vylepšil
Vyzkoušeno v IE6, FF 1.5.0.6, O 9.01
(poznámka: já se s tím nechtěl zas tolik patlat a proto jsem pro osm tlačítek vyrobil jenom dva obrázky a to co mělo být rozmáznuté jsem prostě přetáhnul nástrojem rozmazání v GIMPu. Po grafické stránce se to samozřejmě dá udělat daleko líp)

Jak to funguje:
Celé menu je v <div id="menu" class="menu_off">
Styly pro celé menu se nastavují přes IDčko. Třída menu_off (a menu_on) se sama přímo nestyluje, ale nastavují se podle ní styly odkazů. Odkazy s tlačítky mají vlastní třídu, kam se dá definovat obecný vzhled tlačítek (v příkladu ten rámeček) a taky nastavíme aby se pozadí neopakovalo (background-repeat: no-repeat).
Změna tlačítek je řešená posouváním obrázku na pozadí- tlačítko menu musí mít danou šířku. K tomu se vyrobí obrázek na pozadí dvojnásobné šířky- jedna polovina obsahuje normální text a druhá polovina rozmazaný text. Ten obrázek pak dám příslušnému tlačítku jako obrázek na pozadí. Při přesně dané šířce tlačítka je vždycky vidět jenom příslušná polovina obrázku na pozadí. Nastává problém, jak definovat šířku inline prvku (odkazu). Proto jsem vyrobil průhledný obrázek se stejným poměrem stran jako má mít tlačítko (v příkladu mám tlačítka 40px na šířku a 20px na výšku, takže 2:1 - takže jsem vyrobil průhledný obrázek jeden pixel na výšku a dva pixely na šířku) a pak ho vložíme do tlačítka a roztáhneme na požadovaný rozměr. Tím získáme tlačítko daných rozměrů.
Protože některé prohlížeče dělají kolem obrázků-odkazů rámeček, nastylujeme obrázek v tlačítku (a.tlacitko img) a zrušíme rámeček.
Dál u každé položky nastavíme tomu průhlednému obrázku ALT s textem daného tlačítka. Tím alespoň trochu napravíme přístupnost... pokud někdo na stránku koukne bez obrázků, uvidí na položkách menu alespoň tenhle text.

Tak a teď vlastní vyměňování tlačítek: Po najetí myší na tlačítko teda potřebuju, aby se všechna ostatní tlačítka přepla do rozmazaného stavu, ale to na které najedu zůstalo nerozmazané. Obrázek na pozadí má dvě poloviny- rozmazanou a nerozmazanou- a potřebuju nastavit všechna tlačítka tak, aby byla vidět ta rozmazaná polovina. Všechna kromě toho jednoho, na které jsem najel. A potřebuju to přepínat při najetí na nějaké tlačítko. Tady už mi s kaskádovými styly došel dech, na změnu stylu prvků po najetí na s nimi nesouvisející prvek už je IMHO potřeba JavaScript. Mohl bych JavaScriptem nastavit styl všem tlačítkům, ale moje řešení je myslím elegantnější:
JavaScriptem nastavím na onmouseover tlačítka celému DIVu s menu třídu menu_on. Tím se na tlačítka v menu začne aplikovat stylopis "menu_on a", kam umístím posunutí obrázku na pozadí tak, aby byla vidět rozmazaná polovina. Dál potřebuju nerozmazané aktivní tlačítko. Aktivní tlačítko je "menu_on a:hover", takže tomu nastavím obrázek na pozadí posunutý tak, aby byla vidět nerozmazaná polovina.
No a na onmouseout nastavím zas celému menu třídu menu_off, díky čemuž se na všechna tlačítka místo stylu "menu_on a" začne aplikovat styl "menu_off a", který nastaví viditelnost nerozmazané půlky tlačítka.

Kompatibilita:
Menu vyžaduje CSS, Javascript a obrázky.
Bez Javascriptu bude menu stále funkční, akorát se nebudou ta tlačítka rozmazávat
Bez obrázků bude menu funkční, uvidíte místo tlačítek alternativní text (alt) od těch průhledných obrázků
Bez kaskádových stylů tlačítka neuvidíme. Z toho důvodu každý odkaz obsahuje popisek tlačítka ještě ve skrytém prvku <span>. Bez kaskádových stylů se neaplikuje ani display:none na ten span a text bude vidět. Menu se pak zobrazí jako seznam odkazů a bude funkční.
Bez obrázků a bez kaskádových stylů uvidíte popisek tlačítka dvakrát- nejdřív alt od obrázku a potom z toho prvku <span>. Menu nicméně bude funkční.

Sice to není zrovna výkladní skříň přístupnosti a kompatibility, ale myslím, že je to pořád mnohem lepší než ten Flash.
peta
Profil *
Joker
Normalni clovek pouziva transparentni gif, kdyz dela rozprskavani.
http://www.volny.cz/peter.mlich/
skin mracky2, ale pouzivam to trochu jinak nez ty

Pod pojmem rozmazavani(rozostreni) chapu efekt Blur, gaussian brul (v Gimpu) kdy dochazi k plynule zmene. Nikoliv efekt Spread v casti Noise (castice)

Jinak to funguje dobre. Jsou tam nejake chyby a nejake veci, co by se dali udelat lepsi, ale nechme to tak.
Bezna je konstrukce
<div id="menu">
<a href=""></a>
<a href=""></a>
</div>

<div id="menu">
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
Vsechny ostatni veci, co tam mas navic bych vyhodil pryc, mozna do class="", onmouseover do <script> pro vsechny A v ID=menu ...

Matesxxx
http://www.volny.cz/peter.mlich/www.htm#mssub7
http://www.volny.cz/peter.mlich/www.htm#mssub20
si muzes vybrat 100vky ruznych menu a efektu pro fotogalerie...
Joker
Profil
peta
Jasně, jenže jak to řešit průhledným GIFem, pokud se má rozmazat jenom text a zbytek ne? Jinak ten samotný průhledný GIF tam žádnou funkci nemá, je to jen taková "vycpávka" do toho prvku <img>, který má za úkol dvě věci: Svými rozměry definuje rozměry tlačítka a poskytuje alternativní text pokud někdo stránku zobrazí bez obrázků.
Samotnému mi to nepřipadá ideální, ale nenapadlo mě nic lepšího. Pokud máte lepší nápad, jak nastavit rozměry inline prvku a jak tam dodat nějaký alternativní text, tak sem s ním.

ad rozmazání: No jasně, já se s tím nechtěl moc patlat, je to příklad. Ta tlačítka jsou obrázky, takže při ostrém použití si tam můžete udělat jakýkoliv efekt, který zvládnete v grafickém editoru.

ad <ul><li>, myslím, že by to akorát přidělalo problémy, pokud chci to menu v jednom řádku.

Vsechny ostatni veci, co tam mas navic bych vyhodil pryc
Dyť už tam ze stylů nic moc není. Jediné, co bych ještě vyhodil je to width:40px u obrázků, to bych opravdu dal do "a.tlacitko img". Obrázek na pozadí bude u každého tlačítka jiný, takže se nijak zobecnit nedá.
Ohledně skriptu, není to jedno?
peta
Profil *
Joker
"se má rozmazat jenom text"
"já se s tím nechtěl moc patlat"
Aho, to je jina. Tak, jak to mas bych pouzil treba cerne pozadi a pres text bych natahl cernou mrizku s pruhlednym gifem. Takze text ma podobny efekt rozsypani a navic jakoby se castecne ztrati.
Jinak bych to asi resil opacitou v CSS nebo jako ty, obrazky.

"u každého tlačítka jiný, takže se nijak zobecnit nedá"
<a href="" class="obrazek1">aaa</a>
<a href="" class="obrazek2">aaa</a>

<a href="" class="obrazek1 efekt1">aaa</a>
<a href="" class="obrazek2 efekt2">aaa</a>

"width:40px u obrázků"
Chyba, ze je to ve style
Chyba, kdyz to chces dat pryc, protoze u img jsou podstatne vlastnosti SRC WIDTH HEIGHT ALT, ze kterych tam mas jen SRC

"ad <ul><li>"
To samozrejme zalezi na navrhu. Mi tu porad otloukali, ze mam menu jelat do UL LI A. Ma to jiste prednosti. Ale vodorovne menu take delam obcas pres A. V jistych situacich je to proste vhodnejsi.

Ale ja jsem ti do toho nechtel vrtat. Proste to funguje. Vetsine firem to je suma fuk, ze ma webku na 80k, kdyz muze byt 20k a vypada to stejne
Toto téma je uzamčeno. Odpověď nelze zaslat.