ساخت منوی ثابت در css

برای زمانیکه می خواهید اطلاعاتی کنار محتوای اصلی در وبسایت شما نمایش داده شود منوی ثابت در کنار محتوا بسیار مورد استفاده قرار می گیرد.

برای این منظور داشتن اطلاعات مرتبط با css و html برای پیاده سازی در طراحی وب سایت شما کافی است. به شکل زیر عمل میکنیم:

محتوای html

 <div class="sidenav">
     <a href="#about">درباره ما </a>
     <a href="#services">سرویس های ما </a>
     <a href="#clients">مشتریان </a>
     <a href="#contact">ارتباط با ما </a>
 </div>

 <div class="main">
     <h2>محتوای کناری </h2>
     <p>>لورم ایپسوم فارسی لورم ایپسوم فارسیلورم ایپسوم فارسی </p>
     <p>لورم ایپسوم فارسیلورم ایپسوم فارسیلورم ایپسوم فارسی </p>
     <p>لورم ایپسوم فارسی </p>
     <p>لورم ایپسوم فارسیلورم ایپسوم فارسیلورم ایپسوم فارسیلورم ایپسوم فارسی </p>
 </div>

محتوای css

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

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
}

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

.main {
  margin-left: 160px; /* ایجاد حاشیه چپ */
  font-size: 28px; /* افزایش سایز متن */
  padding: 0px 10px;
}

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

خروجی :