Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: Machr na JavaScript - Kreativní menu

Aktivity
Avatar
Odpovídá na Michal Žůrek - misaz
Josef Kuchař - Pepa489:9.3.2014 17:52

Jako napád to není špatný ale mít tyhle míčky na každý stránce.... :D

Odpovědět
9.3.2014 17:52
2x piš, jednou debuguj
Avatar
Odpovídá na Josef Kuchař - Pepa489
Michal Žůrek - misaz:9.3.2014 18:39

však to je jen na omezený druh stránek, ale však to přece nevadí.

 
Nahoru Odpovědět
9.3.2014 18:39
Avatar
Jan Vargovský
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Jan Vargovský:9.3.2014 18:47

Něco podobného jsem už viděl, akorát při najetí myší/kliknutí to tak jakoby všechno vyjelo dokola.

 
Nahoru Odpovědět
9.3.2014 18:47
Avatar
Odpovídá na Michal Žůrek - misaz
Zdeněk Pavlátka:9.3.2014 19:14

Moc pěkný, jak mám teď vyhrát? :D

Nahoru Odpovědět
9.3.2014 19:14
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Odpovídá na Jan Vargovský
Michal Žůrek - misaz:9.3.2014 19:35

no kdybych tam teď přidal ten hover, tak to asi bude vypadat divně, že?

 
Nahoru Odpovědět
9.3.2014 19:35
Avatar
Jan Vargovský
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Jan Vargovský:9.3.2014 19:37

To nevím, zkus to. Dej jednu tím způsobem a druhou druhým :)

 
Nahoru Odpovědět
9.3.2014 19:37
Avatar
Odpovídá na Jan Vargovský
Michal Žůrek - misaz:9.3.2014 19:46

ale spíš myslím co by řekli na cizí nápad. Nebudu to dělat. Pokud to někdo chce, tak ať si to tam přidá základ je 6 řádek kódu.

this.element.onclick = function () {
        self.displayOrHideChildrens();
}

nahradíš za:

this.element.onmouseover = function () {
        self.displayChildrens();
}
this.element.onmouseleave = function () {
        self.hideChildrens();
}
 
Nahoru Odpovědět
9.3.2014 19:46
Avatar
Odpovídá na David Hartinger
Zdeněk Pavlátka:9.3.2014 20:26

1. verze mého výtvoru
https://dl.dropboxusercontent.com/…vni-menu.zip

Menu se nejprve převede na strom objektů, se kterým se dále pracuje. Protože se jedná o machra na JS, ne na CSS, rozhodl jsem se vytvořit všechny animace v JavaScriptu s pomocí jQuery. Snažil jsem se hlavně o krátký objektový kód.

Nahoru Odpovědět
9.3.2014 20:26
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Nahoru Odpovědět
9.3.2014 20:41
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Honza Bittner
Tvůrce
Avatar
Honza Bittner:10.3.2014 1:25

OK, taky bych už mohl začít... :D

Nahoru Odpovědět
10.3.2014 1:25
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Honza Bittner
Tvůrce
Avatar
Honza Bittner:10.3.2014 3:47

OK, udělal jsem mojí již docela dlouho vymyšlenou verzi menu, které jsem chtěl použít na blog.

Chtěl jsem do této soutěže udělat nějaké hezké menu, které se dá v praxi použít. Si to různě proklikejte/po­hoverujte a tak... :P

http://blog.honzabittner.cz/

Nahoru Odpovědět
10.3.2014 3:47
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Odpovídá na Honza Bittner
RickettsialPox:10.3.2014 6:05

Dej to na hover, proč na click?

Nahoru Odpovědět
10.3.2014 6:05
Nikdy nikdo nikým není, dokud nevěří.
Avatar
David Hartinger
Vlastník
Avatar
David Hartinger:10.3.2014 10:56

DoctorMuscha - Jednoduché, funkční a s hezkými animacemi (schovávání + smooth scrolling). Kdybys to lépe prodal, tak ti tu placku dám, ale to menu bez pozadí působí nedotaženým dojmem. Určitě to zkus příště znovu a dej si více záležet na stylu.

Honza Bittner - Jednoduché, možná až moc. Událost jsi nedal na scrollování, ale na kolečko, takže po stisknutí šipek se menu neschová. Když jsou kategorie na kliknutí, tak by vybraná asi měla svítit. Při změně kategorie by tam mohla být nějaká animace, třeba by menu mohlo zajet a vyjet nové. Občas se menu samo schová, když nějak špatně kliknu, nepřišel jsem na to jak to udělat záměrně. Čekal jsem od tebe tedy větší pecku :P

Petr Gürth - Tohoto výsledku by šlo dosáhnout i bez JavaScriptu, jen pomocí CSS 3. Designově je to slabší, zkus se příště inspirovat na stylech designerů třetí strany, je jich na internetu velké množství.

