Sadece CSS Kullanarak Tab Yapmak

css-tab

Javascript olmadan sadece CSS kullanılarak yapılabilen Tab.

Kuşkusuz CSS3’ün gelmesiyle, internet dünyası büyük oranda değişime uğradı. Gelen yenilikler arasında CSS :target selector’de bulunuyor.

:target selector sayesinde daha önce javascript ile yapılan “tıklanınca” özelliğini kullanabiliyoruz.

Aşağıdaki örnek ile sizde CSS kullanarak Tab’lar oluşturabilirsiniz.

HTML

<div class="tabbed-area">

  <ul class="tabs group">
      <li><a href="#box-one">Tab 1</a></li>
      <li><a href="#box-two">Tab 2</a></li>
      <li><a href="#box-three">Tab 3</a></li>
  </ul>
  
  <div class="box-wrap">

    <div id="box-four">
          <!-- content for panel -->
        
          <ul class="tabs group">
              <li class="cur"><a href="#box-four">Tab 4</a></li>
              <li><a href="#box-five">Tab 5</a></li>
              <li><a href="#box-six">Tab 6</a></li>
          </ul>
    </div>
    
    <div id="box-five">
        <!-- content for panel -->
    
          <ul class="tabs group">
              <li><a href="#box-four">Tab 4</a></li>
              <li class="cur"><a href="#box-five">Tab 5</a></li>
              <li><a href="#box-six">Tab 6</a></li>
          </ul>
    </div>
    
    <div id="box-six">
        <!-- content for panel -->
    
          <ul class="tabs group">
              <li><a href="#box-four">Tab 4</a></li>
              <li><a href="#box-five">Tab 5</a></li>
              <li class="cur"><a href="#box-six">Tab 6</a></li>
          </ul>
    </div>

  </div>

</div>

CSS

.tabs { list-style: none; }
.tabs li { display: inline; }
.tabs li a { color: black; float: left; display: block; padding: 4px 10px; margin-left: -1px; position: relative; left: 1px; background: white; text-decoration: none; }
.tabs li a:hover { background: #ccc; }
.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.box-wrap { position: relative; min-height: 250px; }
.tabbed-area div div { background: white; padding: 20px; min-height: 250px; position: absolute; top: -1px; left: 0; width: 100%; }
.tabbed-area div div, .tabs li a { border: 1px solid #ccc; }
#box-one:target, #box-two:target, #box-three:target {
  z-index: 1;
}
#box-four:target a[href="#box-four"] { color: red; }
.cur-nav-fix .tabs { position: absolute; bottom: 100%; left: -1px; }
.cur-nav-fix .tabs li a { 
   background: -webkit-linear-gradient(top, white, #eee); 
   background: -moz-linear-gradient(top, white, #eee); 
   background: -ms-linear-gradient(top, white, #eee); 
   background: -o-linear-gradient(top, white, #eee); 
}
#box-four { z-index: 1; }
#box-four:target .tabs, #box-five:target .tabs, #box-six:target .tabs { z-index: 3; }
.cur-nav-fix .tabs li.cur a { border-bottom: 1px solid white; background: white; }

Demo

Hakan Demirel

pcanalist.com kurucularından Hakan Demirel, özel bir şirkette Front-end Developer olarak çalışmakta. Twitter üzerinden @hakandemirel hesabını takip edebilir yada hakandemirel.com adresinden daha fazla bilgi alabilirsiniz.

Bunlar da hoşunuza gidebilir...

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Yandex.Metrica