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ı.
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; }
Join the conversation