CSS Fixed sidebar(Sabit Kenar Çubuğu)

Web sitenizdeki bir kenar çubuğu, site ziyaretçileriniz için çok yararlı olabilir. Kenar çubuğu bölümünde gezinme menüleri yerleştirebilir veya bazı önemli bilgileri görüntüleyebilirsiniz. Gezinme menülerini bir kenar çubuğuna yerleştirmek, ziyaretçilerinizin web sitenizdeki bir sayfadan diğerine hızlı bir şekilde gitmesine olanak tanır. Bu bölümde, potansiyel ziyaretcilerinizin hızla bulabilmesi ve sizinle kolayca iletişim kurabilmesi için iletişim bilgilerinizi görüntüleyebilirsiniz. Bu bölümde uygun bağlantılar sağlarsanız kenar çubuğu da site etkileşimini artırabilir. Bir kenar çubuğu sadece yararlı olmayacak, aynı zamanda web sitenizde de güzel görünecek. Sitenizin görünümünü iyileştirir.

CSS kullanarak sabit gezinme özelliğine sahip bir menü oluşturmayı öğrenin.

ÖRNEK: Tam yükseklik

ÖRNEK: Otomatik Yükseklik

Sabit Bir Kenar Çubuğu Oluşturma

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">
<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.</p>
<p>Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı
oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri
endüstri standardı sahte metinler olarak kullanılmıştır. </p>
<p>Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda
pek değişmeden elektronik dizgiye de sıçramıştır.</p>
</div>

Yukarıda ki lorem yazısını çağaltın öyle deneyin.

CSS:

/*Sidebar Menü */

.sidenav {
 height:100%;/*Tam yükseklik: 'otomatik' yükseklik istiyorsanız bunu kaldırın*/
 width: 160px; /* Kenar çubuğunun genişliğini ayarlama */
 position: fixed; /* Sabit Kenar Çubuğu (kaydırmada, yerinde kal) */
 z-index: 1; /* Üst Katmanda kalmak */
 top: 0; /* En üstten menü oluştur */
 left: 0;/* Soldan menü oluştur */
 background-color: #111; /* Menü siyah renk olsun */
 overflow-x: hidden; /* Yatay kaydırmayı devre dışı bırak */
 padding-top: 20px;
}

/* Gezinme menu linkleri */

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

/* Gezinme bağlantılarının üzerine geldiğinizde renklerini değiştirin */

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

/* Stil sayfasi iceriği */

.main {
  margin-left: 160px; 
  padding: 0px 10px;
}

/* Yüksekliğin 450 pikselden az olduğu daha küçük ekranlarda 
kenar çubuğunun stilini değiştirin 
(daha az dolgu ve daha küçük yazı tipi boyutu) */

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

Otomatik Kenar Çubuğu

HTML yukarıda ki örnek aynısı

CSS:

.sidenav {
  width: 130px;
  position: fixed;
  z-index: 1;
  top: 20px;
  left: 10px;
  background: #eee;
  overflow-x: hidden;
  padding: 8px 0;
}

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

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

.main {
  margin-left: 140px; /* Sayfa içeriğin başlangıç yeri */
  font-size: 28px; /* Kaydırmayı etkinleştirmek için artan metin  */
}

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

Şu konularada bakın "CSS YATAY MENÜ YAPIMI" | "CSS DİKEY MENÜ YAPIMI" | "CSS Açılır Yan Menü (Hamburger Menu)"