Menu

Programovacie jazyky, rady, poradňa...
mnichovcan
Medium Expert
Medium Expert
Príspevky: 97
Registrovaný: 17 mar 2011, 23:03

Menu

Príspevok od používateľa mnichovcan »

čaute mám jeden problém chcel by som spraviť menu v štýle gulometového pásu.A ak by užívateľ prešiel myšou na náboj tak ten sa vysunie.
Skúšal som to robiť nejako pomocu Z-index ale vždy ked som ten náboj dal pod ten pás tak už sa to nesprávalo ako tlačítko.Nevie niekto ako nato ?Nechcem aby mi to niekto robil chcem to spraviť sám ale už som zúfali ,vôbec neviem ako nato.Ak by ste ma vedeli usmerniť budem rád. :arrow: :idea:
Prílohy
sssssssss.png
xadman
Medium Star
Medium Star
Príspevky: 305
Registrovaný: 09 mar 2011, 17:02

Re: Menu

Príspevok od používateľa xadman »

Skús margin-left alebo padding zväčšiť. Nie som si istý ktoré bude fungovať.
mnichovcan
Medium Expert
Medium Expert
Príspevky: 97
Registrovaný: 17 mar 2011, 23:03

Re: Menu

Príspevok od používateľa mnichovcan »

xadman napísal:Skús margin-left alebo padding zväčšiť. Nie som si istý ktoré bude fungovať.
Ja nemám problém to posunúť do lava.Ten stred bude muset mat asi samostatne nakreslené tie časti pásu kde sú náboje a zvlášť aj náboje.A môj problém je ako to spraviť aby sa ten náboj dostal pod ten pás respektíve ako keby doňho.
S.T.E.A.L.T.H
Light Professional
Light Professional
Používateľov profilový obrázok
Príspevky: 933
Registrovaný: 31 jan 2010, 14:44
Bydlisko: Pegasus Galaxy

Re: Menu

Príspevok od používateľa S.T.E.A.L.T.H »

Neviem, ci ho musi byt vidno, lebo ak nie, tak cez jQuery ho jednoducho skryjes cez .hide(); respektive asi by to slo aj cez hover a display:none;
mnichovcan
Medium Expert
Medium Expert
Príspevky: 97
Registrovaný: 17 mar 2011, 23:03

Re: Menu

Príspevok od používateľa mnichovcan »

S.T.E.A.L.T.H napísal:Neviem, ci ho musi byt vidno, lebo ak nie, tak cez jQuery ho jednoducho skryjes cez .hide(); respektive asi by to slo aj cez hover a display:none;
Ten náboj bude vidieť, len v tej jednej časti kde ho prekrýva čast toho pásu by ho nemalo byt vidieť.
S.T.E.A.L.T.H
Light Professional
Light Professional
Používateľov profilový obrázok
Príspevky: 933
Registrovaný: 31 jan 2010, 14:44
Bydlisko: Pegasus Galaxy

Re: Menu

Príspevok od používateľa S.T.E.A.L.T.H »

Tak asi najlepsie bude, ak to budes mat ako si pisal dvakrat, raz vpredu a raz vzadu, pricom ten predny das skryt. Mozno keby si to tu hodil, tak by sa stym niekto pohral
sharky-no
King
King
Používateľov profilový obrázok
Príspevky: 1681
Registrovaný: 31 okt 2006, 19:53

Re: Menu

Príspevok od používateľa sharky-no »

ten pasik ked ho mas vystrihnuty samostatne, a pod nim mas naboje, tak ti bude prekazat pri zachytavani eventu prejdenia mysou nad nabojom.

da sa to urcite spravit, ale asi si budes musiet pasik rozdelit na tolko casti kolko mas aj nabojov. a potom kazdy naboj vlozit s pasikom do nejakeho elementu ( <li> napr. ) a zachytavat hover na tento element.

alebo nemusis pasik rozdelovat, ale vytvorit si akusi mapu toho menu na zachytavanie hoverov nad nabojmi (predstav si to ako take iste menu co tam mas, ale bez nabojov - bolo by neviditelne a bolo by nad pasikom - a potom by si vedel priradovat hover ku spravnemu naboju)
audiotrack
VIP
VIP
Používateľov profilový obrázok
Príspevky: 25958
Registrovaný: 09 sep 2005, 18:39
Kontaktovať používateľa:

