سلام برنامه | HiProgram

امروز در خدمت شما هستیم با آموزش تصویری ساخت منو آکاردئونی.

سلام برنامه در این آموزش به شما یاد می دهد که یک منو آکاردئونی رسپانسیو بسازید

آموزش تصویری ساخت منو آکاردئونی اختصاصی سلام برنامه و به زبان فارسی و کاملا تصویری است.

از ویژگی های این منو این است که جای همه در سایت شما اشغال می کند چرا که فقط زمانی که روی آن کلیک کنید باز میشود

برای ساخت منو ابتدا کد های زیر را به body اضافه کنید:

<button class="accordion">منو۱</button>
	<div class="panel">
    <p>محتوای پنل اول</p>
	</div>
<button class="accordion">منو۲</button>
<div class="panel">
    <p>محتوای پنل دوم</p>
	</div>

<button class="accordion">منو۳</button>
<div class="panel">
    <p>محتوای پنل سوم</p>
	</div>

سپس برای استایل دهی و فرم دهی کد های زیر را به css خود بیفزایید:

button.accordion{
	background-color:#eee;
	color:#444;
	cursor:ointer;
	padding:18px;
	width:100%;
	border:none;
	text-align:right;
	outline:none;
	font-size:15px;
	transition:0.4s;
}
button.accordion.active, button.accordion:hover{
	background-color:#ddd;
}
button.accordion:after{
	content: '\002B';
	color:#777;
	font-weight:bold;
	float:left;
	margin-left:5px;
}
button.accordion.active:after{
	content:"\2212";
}
div.panel{
	padding:0 18px;
	background-color:white;
	max-height:0;
	overflow:hidden;
	transition: max-height 0.2s ease-out;
}

و در نهایت برای اجرای منو کد های جاوا اسکریپت زیر را بعد از کد های html خود منو قرار دهید.

<script>
var acc = document.getElementsByClassName("accordion");
var i;
for(i=0;i<acc.length;i++){
	acc[i].onclick = function(){
		this.classList.toggle("active");
		var panel= this.nextElementSibling;
		if(panel.style.maxHeight){
			panel.style.maxHeight= null;
		}else{
			panel.style.maxHeight= panel.scrollHeight + "px";
		}
	}
}
</script>

کار طراحی منو تمام است.

برای مشاهده جزئیات بیشتر می توانید آموزش تصویری را از باکس دانلود موجود در زیر همین پست دانلود نمایید