آموزش ایجاد ساید بار شناور

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

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

About
Services
Clients
Contact



Sidenav Example
This sidenav is always shown.

قدم دوم :   برای سخت سایدباری که همواره نشان داده می شود کد CSS زیر را وارد کنید.

body {

  font-family: "Lato", sans-serif;

}

.sidenav {

  height: 100%;

  width: 200px;

  position: fixed;

  z-index: 1;

  top: 0;

  left: 0;

  background-color: #111;

  overflow-x: hidden;

  padding-top: 20px;

}

.sidenav a {

  padding: 6px 6px 6px 32px;

  text-decoration: none;

  font-size: 25px;

  color: #818181;

  display: block;

}

.sidenav a:hover {

  color: #f1f1f1;

}

.main {

  margin-left: 200px; /* Same as the width of the sidenav */

}

@media screen and (max-height: 450px) {

  .sidenav {padding-top: 15px;}

  .sidenav a {font-size: 18px;}

}

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

<script>

function openNav() {

  document.getElementById("mySidenav").style.width = "250px";

}

function closeNav() {

  document.getElementById("mySidenav").style.width = "0";

}

</script>

برای ساخت سایدباری که با باز شدن آن، محتویات بصورت اتوماتیک به سمت راست فشار داده می شوند از کد جاوا اسکریپت زیر استفاده کنید.
مثال زیر منوی جانبی را اسلاید بندی می کند و محتویات صفحه را راست چین می کند (مقداری که برای عرض منوی جانبی استفاده میشود ، برای حاشیه سمت چپ محتوایات پیج نیز استفاده می گردد).

function openNav() {

  document.getElementById("mySidenav").style.width = "250px";

  document.getElementById("main").style.marginLeft = "250px";

}

function closeNav() {

  document.getElementById("mySidenav").style.width = "0";

  document.getElementById("main").style.marginLeft= "0";

}

با استفاده از کد زیر می توان منوی جانبی را اسلاید بندی کرده و محتویات صفحه را نیز چپ چین کرد؛ فقط در همین زمان، رنگ پیش زمینه سیاه با میزان تیرگی 40% را به مولفه body اضافه می کنیم تا منوی جانبی را هایلایت کنیم.

function openNav() {

  document.getElementById("mySidenav").style.width = "250px";

  document.getElementById("main").style.marginLeft = "250px";

  document.body.style.backgroundColor = "rgba(0,0,0,0.4)";

}

function closeNav() {

  document.getElementById("mySidenav").style.width = "0";

  document.getElementById("main").style.marginLeft= "0";

  document.body.style.backgroundColor = "white";

}

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

function openNav() {

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

}

function closeNav() {

  document.getElementById("mySidenav").style.width = "0";

}

مثال :
با استفاده از کد جاوا اسکریپت یزر می توانید منو جانبی ساده ای بسازید.

function openNav() {

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

}

function closeNav() {

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

}

برای ساخت سایدباری که راست چین باشد ابتدا کد HTML زیر را وارد کنید.

×
About
Services
Clients
Contact


Right-sided Navigation
Click on the element below to open the right-sided navigation menu.
☰ open

سپس کد CSS زیر را وارد کنید.

body {
font-family: "Lato", sans-serif;
}

.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}

.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}

.sidenav a:hover {
color: #f1f1f1;
}

.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}

@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}

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

function openNav() {

  document.getElementById("mySidenav").style.width = "250px";

}

function closeNav() {

  document.getElementById("mySidenav").style.width = "0";

}