آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

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

آموزش طراحی سایت

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


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



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

< div id="mySidenav" class="sidenav">
                    < a href="javascript:void(0)" class="closebtn" onclick="closeNav()">& times;< /a>
                    < a href="#">About< /a>
                    < a href="#">Services< /a>
                    < a href="#">Clients< /a>
                    < a href="#">Contact< /a>
< /div>

< !-- Use any element to open the sidenav -->
< span onclick="openNav()">open< /span>

< !-- Add all page content inside this div if you want the side nav to push page content to the right (not used if you only want the sidenav to sit on top of the page -->
< div id="main">
  ...
< /div>
    

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

/* The side navigation menu */
.sidenav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #111; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

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

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left .5s;
  padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
    

قدم سوم :   کد جاوا اسکریپت را اضافه کنید.
مثال :
مثال زیر منو پیمایشی را اسلاید بندی می کند و عرض آن را 250 پیکسل می کند.

/* Set the width of the side navigation to 250px */
function openNav() {
  document.getElementById("mySidenav"). style.width = "250px";
}

/* Set the width of the side navigation to 0 */
function closeNav() {
  document.getElementById("mySidenav"). style.width = "0";
}
    

منو ساید بار شناور

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

/* Set the width of the side navigation to 250px and the left margin of the page content to 250px */
function openNav() {
  document.getElementById("mySidenav"). style.width = "250px";
  document.getElementById("main"). style.marginLeft = "250px";
}

/* Set the width of the side navigation to 0 and the left margin of the page content to 0 */
function closeNav() {
  document.getElementById("mySidenav"). style.width = "0";
  document.getElementById("main"). style.marginLeft = "0";
}
    

Sidenav Push Content

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


/* Set the width of the side navigation to 250px and the left margin of the page content to 250px and add a black background color to 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)";
}

/* Set the width of the side navigation to 0 and the left margin of the page content to 0, and the background color of body to white */
function closeNav() {
  document.getElementById("mySidenav"). style.width = "0";
  document.getElementById("main"). style.marginLeft = "0";
  document.body. style.backgroundColor = "white";
}
    

Sidenav Push Content w/ opacity

مثال :
مثال زیر منوی جانبی را از چپ اسلاید بندی می کند و تمام صفحه را پوشش می دهد (100%width : )

/* Open the sidenav */
function openNav() {
  document.getElementById("mySidenav"). style.width = "100%";
}

/* Close/hide the sidenav */
function closeNav() {
  document.getElementById("mySidenav"). style.width = "0";
}
    

Sidenav Full-width

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

/* Open the sidenav */
function openNav() {
  document.getElementById("mySidenav"). style.display = "block";
}

/* Close/hide the sidenav */
function closeNav() {
  document.getElementById("mySidenav"). style.display = "none";
}
    

Sidenav without Animation

مثال زیر چگونگی ایجاد یک منو پیمایشی جانبی راست چین شده را نشان می دهد.

.sidenav {
  right: 0;
}
    

Right-sided navigation

مثال زیر نشان می دهد که چطور یک منوی پیمایشی جانبی ایجاد کنیم که همیشه ظاهر باشد (ثابت باشد) :

/* The sidenav */
.sidenav {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 20px;
}

/* Page content */
.main {
  margin-left: 200px; /* Same as the width of the sidenav */
}
    

Always show sidenav
  • 83
  •    74
  • تاریخ ارسال :   1399/11/14

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .