آموزش ساخت منو تمام صفحه در طراحی وب سایت

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

قدم اول : کد HTML را اضافه کنید.

×

درباره ما
خدمات
مشتریان
تماس با ما



مثالی از منو تمام صفحه
بر روی المان زیر کلیک کنید تا منو تمام صفحه برای شما باز شود..
☰ باز

قدم دوم :   کد CSS را اضافه کنید.

body {
font-family: 'Lato', sans-serif;
direction: rtl;
}

.overlay {
height: 100%;
width: 100%;
display: none;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
}

.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;
left: 45px;
font-size: 60px;
}

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

با استفاده از کد جاوا اسکریپت زیر می توانید نوار منو تمام صفحه ساده بسازید.

function openNav() {

  document.getElementById("myNav").style.display = "block";

}

function closeNav() {

  document.getElementById("myNav").style.display = "none";

}

برای ساخت نوار منو تمام صفحه ای که بصورت متحرک و از راست به چپ باز شود ابتدا کد CSS را استفاده کنید.

body {
font-family: 'Lato', sans-serif;
direction: rtl;
}

.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 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;
left: 45px;
font-size: 60px;
}

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

سپس کد جاوا اسکریپت زیر را وارد کنید.

function openNav() {

  document.getElementById("myNav").style.width = "100%";

}

function closeNav() {

  document.getElementById("myNav").style.width = "0%";

}

اگر می خواهید منویی بسازید که بصورت آبشاری و از بالا به پایین باز شود، دستورات زیر را بکار بگیرید.
نکته : در این مثال ، توجه داشته باشید که کد CSS از کد مثال زده شده بالایی متمایز می باشد (ارتفاع پیش فرض صفر است ، عرض 100 % و overflow-y ، بصورت پنهان است (اسکرول عمودی را غیرفعال کنید ، مگر برای صفحات کوچک)) :

body {
font-family: 'Lato', sans-serif;
direction: rtl;
}

.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-y: 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;
left: 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;
left: 35px;
}
}

حال برای ساخت کامل منو آبشاری از دستور جاوا اسکریپت زیر استفاده کنید.

function openNav() {

  document.getElementById("myNav").style.height = "100%";

}

function closeNav() {

  document.getElementById("myNav").style.height = "0%";

}