[PHP]Efekt ? Po najechaniu myszki na odnośnik. Opcje

[deejay1234]

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]

Jest taka możliwość. Zdarzenie onMouseOver i onMouseOut + div dla kazdego menu (display none/block) + funkcja javascript.

Ten post edytował MateuszScirka 18.11.2009, 16:48:28

[deejay1234]

A Mógłbyś jaśniej ? Jestem zielony w tych sprawach.

[piotr94]

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]

a mógłby ktoś wstawić gotowca ? Bo na tej stronie co podał piotr94 nie mogę znaleźć .

[MateuszS]

Mam nadzieję że znasz HTML i sobie przerobisz

[HTML] pobierz, plaintext 
<script type="text/javascript">
function show(div1,div2) {
	var div1=document.getElementById(div1);
	var div2=document.getElementById(div2);
	div1.style.display='block';
	div2.style.display='block';
}
 
function hide(div1,div2) {
	var div1=document.getElementById(div1);
	var div2=document.getElementById(div2);
	div1.style.display='none';
	div2.style.display='none';
}
</script>
 
<div style="border: 1px solid black; width: 80px; height: 30px;" onMouseOver="show('div1','div2')" onMouseOut="hide('div1','div2')">MENU</div>
 
<div id="div1" style="display: none; float: left; background-color: lime;">Podmenu jeden</div>
<div id="div2" style="display: none; float: left; background-color: lime; margin-left: 20px;">Podmenu dwa</div>
[HTML] pobierz, plaintext 

[deejay1234]

Bo dokładnie chcę takie coś zrobić .. Tylko mam problem .. nie wiem jak ten skrypt podpiąć pod " Tutoriale "

[potreb]

EXAMPLE 1!

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

albo EXAMPLE 2

Ten post edytował potreb 18.11.2009, 18:14:45

[MateuszS]

jak nie znasz html i css to bedzie Ci ciezko to zrobic

http://www.kurshtml.boo.pl/ - polecam

[wiewiorek]

Może chodzi o coś takiego:
http://jqueryui.com/demos/tabs/

z jQuery to proste

[profusik]

Mam nadzieję że znasz HTML i sobie przerobisz

[HTML] pobierz, plaintext 
<script type="text/javascript">
function show(div1,div2) {
	var div1=document.getElementById(div1);
	var div2=document.getElementById(div2);
	div1.style.display='block';
	div2.style.display='block';
}
 
function hide(div1,div2) {
	var div1=document.getElementById(div1);
	var div2=document.getElementById(div2);
	div1.style.display='none';
	div2.style.display='none';
}
</script>
 
<div style="border: 1px solid black; width: 80px; height: 30px;" onMouseOver="show('div1','div2')" onMouseOut="hide('div1','div2')">MENU</div>
 
<div id="div1" style="display: none; float: left; background-color: lime;">Podmenu jeden</div>
<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 
<script type="text/javascript">
 
function showMenu1(div1,div2) {	
	var div1=document.getElementById(div1);	
	var div2=document.getElementById(div2);	
	div1.style.display='block';	
	div2.style.display='block';
	hideMenu2(div3,div4);
} 
 
function showMenu2(div3,div4) {	
	var div3=document.getElementById(div3);	
	var div4=document.getElementById(div4);	
	div3.style.display='block';	
	div4.style.display='block';
} 
 
function hideMenu1(div1,div2) {	
	var div1=document.getElementById(div1);	
var div2=document.getElementById(div2);	
div1.style.display='none';	
div2.style.display='none';
}
 
function hideMenu2(div3,div4) {	
	var div3=document.getElementById(div3);	
	var div4=document.getElementById(div4);	
	settimeout("div3.style.display='none';", 2000);	
	settimeout("div4.style.display='none';", 2000);
}
 
 
</script> 
 
