ساخت منوی کشویی

خب ، تو این آموزش میخواییم یه منوی کشویی بسازیم که وقتی نشانگر موس روی اون رفت، زیر منو ها باز بشن !
اول باید به تگ div یه باکس تعریف کنیم به این شکل :

	
<div style="width:250px;height:25px;background-color:#00ABFF;text-align:center;" >فهرست</div>
	

حالا به باکسمون رویداد onMouseOver رو میدیم تا وقتی نشانگر موس وارد این باکس شد باخبر بشیم و تابع a() اجرا بشه.

	
<div style="width:250px;height:25px;background-color:#00ABFF;text-align:center;" onMouseOver="a()">فهرست</div>
	

خب حالا باید یسری زیر منو هم بسازیم که وقتی موس رفت رو منوی فهرست ، اون زیر منو ها باز بشن !
زیر منو هارو display : none میکنیم که در حالت عادی نمایش داده نشن و یک آی دی هم براشون مشخص میکنیم.

	
<div style="width:250px;height:25px;background-color:#00ABFF;text-align:center;" onMouseOver="a()">فهرست</div>
<div id="1" style="width:250px;height:25px;background-color:#C70F12;text-align:center;border:2px solid white;display:none;" >زیر منو 1</div>
<div id="2" style="width:250px;height:25px;background-color:#C70F12;text-align:center;border:2px solid white;display:none;" >زیر منو 2</div>
<div id="3" style="width:250px;height:25px;background-color:#C70F12;text-align:center;border:2px solid white;display:none;" >زیر منو 3</div>
	

حالا نوبت جاوااسکریپته :

	
function a(){
	document.getElementById("1").style.display="block";	
	document.getElementById("2").style.display="block";	
	document.getElementById("3").style.display="block";	
}
	

	
<script>
function a(){
	document.getElementById("1").style.display="block";	
	document.getElementById("2").style.display="block";	
	document.getElementById("3").style.display="block";	
}
</script>
<div style="width:250px;height:25px;background-color:#00ABFF;text-align:center;" onMouseOver="a()">فهرست</div>
<div id="1" style="width:250px;height:25px;background-color:#C70F12;text-align:center;border:2px solid white;display:none;" >زیر منو 1</div>
<div id="2" style="width:250px;height:25px;background-color:#C70F12;text-align:center;border:2px solid white;display:none;" >زیر منو 2</div>
<div id="3" style="width:250px;height:25px;background-color:#C70F12;text-align:center;border:2px solid white;display:none;" >زیر منو 3</div>
	

تو تابع a() جاوااسکریپت گفتیم هر سه زیر منو با هم باز شوند اما شما میتونید به شکل دیگه ای کد بنویسید مثلا بگید اول زیر منوی یک باز بشه بعد از چند ثانیه زیر منوی دو ویا ...

در آخر، خروجی کد بالا یه باکس فهرست داریم که وقتی نشانگر موس روش میره سه تا زیر منو باز میشه . این همون چیزیه که میخواستیم !
اما حالا میتونیم بگیم که اگه موس از باکس فهرست اومد بیرون، دوباره زیر منو ها حذف بشن . برای اینکار یه رویداد onMouseOut به باکس فهرست میدیم که وقتی نشانگر موس از باکس اومد بیرون ، تابع b() اجرا بشه و تو این تابع زیر منو هارو حذف میکنیم :

	
<script>
function a(){
	document.getElementById("1").style.display="block";	
	document.getElementById("2").style.display="block";	
	document.getElementById("3").style.display="block";	
}
function b(){
	document.getElementById("1").style.display="none";	
	document.getElementById("2").style.display="none";	
	document.getElementById("3").style.display="none";	
}
</script>
<div style="width:250px;height:25px;background-color:#00ABFF;text-align:center;" onMouseOver="a()" onMouseOut="b()">فهرست</div>
<div id="1" style="width:250px;height:25px;background-color:#C70F12;text-align:center;border:2px solid white;display:none;" >زیر منو 1</div>
<div id="2" style="width:250px;height:25px;background-color:#C70F12;text-align:center;border:2px solid white;display:none;" >زیر منو 2</div>
<div id="3" style="width:250px;height:25px;background-color:#C70F12;text-align:center;border:2px solid white;display:none;" >زیر منو 3</div>
	

آموزش جاوااسکریپت,طراحی وب, طراحی وبسایت, وبلاگ نویسی, آموزش ساخت منوی کشویی با جاوااسکریپت,منوی کشویی برای وبلاگ و وبسایت ,