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

آموزش ساخت منو پوششی (menu overlay) موضوع بحث امروز ما است

آموزش ساخت منو پوششی (menu overlay) در سلام برنامه ضبط گردیده و به زبان فارسی و تصویری می باشد

منو پوششی (menu overlay) چیست؟

به منو هایی که در یک صفحه شناور و جدا از صفحه اصلی و فقط در صورت نیاز نمایش داده می شوند گفته می شود

این منو گزینه مناسبی برای موبایل و حالت رسپانسیو است.

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

<div id="myNav" class="overlay">
	<a href="javascript:void(0)" class="closebtn" onClick="closeNav()">&times;</a>
    <div class="overlay-content">
    <a href="#">درباره ما</a>
    <a href="#">سرویس ها</a>
    <a href="#">کاربران</a>
    <a href="#">محتوا</a>
    </div>
</div>
<span style="font-size:30px;cursor:pointer;float:right;" onClick="openNav()">منو  &#9776;</span>

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

body{
	margin:0;
	font-family:tahoma;
}
.overlay{
	width:0%;
	height:100%;
	position:fixed;
	z-index:1;
	top:0;
	left:0;
	background-color:rgb(0,0,0);
	background-color:rgba(0,0,0,0.9);
	overflow-x:hidden;
	transition:0.5s;
}
.overlay-content{
	position:relative;
	top:25%;
	width:100%;
	text-align:center;
	margin-top:30px;
}

.overlay a{
	padding:8px;
	text-decoration:none;
	font-size:36px;
	color:#818181;
	display:block;
	transition:0.3s;
}
.overlay a:hover,overlay a:focus{
	color:#f1f1f1;
}
.overlay .closebtn{
	position:absolute;
	top:20px;
	right:45px;
	font-size:60px;
}

@media screen and (max-height:450px){
	.overlay{overflow-y:auto;}
	.overlay a{font-size:20px;}
	.overlay .closebtn{font-size:40px;top:15px;right:35px;}
}

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

<script>
function openNav(){
	document.getElementById("myNav").style.width= "100%";
}
function closeNav(){
	document.getElementById("myNav").style.width="0%";
}	
</script>

کار ساخت منو پوششی در این مرحله به پایان میرسد

این منو قابلیت تبدیل به منو وردپرس را نیز دارد

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