Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [PHP]Efekt ? Po najechaniu myszki na odnośnik.
Forum PHP.pl > Forum > Przedszkole
deejay1234
18.11.2009, 16:44:18
Witam mam problem ..

Jak zrobić taki efekt ? [ dołączam obrazek pomocniczy ]



Więc tak . Chciałbym aby po najechaniu myszką na Menu #1 pod tym pojawiły się podstrony ..
Jest taka możliwość ?
MateuszS
18.11.2009, 16:47:05
Jest taka możliwość. Zdarzenie onMouseOver i onMouseOut + div dla kazdego menu (display none/block) + funkcja javascript.
deejay1234
18.11.2009, 17:02:13
A Mógłbyś jaśniej ? Jestem zielony w tych sprawach.
piotr94
18.11.2009, 17:06:22
tworzysz ukryte bloki div z treścią dla każdego elementu menu
po najechaniu myszą na odpowiedni element menu pokazujesz blok div z podstronami dla tego menu, a ukrywasz pozostałe...
polecam http://www.dynamicdrive.com/ - tam znajdziesz gotowca
deejay1234
18.11.2009, 17:11:09
a mógłby ktoś wstawić gotowca ? Bo na tej stronie co podał piotr94 nie mogę znaleźć .
MateuszS
18.11.2009, 17:32:17
Mam nadzieję że znasz HTML i sobie przerobisz

