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

در این مقاله می آموزید که چطور با استفاده از کد CSS یک منوی نوار جانبی (side navigation) با آیکون های مختلف ایجاد کنید.

چگونه یک sidebar با آیکون ایجاد کنیم

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

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



سایدبار همراه با آیکون
این سایدبار جانبی دارای ارتفاع 100% است و همواره نشان داده می شود.
این سایدبار جانبی دارای ارتفاع 100% است و همواره نشان داده می شود.این سایدبار جانبی دارای ارتفاع 100% است و همواره نشان داده می شود.این سایدبار جانبی دارای ارتفاع 100% است و همواره نشان داده می شود.این سایدبار جانبی دارای ارتفاع 100% است و همواره نشان داده می شود.
این سایدبار جانبی دارای ارتفاع 100% است و همواره نشان داده می شود.این سایدبار جانبی دارای ارتفاع 100% است و همواره نشان داده می شود.این سایدبار جانبی دارای ارتفاع 100% است و همواره نشان داده می شود.این سایدبار جانبی دارای ارتفاع 100% است و همواره نشان داده می شود.

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

body {

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

direction: rtl;

}

.sidebar {

  height: 100%;

  width: 160px;

  position: fixed;

  z-index: 1;

  top: 0;

  right: 0;

  background-color: #111;

  overflow-x: hidden;

  padding-top: 16px;

}

.sidebar a {

  padding: 6px 8px 6px 16px;

  text-decoration: none;

  font-size: 20px;

  color: #818181;

  display: block;

}

.sidebar a:hover {

  color: #f1f1f1;

}

.main {

  margin-right: 160px; /* Same as the width of the sidenav */

  padding: 0px 10px;

}

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

  .sidebar {padding-top: 15px;}

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

}

توجه :  اگر به دنبال طراحی نوار جانبی (Navigation Bar) هستید که تنها در برگیرنده آیکون ها باشد، بخش ساخت منو افقی و عمودی بوسیله HTML را مطالعه کنید.