IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
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í.
Avatar
Jan Demel
Tvůrce
Avatar
Jan Demel:8.12.2013 10:39

Čaute. Teďka pracuju na webu pro hudební skupinu mého otce ale něco se mi na těch stránkách nezdá. Respektive se mi moc nelíbí a já nevím, co bych tam měl zlepšit. Byl bych velice rád, kdyby jste mi pomohli něco vymyslet :)

Editováno 8.12.2013 10:42
Odpovědět
8.12.2013 10:39
To co se zdá být nemožné, je vždy možné.
Avatar
Martin Bednář (xbedm01):8.12.2013 10:45

Změň font a taky zrychli ty hover efekty v menu.

Nahoru Odpovědět
8.12.2013 10:45
I bez motta se dá žít
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Jan Demel
Honza Bittner:8.12.2013 10:54

Pro motivaci se můžeš podívat třeba sem http://www.awwwards.com/ .
Nebo si najít nějakého grafika :)

Nahoru Odpovědět
8.12.2013 10:54
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Jan Demel
Tvůrce
Avatar
Jan Demel:8.12.2013 11:09

Rád by jsem si našel grafika, jenomže tohle jsou projekty takové jednorázové. Teď studuju prvák na elektroprumce a našel jsem si práci ve webdesignu. Ten chlap po mě chce nějákou referenci, tak jsem se zeptal taťky, jestli nechce předělat stránky jeho kapely. Vím, že moje designerské schopnosti jsou na bodu mrazu, ale opravdu si myslím, že na takové občasné projekty nemá cenu nějákého grafika hledat :)

Nahoru Odpovědět
8.12.2013 11:09
To co se zdá být nemožné, je vždy možné.
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Jan Demel
Honza Bittner:8.12.2013 11:16

To je věc názoru. Já si stojím za tím dělat vše perfektně, nač to pak taky dělat, že?

Když už chceš dělat referenci aby ses dostal do webstudia tak alespoň udělej dobrý kód. Je to strašný... Tedy, HTML docela ujde, až na to menu. jQuery je ale děs. To samé CSS.

Web stránku umí napsat každý blbec, ale napsat jí dobře, rychle a co nejvýhodněji, to už je jiný level :)

Chce se to učit :)

Editováno 8.12.2013 11:16
Nahoru Odpovědět
8.12.2013 11:16
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Jan Demel
Tvůrce
Avatar
Jan Demel:8.12.2013 11:22

No a poradil by jsi mi co mám změnit na tom CSS a jQuery ? :)

Nahoru Odpovědět
8.12.2013 11:22
To co se zdá být nemožné, je vždy možné.
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Jan Demel
Honza Bittner:8.12.2013 11:29

Minimalizuj kód, například v menu.css to nemusíš mít napsané pojednom ale můžeš to napsat vše dohromady, třeba :

#menu img
{
  float:left;
  opacity:0.4;
}

Ale jak jsem říkal, to menu máš blbě. Nedělej to přes obrázky ale přes seznam.

Editováno 8.12.2013 11:29
Nahoru Odpovědět
8.12.2013 11:29
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 Jan Demel
Neaktivní uživatel:8.12.2013 11:38

Doplním Honza Bittnerho odpověď:

Tak třeba k jQuery - animace "čehokoliv"

Místo

$("#menu1").mouseover(function(){
    $("#menu1").animate({
      opacity:'1.0',
    });
  });
  $("#menu1").mouseout(function(){
    $("#menu1").animate({
      opacity:'0.4',
    });
  });

dej všem elementům, které chceš při přejetí myši animovat, místo id třídu - pojmenujeme jí třeba anim:

$(".anim").mouseover(function(){
    $(this).animate({
      opacity:'1.0',
    });
  });
  $(".anim").mouseout(function(){
    $(this).animate({
      opacity:'0.4',
    });
  });

A jak tak na to koukám, tak ty tu máš další prasárnu s menu. Místo obrázků použiješ netříděný seznam s odkazy. Místo

<div id="menu">
  <img src="images/menu/domu.gif" id="menu1">
  <img src="images/menu/okapele.gif" id="menu2">
  <img src="images/menu/mp3.gif" id="menu3">
  ...
</div>

použiješ

<nav>
  <ul>
    <li><a href="#" class="anim">Domů</a></li>
    <li><a href="#" class="anim">Další odkaz</a></li>
    <li><a href="#" class="anim">Další</a></li>
    ...
  </ul>
</nav>

Odkazům v menu nastavíš display na block a seznamu display na inline, tím docílíš toho, že odkazu budeš moct nastavovat libovolnou výšku, šířku i odsazení a seznam se ti zobrazí v řádku :)

Krom toho, že tím vším minimalizuješ a zpřehledníš kód, tak ho budeš moct i daleko efektivněji měnit. Až to budeš mít, tak řekni, kouknem na to dál, protože jakmile nebudeš mít v menu obrázky ale odkazy, tak bude lepší animovat třeba barvu pozadí, spíš než průhlednost.

Editováno 8.12.2013 11:40
Nahoru Odpovědět
8.12.2013 11:38
Neaktivní uživatelský účet
Avatar
Jan Demel
Tvůrce
Avatar
Jan Demel:8.12.2013 13:13

Teďka ale nevím úplně přesně, jak s tímhle pracovat. Udělal jsem, co jsi mi řekl, ale nevím, jak bych měl upravit to menu, aby vypadalo tak, jak jsem to měl předtím, nebo alespoň podobně :/

Nahoru Odpovědět
8.12.2013 13:13
To co se zdá být nemožné, je vždy možné.
Avatar
Jan Demel
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Jan Demel:8.12.2013 18:11

No udělal jsem, co jsi mi tu poradil :) ještě něco, co se dá vylepšit ? :)

Nahoru Odpovědět
8.12.2013 18:11
To co se zdá být nemožné, je vždy možné.
Avatar
Odpovídá na Jan Demel
Neaktivní uživatel:8.12.2013 18:24

Tak, to vypadá použitelněji. Odkazům nastav barvu pozadí a můžeš si pohrát s paddingem. A ještě jim odeber to podtrhnutí.

Nahoru Odpovědět
8.12.2013 18:24
Neaktivní uživatelský účet
Avatar
Benjibs
Člen
Avatar
Odpovídá na Neaktivní uživatel
Benjibs:8.12.2013 18:27
$(".anim").mouseover(function(){
     $(this).animate({
       opacity:'1.0',
     });
   });
   $(".anim").mouseout(function(){
     $(this).animate({
       opacity:'0.4',
     });
   });

2x vytvárať objekt/selektor, to nebyť pekné :P
Buď:

var obj = $(".anim");
obj.mouseover(function(){
     $(this).animate({
       opacity:'1.0',
     });
   });
obj.mouseout(function(){
     $(this).animate({
       opacity:'0.4',
     });
   });

alebo

$(".anim").on(
{
   mouseenter: function(){
     $(this).animate({
       opacity:'1.0',
     }},

   mouseout: function(){
     $(this).animate({
       opacity:'0.4',
     }}
   });
Editováno 8.12.2013 18:28
Nahoru Odpovědět
8.12.2013 18:27
1 + 1 = 2
Avatar
Odpovídá na Benjibs
Neaktivní uživatel:8.12.2013 18:59

Oukej, to bude pravda.

Nahoru Odpovědět
8.12.2013 18:59
Neaktivní uživatelský účet
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 13 zpráv z 13.