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

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

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

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


در این مقاله می آموزیم که چطور یک منوی پیمایشی ثابت با کد CSS ایجاد کنیم. یک نوار کناری (Sidebar) ثابت ایجاد کنید .



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

< !-- SIDE NAVIGATION -->
< DIV CLASS="SIDENAV">
                     < A HREF="#">ABOUT< /A>
                     < A HREF="#">SERVICES< /A>
                     < A HREF="#">CLIENTS< /A>
                     < A HREF="#">CONTACT< /A>
< /DIV>
  
< !-- PAGE CONTENT -->
< DIV CLASS="MAIN">
   ...
< /DIV>
    

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

/* THE SIDEBAR MENU */
.SIDENAV {
  HEIGHT: 100%; /* FULL-HEIGHT: REMOVE THIS IF YOU WANT "AUTO" HEIGHT */
  WIDTH: 160PX; /* SET THE WIDTH OF THE SIDEBAR */
  POSITION: FIXED; /* FIXED SIDEBAR (STAY IN PLACE ON SCROLL) */
  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: 20PX;
}

/* THE NAVIGATION MENU LINKS */
.SIDENAV A {
  PADDING: 6PX 8PX 6PX 16PX;
  TEXT-DECORATION: NONE;
  FONT-SIZE: 25PX;
  COLOR: #818181;
  DISPLAY: BLOCK;
}

/* WHEN YOU MOUSE OVER THE NAVIGATION LINKS, CHANGE THEIR COLOR */
.SIDENAV A:HOVER {
  COLOR: #F1F1F1;
}

/* STYLE PAGE CONTENT */
.MAIN {
  MARGIN-LEFT: 160PX; /* SAME AS THE WIDTH OF THE SIDEBAR */
  PADDING: 0PX 10PX;
}

/* ON SMALLER SCREENS, WHERE HEIGHT IS LESS THAN 450PX, CHANGE THE STYLE OF THE SIDEBAR (LESS PADDING AND A SMALLER FONT SIZE) */
@MEDIA SCREEN AND (MAX-HEIGHT: 450PX) {
  .SIDENAV {PADDING-TOP: 15PX;}
  .SIDENAV A {FONT-SIZE: 18PX;}
}
    

منو ساید بار با ارتفاع تمام صفحه در وب سایت


منو ساید بار با ارتفاع تمام صفحه در وب سایت

منو ساید بار با ارتفاع خودکار در وب سایت


منو ساید بار با ارتفاع خودکار در وب سایت

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

  • 81
  •    72
  • تاریخ ارسال :   1399/11/10

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

ارسال

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

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