Responsive Ad
Responsive Ad
Featured Games
Cookie Consent

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.

404Something Wrong!

The page you've requested can't be found. Why don't you browse around?

Take me back
Featured Apps

APMODY

Mauris lacus dolor, ultricies vel sodales ac, egestas vel eros.

webpaylaşım

Situs Coder Blogging yang menyediakan tutorial seputar Blog, Coding, dan Editing. Belajar Fundamental Programming disinlah tempatnya!

Code Pelajar

Fundamental Programming.

See All

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;
}