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)"

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır.

1077

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
  • Laravel
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML RESİM EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML ARKAPLANA MÜZİK EKLEME
  • HTML AÇIKLAMA SATIRI
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.