Membuat Tabs Menu Keren dengan HTML dan CSS

Membuat Tabs Menu Keren dengan HTML dan CSS - Tab menu biasa digunakan untuk menghemat space pada halaman postingan agar postingan tidak terlihat terlalu panjang. Adapun cara kerja dari menu tab ini adalah dengan menampilkan konten pada tab tertentu dan menyembunyikan konten pada tab yang lainnya.

Contoh penggunaan menu tab pada postingan yakni membuat menu tab untuk source code program, misalnya tab 1 untuk kode HTML, tab 2 untuk kode CSS, dan tab 3 untuk kode JavaScript.

Selain pada postingan menu tab biasa digunakan juga pada bagian sidebar misalnya untuk menggabungkan item populer dan recent post.

Cara Membuat Menu Tabs

Untuk membuat menu tabs sobat hanya memerlukan kode HTML dan CSS saja tanpa JavaScript. Kodenya dapat sobat lihat di bawah ini.

Kode CSS

.hidden {
    display: none;
}

.tabsMenu {
    font-family: arial;
    background: #f6f6f6;
}

.tabsMenu .tabsHead {
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    align-items: center;
}

.tabsMenu .tabsHead:after {
    content: "</>";
    margin-left: auto;
    padding: 10px 15px;
    font-family: courier new;
}

.tabsMenu .tabsHead>* {
    padding: 13px 17px;
    margin-bottom: -1px;
    border-bottom: 1px solid #e6e6e6;
}

.tabsMenu .tabsContent {
    padding: 25px 23px;
    line-height: 1.7em;
}

.tabsMenu .tabsContent>* {
    display: none;
}

.tabsMenu input[id*="1"]:checked~.tabsHead label[for*="1"],
.tabsMenu input[id*="2"]:checked~.tabsHead label[for*="2"],
.tabsMenu input[id*="3"]:checked~.tabsHead label[for*="3"] {
    color: #1e1e1e;
    border-bottom: 1px solid #0b57cf;
}

.tabsMenu input[id*="1"]:checked~.tabsContent .tabsContent1,
.tabsMenu input[id*="2"]:checked~.tabsContent .tabsContent2,
.tabsMenu input[id*="3"]:checked~.tabsContent .tabsContent3{
    display: block;
}

Kode HTML

<div class="tabsMenu">
    <input type="radio" class="hidden" id="multitabs1" name="mtabs" checked>
    <input type="radio" class="hidden" id="multitabs2" name="mtabs">
    <input type="radio" class="hidden" id="multitabs3" name="mtabs">
    <div class="tabsHead">
        <label for="multitabs1" class="tabs" id="tab1">HTML</label>
        <label for="multitabs2" class="tabs" id="tab2">CSS</label>
        <label for="multitabs3" class="tabs" id="tab3">JAVASCRIPT</label>
    </div>
    <div class="tabsContent">
        <div class="tabsContent1">INI KODE HTML</div>
        <div class="tabsContent2">INI KODE CSS</div>
        <div class="tabsContent3">INI KODE JAVASCRIPT</div>
    </div>
</div>

Untuk melihat hasil dari kode HTML dan CSS di atas silahkan klik link demo di bawah ini.

Demo 1 Demo 2

Demikian tutorial mengenai cara Membuat Tabs Menu Keren dengan HTML dan CSS, semoga bermanfaat dan jangan lupa untuk mendukung penulis dengan cara mentraktir kopi di trateer.id atau dengan membagikan postingan ini.

Share :