Wednesday, December 21, 2016

Yorum yok

tek sayfada çok katmanlı menü

Çoklu tab menü

Çok kullanışlı tek sayfada açılır tab menü kodu. İşlem ve slider içinde kullanabileceğiniz oldukça şık ve kullanışlı.

ÖNİZLEME
özel tab menü kod
çoklu tab menü
bilindik tab menülerden farklı olarak soldan sekmeli ve oldukça şık duruyordu :) paylaşmak istedim.
<div class="row">
  <div class="side-tabs">
      <div class="side-tabs-items col-md-3">
                    <button class="side-tabs-item active"
                            data-tab="first">
                        First
                    </button>
                    <button class="side-tabs-item" data-tab="second">
                        Second
                    </button>
      </div>
      <div class="col-md-9 side-tabs-panel">
          <div class="side-tabs-tab active" data-tab="first">
              <h3>First tab</h3>
              <hr/>
          </div>
          <div class="side-tabs-tab" data-tab="second">
              <h3>Second tab</h3>
              <hr/>
          </div>
      </div>
  </div>
Css kısmına eklmeden önce kodlar üzerinde oynama yapıp renk ve genişliği kendinize göre ayarlayabilirsiniz. link seçeneklerini html kodlarıyla beraber css kodu üzerindede düzenlemeniz gerekir.
.row {
    height: 200px; 
    padding-top: 10px;
}
.side-tabs{
    border: 1px solid black;
    width: 100%;
    float: left;
    height: 100%;
}
.side-tabs-panel {
    border-left: 1px solid black;
    margin-left: 0;
    height: 100%;
}
.side-tabs-items {
    margin-right: 0;
    padding: 0;
    border-bottom: 1px solid black;
}
.side-tabs-items button {
    display: block;
    width: 100%;
    background: white;
    border: 0;
    border-bottom: 1px solid black;
    cursor: pointer;
    padding: 5px 10px;
}
.side-tabs-item.active {
    border-left: 5px solid green;
}
.side-tabs-items button:first-child {
    border-top: 0;
}
.side-tabs-items button:last-child {
    border-bottom: 0;
}
.side-tabs-items button:hover {
    background: ghostwhite;
}
.side-tabs-tab {
    height:100%;
    display: none;
}
.side-tabs-tab.active{
    display: block;
}
       

0 yorum:

Post a Comment