ساخت منوی کشویی | نائی وب

امیرحسین نائی | نائی وب

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

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

خب ، تو این آموزش میخواییم یه منوی کشویی بسازیم که وقتی نشانگر موس روی اون رفت، زیر منو ها باز بشن !
اول باید به تگ 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>
	
موفق و سربلند باشید ...
تاریح ارسال/ویرایش پست : 31/6/1395

مدیر سایت

امیرحسین نائی | نائی وب

امیرحسین نائی هستم .
متولد سال 1379 ، عاشق برنامه نویسی ، مخصوصا اندروید و وب :)
مشتاق برای یادگیری بیشتر ...
خستگی ناپذیر و بدون توقف !!! (بیشتر ...)

نظرات

نظرات محمد حسین

حرف نداشت خدا وکیلی. مرسی

نظرات امیرآقا

عالی بود. دمت گرم

ارسال نظر

account_circle
mail
security
متن نظر :