Kritika webu http://hondemblog.8u.cz/
http://hondemblog.8u.cz/
V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Tvůrce

Zobrazeno 13 zpráv z 13.
//= Settings::TRACKING_CODE_B ?> //= Settings::TRACKING_CODE ?>
V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.
Změň font a taky zrychli ty hover efekty v menu.
Pro motivaci se můžeš podívat třeba sem http://www.awwwards.com/
.
Nebo si najít nějakého grafika
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
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
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.
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.
No udělal jsem, co jsi mi tu poradil ještě něco, co se dá vylepšit ?
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í.
$(".anim").mouseover(function(){
$(this).animate({
opacity:'1.0',
});
});
$(".anim").mouseout(function(){
$(this).animate({
opacity:'0.4',
});
});
2x vytvárať objekt/selektor, to nebyť pekné
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',
}}
});
Zobrazeno 13 zpráv z 13.