 | | |
 | Stránka: 1 z 1
| [ Príspevkov: 8 ] | |
| Autor | Správa |
|---|
Registrovaný: 02.04.11
Prihlásený: 14.08.14
Príspevky: 74
Témy: 31 |
Ahojte, chcel by som sa spytat, ci niekto nevie poradit...
Mam menu
Kód: <li><a href='#' class='menu_1_sk'>Úvod</a></li> <li><a href='#' class='menu_2_sk'>Služby</a></li> <li><a href='#' class='menu_3_sk'>Referencie</a></li> Kazda polozka ma v CSS vytvorenu svoju triedu a priradeny svoj obrazok. Kód: #menu ul li a.menu_1_sk{
background: url(../img/menu_1_sk.png) no-repeat top;
float: left;
width: 101px;
height: 23px;
}
#menu ul li a.menu_1_sk:hover{
background: url(../img/menu_1_sk.png) no-repeat bottom;
}
Chcel by som vsak spravit pri hover efekte, aby obrazok nepreskocil na iny, ale pouzil sa fade efekt... Nasiel som par tutorialov, ale ani jeden nieje taky, ze na pozadi kazdej polozky je konkretny obrazok. Jeden je napr. tu:
http://www.queness.com/post/411/create-an-attractive-jquery-menu-with-fadein-and-fadeout-effect
Ak by mi niekto vedel pomoct, budem rad 
|
|
Registrovaný: 13.11.07
Prihlásený: 20.08.16
Príspevky: 1702
Témy: 0 |  Napísal chrono: 23.09.2011 13:02 | |
|
Pri tom odkazovanom skripte nevadí, ak má každá položka vlastný obrázok.
|
|
Registrovaný: 02.04.11
Prihlásený: 14.08.14
Príspevky: 74
Témy: 31 |
No stale sa o to snazim, ale bezvysledne... Nasiel som jednoduchsi kod a vyzera asi takto:
Kód: <script type="text/javascript">
$('#menu a.menu_1_sk')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate(
{backgroundPosition:"(-23px 0)"},
{duration:500})
})
.mouseout(function(){
$(this).stop().animate(
{backgroundPosition:"(0 0)"},
{duration:500})
})
</script>
Kód: <div id='menu'> <ul> <li><a href='#' class='menu_1_sk'>Menu 1</a><span class='predel'></span></li> <li><a href='#' class='menu_2_sk'>Menu 2</a><span class='predel'></span></li> <li><a href='#' class='menu_3_sk'>Menu 3</a><span class='predel'></span></li> <li><a href='#' class='menu_4_sk'>Menu 4</a><span class='predel'></span></li> <li><a href='#' class='menu_5_sk'>Menu 5</a><span class='predel'></span></li> </ul> </div> Kód: #menu ul{
width: 998px;
height: 59px;
float: left;
margin: 0;
padding: 0;
}
#menu ul li{
display: inline;
list-style-type: none;
}
#menu ul li a{
padding: 18px 0;
color: #fff;
text-align: center;
font-family: ArialNarrow;
font-size: 1.35em;
text-decoration: none;
text-transform: uppercase;
line-height: 25px;
}
#menu ul li a.menu_1_sk{
background: url(../img/menu_1_sk.png) no-repeat top;
float: left;
width: 101px;
height: 23px;
}
Mam k tomu pridany jquery plugin backgroundPosition, ale nefunguje to...
|
|
Registrovaný: 13.11.07
Prihlásený: 20.08.16
Príspevky: 1702
Témy: 0 | Napísal chrono: 25.09.2011 14:13 | |
|
A čo znamená to "nefunguje to"?
|
|
Registrovaný: 02.04.11
Prihlásený: 14.08.14
Príspevky: 74
Témy: 31 |
Ked nabehnem na tu prvu polozku, tak sa nic nestane s backgroundom...
|
|
Registrovaný: 05.09.09
Príspevky: 1141
Témy: 127
Bydlisko: Lehota pod ... | Napísal camo: 26.09.2011 14:21 | |
|
Ten hover obrázok by si podľa mňa mal mať v li a tým že spriehľadníš odkaz tak dosiahneš to čo chceš...
|
|
Registrovaný: 27.11.10
Prihlásený: 20.08.13
Príspevky: 112
Témy: 18 | Napísal Ando: 28.09.2011 23:14 | |
|
Chalani ste trosku mimo... general667 sam si sem dal odkaz na ten tutorial. Ved tam to mas popisane tak dobre ze by to zvladla okopirovat aj cvicena opica. Az na to ze ty tam chces mat iny obrazok pre kazdy link. Nebudem tu davat ziadne zdrojaky len ti vysvetilm princip.
Mas tag <li> a v nom je <a>. Aby si dosiahol to co chces musis tam pridat nejaky element ktory bude obsahovat ten efekt ktory chces dosiahnut. V tom tutoriale to bolo robene takto. Citácia: $('#navMenu li').append('<div class="hover"><\\/div>'); V tvojich kodoch nevidim ani naznak ze by si sa o nieco podobne vobec pokusal. Pri pouziti podobneho kodu dosiahnes to ze v tagu <li> bude tag <div class="hover"> ktory bude obsahovat ten efekt ktory chces. Potom pomocou .hover metody v jQ tomuto novo pridanemu elementu budes menit priesvitnost.
To znamena ze ak mysou ukazes na polozku menu, tag <div class="hover"><\\/div> bude mat priesvitnost 100% takze bude videt ten efekt (svetlo alebo co to je). Ak das mys prec priesvitnost sa zmeni na 0% a efekt zmizne; uvidis normalny link.
Snad som ti pomohol, ak nie precitaj si ten tutorial na ktory odkazujes v prvom prispevku
|
|
Registrovaný: 13.11.07
Prihlásený: 20.08.16
Príspevky: 1702
Témy: 0 | Napísal chrono: 29.09.2011 0:02 | |
|
Ak to bude robiť tak, ako je v tom odkaze v prvom príspevku, tak stačí, aby tým li elementom dal nejakú triedu, aby potom mohol pre každý element nastaviť zvlášť obrázok pozadia (a obrázky pozadia pre hover a selected).
|
|
| Stránka: 1 z 1
| [ Príspevkov: 8 ] | |
Podobné témy | | Témy | Odpovede | Zobrazenia | Posledný príspevok |
|---|
 | jQuery fadeIn v JavaScript, VBScript, Ajax | 0 | 425 | 19.03.2012 22:54 iop  | | jQuery fadeIn v JavaScript, VBScript, Ajax | 7 | 476 | 10.12.2015 12:59 arno |  | jquery v JavaScript, VBScript, Ajax | 16 | 1319 | 11.08.2009 13:46 Snacker | | jquery v Ponuka práce | 0 | 886 | 27.02.2010 16:08 maccom | | Jquery menu v JavaScript, VBScript, Ajax | 0 | 275 | 10.12.2012 14:45 johny694 | | jQuery hide v JavaScript, VBScript, Ajax | 11 | 749 | 08.11.2009 15:05 lama2d | | jquery, charset v JavaScript, VBScript, Ajax | 17 | 981 | 30.12.2010 12:07 EidzEm | | jQuery submit(); v JavaScript, VBScript, Ajax | 2 | 600 | 29.05.2010 18:46 Draex | | Jquery autocomplete v JavaScript, VBScript, Ajax | 2 | 402 | 01.09.2011 12:23 Unlink | | jQuery .index() v JavaScript, VBScript, Ajax | 2 | 632 | 20.02.2011 10:20 Ando | | Jquery charts v JavaScript, VBScript, Ajax | 5 | 570 | 18.02.2011 7:37 El_locco | | jQuery slide v JavaScript, VBScript, Ajax | 1 | 279 | 07.02.2013 9:52 stenley | | jQuery - otázky v JavaScript, VBScript, Ajax | 24 | 1237 | 09.02.2011 17:07 emer | | jQuery problém v JavaScript, VBScript, Ajax | 8 | 596 | 08.11.2010 8:06 camo | | input jQuery v JavaScript, VBScript, Ajax | 5 | 577 | 20.07.2010 21:07 walther | | jQuery datepicker v JavaScript, VBScript, Ajax | 2 | 577 | 14.06.2010 17:47 emer |
| Nemôžete zakladať nové témy v tomto fóre
Nemôžete odpovedať na témy v tomto fóre
Nemôžete upravovať svoje príspevky v tomto fóre
Nemôžete mazať svoje príspevky v tomto fóre
|
|
