Avatar
Jan Demel
Redaktor
Avatar
Jan Demel:

Č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):

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
Redaktor
Avatar
Odpovídá na Jan Demel
Honza Bittner:

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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Jan Demel
Redaktor
Avatar
Jan Demel:

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
Redaktor
Avatar
Odpovídá na Jan Demel
Honza Bittner:

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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Jan Demel
Redaktor
Avatar
Jan Demel:

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
Redaktor
Avatar
Odpovídá na Jan Demel
Honza Bittner:

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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Jan Demel
Jiří Gracík:

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  +2 8.12.2013 11:38
Creating websites is awesome till you see the result in another browser ...
Avatar
Jan Demel
Redaktor
Avatar
Jan Demel:

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
Redaktor
Avatar
Odpovídá na Jiří Gracík
Jan Demel:

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
Jiří Gracík
Redaktor
Avatar
Odpovídá na Jan Demel
Jiří Gracík:

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
Creating websites is awesome till you see the result in another browser ...
Avatar
Benjibs
Člen
Avatar
Odpovídá na Jiří Gracík
Benjibs:
$(".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
Jiří Gracík
Redaktor
Avatar
Nahoru Odpovědět  +1 8.12.2013 18:59
Creating websites is awesome till you see the result in another browser ...
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.