<div style="border: 1px solid black; width: 80px; height: 30px; float: left;" onMouseOver="showMenu1('div1','div2')" onMouseOut="hideMenu1('div1','div2')">MENU1</div>
<div style="border: 1px solid red; width: 80px; height: 30px; float: left;" onMouseOver="showMenu2('div3','div4')" onMouseOut="hideMenu2('div3','div4')">MENU2</div> 
 
<br /> <br />
<div id="div1" style="display: none; float: left; background-color: lime;"><a href="link.htm">Podmenu1 - 1</a></div>
 
<div id="div2" style="display: none; float: left; background-color: lime; margin-left: 20px;"><a href="link.htm">Podmenu1 - 2</a></div>
 
<div id="div3" style="display: none; float: left; background-color: lime;"><a href="link.htm">Podmenu2 - 1</a></div>
 
<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 
<script type="text/javascript">
 
function showMenu1(div1,div2) {	
	var div1=document.getElementById(div1);	
	var div2=document.getElementById(div2);	
	div1.style.display='block';	
	div2.style.display='block';
 
} 
 
function showMenu2(div3,div4) {	
	var div3=document.getElementById(div3);	
	var div4=document.getElementById(div4);	
	div3.style.display='block';	
	div4.style.display='block';
} 
 
function hideMenu1(div1,div2) {	
	var div1=document.getElementById(div1);	
var div2=document.getElementById(div2);	
div1.style.display='none';	
div2.style.display='none';
}
 
function hideMenu2(div3,div4) {	
	var div3=document.getElementById(div3);	
	var div4=document.getElementById(div4);	
	div3.style.display='none';	
	div4.style.display='none';
}
 
var walkMenu1;
var walkMenu2;
</script> 
 
<div style="border: 1px solid black; width: 80px; height: 30px; float: left;" 
 
onMouseOver="hideMenu2('div3','div4'),clearTimeout(walkMenu1),showMenu1('div1','div2')" 
 
onMouseOut="walkMenu1=setTimeout('hideMenu1(\'div1\',\'div2\')',500)">
MENU1</div>
 
<div style="border: 1px solid black; width: 80px; height: 30px;" 
 
onMouseOver="hideMenu1('div1','div2'),clearTimeout(walkMenu2),showMenu2('div3','div4')" 
 
onMouseOut="walkMenu2=setTimeout('hideMenu2(\'div3\',\'div4\')',500)">
MENU2</div> 
 
 
 
 
<div id="div1" style="display: none; float: left; background-color: lime;" 
 
onMouseOver="clearTimeout(walkMenu1),showMenu1('div1','div2')" 
 
onMouseOut="walkMenu1=setTimeout('hideMenu1(\'div1\',\'div2\')',500)">
<a href="link.htm">Podmenu1 - 1</a></div>
 
<div id="div2" style="display: none; float: left; background-color: lime; margin-left: 20px;" 
 
onMouseOver="clearTimeout(walkMenu1),showMenu1('div1','div2')" 
 
onMouseOut="walkMenu1=setTimeout('hideMenu1(\'div1\',\'div2\')',500)">
<a href="link.htm">Podmenu1 - 2</a></div>
 
 
<div id="div3" style="display: none; float: left; background-color: lime;" 
 
onMouseOver="clearTimeout(walkMenu2),showMenu2('div3','div4')" 
 
onMouseOut="walkMenu2=setTimeout('hideMenu2(\'div3\',\'div4\')',500)"><a href="link.htm">Podmenu2 - 
 
3</a></div>
 
<div id="div4" style="display: none; float: left; background-color: lime; margin-left: 20px;" 
 
onMouseOver="clearTimeout(walkMenu2),showMenu2('div3','div4')" 
 
onMouseOut="walkMenu2=setTimeout('hideMenu2(\'div3\',\'div4\')',500)"><a href="link.htm">Podmenu2 - 
 
4</a></div>
[HTML] pobierz, plaintext 

Ten post edytował profusik 6.01.2010, 09:41:13