Michal Žůrek - Hodně dobrý nápad i provedení, jen tam nemáš ostylované hovery. HTML kód máš jako vždy pěkný, v JS používáš prototypy. Bylo by hezké po kliknutí na "jádro" provést nějakou animaci jako bounce. Poloměry by v reálu musely být asi o něco menší, aby to na stránku vlezlo.

Zdeněk Pavlátka - Není to špatné, vlastně jsi mě příjemně překvapil, protože jde o design. Máš tu však silnou konkurenci. Co se týče JS, tak tam zbytečně sám implementuješ animace, které by za tebe udělala jQuery nebo CSS 3, to nikdy nedělej, pokud opravdu nepotřebuješ něco, co jinde není.

Protože se Machr jmenuje "Kreativní menu", tak placku dávám Michal Žůrek - misaz :) Druhou placku dávám Honza Bittner, abych ocenil i nějaké klasičtější menu, snad ho před publikací ještě trochu vylepší. Dost jsem váhal u Doktora, ale nemohu dát placky všem, že :)

Publikujte prosím své výtvory a napište x, na ostatní se těším příště.

Editováno 10.3.2014 10:59
Nahoru Odpovědět
10.3.2014 10:56
You are the greatest project you will ever work on.
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na David Hartinger
Honza Bittner:10.3.2014 11:00

Ve 4 hodiny ráno jsem zapomněl na ten mouseover, no co, nevadí ;)

Btw. klávesy neschovávají menu záměrně, nechtěl jsem to :)

Nahoru Odpovědět
10.3.2014 11:00
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Nahoru Odpovědět
10.3.2014 11:58
MiracleSoft! www.miraclesoft.com
Avatar
Odpovídá na David Hartinger
Zdeněk Pavlátka:10.3.2014 13:46

Že by se mi konečně nějaký design povedl? :P S tím jsem ani nepočítal, nikdy mi design nešel... Asi bych to mohl použít na svoje stránky.

Nahoru Odpovědět
10.3.2014 13:46
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Odpovídá na David Hartinger
Michal Žůrek - misaz:10.3.2014 15:21

Takže děkuji, placku na JS už mám, čili mi ji posílat nemusíte - jedna mi stačí. Můžete mi ji zařadit do profilu, při té příležitosti se ještě připomenu k předchozímu machru (http://www.itnetwork.cz/…2e7da4c2e544). Článek samozřejmě publikuji, ale teď mě zajímá názor ostatních. Chcete machra pouze jednoduše publikovat tak jak jsem to udělal třeba u http://www.itnetwork.cz/…loni-jeskyne, nebo máte zájem o step-by-step tutoriál (např. http://www.itnetwork.cz/…ime-formular) a třetí varianta je že z toho udělám "nakopávací" článek (např. http://www.itnetwork.cz/…avrh-doplnku).

Hlasovat můžete zde pro všechny zmíněné. Čili napište zde odpovědí na tento post co byste si přáli. Pokud se to nebude moderátorům líbit, prosím o přesunutí.

Prosím Vás nehádejte se, neberte názor ostatních a nemínuskujte si to navzájem. Zrecykluji to podle vašich hlasů.

Editováno 10.3.2014 15:23
 
Nahoru Odpovědět
10.3.2014 15:21
Avatar
Nahoru Odpovědět
10.3.2014 16:00
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Odpovídá na Michal Žůrek - misaz
Zdeněk Pavlátka:10.3.2014 17:21

Step-by-step je nejlepší.

Nahoru Odpovědět
10.3.2014 17:21
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
David Dostal
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
David Dostal:10.3.2014 17:26

Nakopávací je nejlepší!

 
Nahoru Odpovědět
10.3.2014 17:26
Avatar
Warif-James
Člen
Avatar
Warif-James:10.3.2014 20:18

Také upozorňuji, že nesouhlasí počet účastníků s počtem hodnocených...

Nahoru Odpovědět
10.3.2014 20:18
Kde je můj životní EIP registr?
Avatar
David Hartinger
Vlastník
Avatar
Odpovídá na Warif-James
David Hartinger:10.3.2014 20:40

Jsem si toho vědom, hodnocení je správně.

Nahoru Odpovědět
10.3.2014 20:40
You are the greatest project you will ever work on.
Avatar
Odpovídá na Michal Žůrek - misaz
Michal Žůrek - misaz:17.3.2014 21:34

Step-by-step máme 2+5 (i++) hlasů = 7 hlasů pro step by step.
Nakopávací je 1+1 (i++) = 2 hlasy pro Nakopávací.
Klasiku nechce nikdo (divné, s tím je nejmíň práce).

Čili zítra publikuji step-by-step, schváleny by mohl být (podle počtu dalších článků) příští týden (asi v pondělí).

Dík za hlasování, takhle to má o trochu větší smysl.

 
Nahoru Odpovědět
17.3.2014 21:34
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 23 zpráv z 73.