Re: Menu

Príspevok od používateľa audiotrack »

sharky-no tu napísal ako by som to robil ja. Ak sa ale silou mocou chceš hrať s vrstvami, tak ten náboj nemôže byť pod pásikom, ale nad ním. A aby bolo pásik vidno, tak sprav náboj v stredie priehladný (transparentné png). Ale takouto logikou si spravíš viac roboty ako treba. Porozdelovať na samostatné obrázky ktoré budú v liste a je po probléme
mnichovcan
Medium Expert
Medium Expert
Príspevky: 97
Registrovaný: 17 mar 2011, 23:03

Re: Menu

Príspevok od používateľa mnichovcan »

Dakujem za odpovede zatial som sa ktomu priblížil najviac po tom čo som si prečítal vaše príspevky.Ale stále mám jeden problém , neviem či som vás správne pochopil ale spravil som toto

Kód: Vybrať všetko

	<div class="menu" >
			<ul>
				<li><img src="pas.png"></li>
				<li><img src="pas.png"></li>
		<li><a   href="" ><img src="naboj.png" /></a><img  src="pas.png" /></li>
			<li><a   href="" ><img src="naboj.png" /></a><img  src="pas.png" /></li>
			<li><a   href="" ><img src="naboj.png" /></a><img  src="pas.png" /></li>
	</ul>
	</div>


Do CSS som dal toto

Kód: Vybrať všetko

.menu li{
	list-style-type: none;
}

li a:hover{
	margin-left:5px;	
}
.menu img{
margin-left:-90px;
}
Teraz to mám približne tak ako chcem pásik je nad nábojom ale problém je že sa posúva aj z nábojom.
Možno my to sharky-no v tejto vete "ten pasik ked ho mas vystrihnuty samostatne, a pod nim mas naboje, tak ti bude prekazat pri zachytavani eventu prejdenia mysou nad nabojom. " aj napísal že to bude prekážať ale neviem či je to ono.Tak ak viete ako nato budem rád za každú radu.
audiotrack
VIP
VIP
Používateľov profilový obrázok
Príspevky: 25958
Registrovaný: 09 sep 2005, 18:39
Kontaktovať používateľa:

Re: Menu

Príspevok od používateľa audiotrack »

ak to chces riesit takto, tak po prejdeni myskou nemen margin ale cely obrazok. A teda bude ako background-image alebo ho nebudes menit v css ale cez js
mnichovcan
Medium Expert
Medium Expert
Príspevky: 97
Registrovaný: 17 mar 2011, 23:03

Re: Menu

Príspevok od používateľa mnichovcan »

Ja budem mat tie tlačítka uz nakreslené aj z textom takže pomocou background-image to asi nepôjde lebo neviem ako by som spravil aby to vždy zmenilo za ten správny obrázok.
A pomocu JS(jQuery) neviem ako na to.Neviem presne ako by som zistil presne na ktorý prvok(tlačitko) som ukázal aby len jemu zmenilo obrázok.
sharky-no
King
King
Používateľov profilový obrázok
Príspevky: 1681
Registrovaný: 31 okt 2006, 19:53

Re: Menu

Príspevok od používateľa sharky-no »

daj si na tie <li> elementy, kde mas naboj nejaku class, a nabojom daj tiez class alebo id (zalezi od toho ci chces kazdy naboj posuvat na rovnaku poziciu, ale asi nie, tak by som tam daval jedinecne ID pre kazdy naboj) a potom pomocou CSS upravuj tu poziciu

Kód: Vybrať všetko

li.classLi:hover #naboj1{
margin-left: 5px;
}
a takto pre kazdy naboj to nastav :) alebo pre vsetky to iste
mnichovcan
Medium Expert
Medium Expert
Príspevky: 97
Registrovaný: 17 mar 2011, 23:03

Re: Menu

Príspevok od používateľa mnichovcan »

:mrgreen: Dakujem za pomoc už som to nejako pozliepal :D
Napísať odpoveď