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

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

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

در این مقاله می آموزیم که چطور یک منوی پیمایشی ثابت با کد 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;}
}
    

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

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

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