[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2. function show(div1,div2) {
  3. 	var div1=document.getElementById(div1);
  4. 	var div2=document.getElementById(div2);
  5. 	div1.style.display='block';
  6. 	div2.style.display='block';
  7. }
  8.  
  9. function hide(div1,div2) {
  10. 	var div1=document.getElementById(div1);
  11. 	var div2=document.getElementById(div2);
  12. 	div1.style.display='none';
  13. 	div2.style.display='none';
  14. }
  15. </script>
  16.  
  17. <div style="border: 1px solid black; width: 80px; height: 30px;" onMouseOver="show('div1','div2')" onMouseOut="hide('div1','div2')">MENU</div>
  18.  
  19. <div id="div1" style="display: none; float: left; background-color: lime;">Podmenu jeden</div>
  20. <div id="div2" style="display: none; float: left; background-color: lime; margin-left: 20px;">Podmenu dwa</div>
[HTML] pobierz, plaintext
deejay1234
18.11.2009, 17:44:35
Bo dokładnie chcę takie coś zrobić .. Tylko mam problem .. nie wiem jak ten skrypt podpiąć pod " Tutoriale "

potreb
18.11.2009, 18:13:32
EXAMPLE 1!

http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm

albo EXAMPLE 2
MateuszS
18.11.2009, 18:15:15
jak nie znasz html i css to bedzie Ci ciezko to zrobic

http://www.kurshtml.boo.pl/ - polecam
wiewiorek
18.11.2009, 18:34:11
Może chodzi o coś takiego:
http://jqueryui.com/demos/tabs/

z jQuery to proste
profusik
6.01.2010, 14:38:00
Cytat(MateuszScirka @ 18.11.2009, 16:32:17 ) *
Mam nadzieję że znasz HTML i sobie przerobisz

[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2. function show(div1,div2) {
  3. 	var div1=document.getElementById(div1);
  4. 	var div2=document.getElementById(div2);
  5. 	div1.style.display='block';
  6. 	div2.style.display='block';
  7. }
  8.  
  9. function hide(div1,div2) {
  10. 	var div1=document.getElementById(div1);
  11. 	var div2=document.getElementById(div2);
  12. 	div1.style.display='none';
  13. 	div2.style.display='none';
  14. }
  15. </script>
  16.  
  17. <div style="border: 1px solid black; width: 80px; height: 30px;" onMouseOver="show('div1','div2')" onMouseOut="hide('div1','div2')">MENU</div>
  18.  
  19. <div id="div1" style="display: none; float: left; background-color: lime;">Podmenu jeden</div>
  20. <div id="div2" style="display: none; float: left; background-color: lime; margin-left: 20px;">Podmenu dwa</div>
[HTML] pobierz, plaintext


Czy ktoś może podpowie jak przerobić ten efekt tak by Te podmenu były linkami. Same linki to nie problem tylko nie można na nie najechać bo znikają jak się myszką zjedzie z MENU. Kombinuje jak tu dodać opóźnienie działania onmouseout tak by np. po 5 sek od tego zdarzenia te podmenu dopiero znikały - dało by się wtedy chyba kliknąć w linki?
Kombinuje z settimeout() ale coś mi nie wychodzi.

Ktoś pomoże ?

[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2.  
  3. function showMenu1(div1,div2) {	
  4. 	var div1=document.getElementById(div1);	
  5. 	var div2=document.getElementById(div2);	
  6. 	div1.style.display='block';	
  7. 	div2.style.display='block';
  8. 	hideMenu2(div3,div4);
  9. } 
  10.  
  11. function showMenu2(div3,div4) {	
  12. 	var div3=document.getElementById(div3);	
  13. 	var div4=document.getElementById(div4);	
  14. 	div3.style.display='block';	
  15. 	div4.style.display='block';
  16. } 
  17.  
  18. function hideMenu1(div1,div2) {	
  19. 	var div1=document.getElementById(div1);	
  20. var div2=document.getElementById(div2);	
  21. div1.style.display='none';	
  22. div2.style.display='none';
  23. }
  24.  
  25. function hideMenu2(div3,div4) {	
  26. 	var div3=document.getElementById(div3);	
  27. 	var div4=document.getElementById(div4);	
  28. 	settimeout("div3.style.display='none';", 2000);	
  29. 	settimeout("div4.style.display='none';", 2000);
  30. }
  31.  
  32.  
  33. </script> 
  34.  
  35. <div style="border: 1px solid black; width: 80px; height: 30px; float: left;" onMouseOver="showMenu1('div1','div2')" onMouseOut="hideMenu1('div1','div2')">MENU1</div>
  36. <div style="border: 1px solid red; width: 80px; height: 30px; float: left;" onMouseOver="showMenu2('div3','div4')" onMouseOut="hideMenu2('div3','div4')">MENU2</div> 
  37.  
  38. <br /> <br />
  39. <div id="div1" style="display: none; float: left; background-color: lime;"><a href="link.htm">Podmenu1 - 1</a></div>
  40.  
  41. <div id="div2" style="display: none; float: left; background-color: lime; margin-left: 20px;"><a href="link.htm">Podmenu1 - 2</a></div>
  42.  
  43. <div id="div3" style="display: none; float: left; background-color: lime;"><a href="link.htm">Podmenu2 - 1</a></div>
  44.  
  45. <div id="div4" style="display: none; float: left; background-color: lime; margin-left: 20px;"><a href="link.htm">Podmenu2 - 2</a></div>
[HTML] pobierz, plaintext


Czy wie ktoś może czemu nie chce mi działać settimeout. Jakoś nie mogę chyba zrozumieć jego działania.
Czy da się to co chcę tym settimem zrobić?
A może jakoś inaczej ten efekt uzyskać?

Udało się.
Jakoś sobie poradziłem.
Poniżej wklejam kod, może komuś się przyda.
A może ktoś coś ulepszy - ciekawe czy działa we wszystkich przeglądarkach?.



[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2.  
  3. function showMenu1(div1,div2) {	
  4. 	var div1=document.getElementById(div1);	
  5. 	var div2=document.getElementById(div2);	
  6. 	div1.style.display='block';	
  7. 	div2.style.display='block';
  8.  
  9. } 
  10.  
  11. function showMenu2(div3,div4) {	
  12. 	var div3=document.getElementById(div3);	
  13. 	var div4=document.getElementById(div4);	
  14. 	div3.style.display='block';	
  15. 	div4.style.display='block';
  16. } 
  17.  
  18. function hideMenu1(div1,div2) {	
  19. 	var div1=document.getElementById(div1);	
  20. var div2=document.getElementById(div2);	
  21. div1.style.display='none';	
  22. div2.style.display='none';
  23. }
  24.  
  25. function hideMenu2(div3,div4) {	
  26. 	var div3=document.getElementById(div3);	
  27. 	var div4=document.getElementById(div4);	
  28. 	div3.style.display='none';	
  29. 	div4.style.display='none';
  30. }
  31.  
  32. var walkMenu1;
  33. var walkMenu2;
  34. </script> 
  35.  
  36. <div style="border: 1px solid black; width: 80px; height: 30px; float: left;" 
  37.  
  38. onMouseOver="hideMenu2('div3','div4'),clearTimeout(walkMenu1),showMenu1('div1','div2')" 
  39.  
  40. onMouseOut="walkMenu1=setTimeout('hideMenu1(\'div1\',\'div2\')',500)">
  41. MENU1</div>
  42.  
  43. <div style="border: 1px solid black; width: 80px; height: 30px;" 
  44.  
  45. onMouseOver="hideMenu1('div1','div2'),clearTimeout(walkMenu2),showMenu2('div3','div4')" 
  46.  
  47. onMouseOut="walkMenu2=setTimeout('hideMenu2(\'div3\',\'div4\')',500)">
  48. MENU2</div> 
  49.  
  50.  
  51.  
  52.  
  53. <div id="div1" style="display: none; float: left; background-color: lime;" 
  54.  
  55. onMouseOver="clearTimeout(walkMenu1),showMenu1('div1','div2')" 
  56.  
  57. onMouseOut="walkMenu1=setTimeout('hideMenu1(\'div1\',\'div2\')',500)">
  58. <a href="link.htm">Podmenu1 - 1</a></div>
  59.  
  60. <div id="div2" style="display: none; float: left; background-color: lime; margin-left: 20px;" 
  61.  
  62. onMouseOver="clearTimeout(walkMenu1),showMenu1('div1','div2')" 
  63.  
  64. onMouseOut="walkMenu1=setTimeout('hideMenu1(\'div1\',\'div2\')',500)">
  65. <a href="link.htm">Podmenu1 - 2</a></div>
  66.  
  67.  
  68. <div id="div3" style="display: none; float: left; background-color: lime;" 
  69.  
  70. onMouseOver="clearTimeout(walkMenu2),showMenu2('div3','div4')" 
  71.  
  72. onMouseOut="walkMenu2=setTimeout('hideMenu2(\'div3\',\'div4\')',500)"><a href="link.htm">Podmenu2 - 
  73.  
  74. 3</a></div>
  75.  
  76. <div id="div4" style="display: none; float: left; background-color: lime; margin-left: 20px;" 
  77.  
  78. onMouseOver="clearTimeout(walkMenu2),showMenu2('div3','div4')" 
  79.  
  80. onMouseOut="walkMenu2=setTimeout('hideMenu2(\'div3\',\'div4\')',500)"><a href="link.htm">Podmenu2 - 
  81.  
  82. 4</a></div>
[HTML] pobierz, plaintext
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.