Nasıl oluşturulur: Sabit kenar çubuğu

Sabit kenar çubuğu oluşturun

İlk adım - HTML ekleyin:

<!-- Kenar navigasyonu -->
<div class="sidenav">
  <a href="#">Hakkımızda</a>
  <a href="#">Hizmetler</a>
  <a href="#">Müşteriler</a>
  <a href="#">İletişim</a>
</div>
<!-- Sayfa içeriği -->
<div class="main">
  ...
</div>

İkinci adım - CSS ekleyin:

/* Kenar çubuğu menüsü */
.sidenav {
  height: 100%; /* Tam ekran yüksekliği: ‘otomatik’ yükseklik için bu ayarı kaldırın */
  width: 160px; /* Kenar çubuğunun genişliğini ayarlayın */
  position: fixed; /* Kenar çubuğunu sabitle (sroll ederken yerinde kalır) */
  z-index: 1; /* Her zaman üstte kalır */
  top: 0; /* Her zaman üstte kalır */
  left: 0;
  background-color: #111; /* Siyah */
  overflow-x: hidden; /* Yatay kaymayı devre dışı bırak */
  padding-top: 20px;
}
/* Navigasyon menü bağlantıları */
.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
}
/* Tarama bağlantısına fareyi getirirken rengi değiştirin */
.sidenav a:hover {
  color: #f1f1f1;
}
/* Sayfa içeriği tarzını ayarlayın */
.main {
  margin-left: 160px; /* Kenar çubuğunun genişliği ile aynı */
  padding: 0px 10px;
}
/* 450 piksel altında yükseklikteki küçük ekranlarda, kenar çubuğunun tarzını değiştirin (daha az iç boşluk ve daha küçük yazı boyutu)*/
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

Related pages

Tutorial:CSS navigation bar

Tutorial:How to create side navigation bar