Cara Membuat Vertical Tab Dengan HTML Dan CSS

Selamat datang kembali di website tips dan trik Dumet School, berjumpa kembali dengan saya pada pembahasan tips seputar dunia website. Pada kesempatan kali ini saya akan memberikan tips dan trik tentang Cara Membuat Vertical Tab Dengan HTML Dan CSS dimana sebuah tab ini akan kita gunakan untuk membuat sebuah layout lokasi alamat. Pada studi case kali ini saya akan membuat layout menggunakan tab html dan css dengan menunjukkan alamat cabang Dumet School. Dengan menggunakan ini adalah cara lain untuk membuat sebuah halaman contact us pada website, saya berharap teman – teman dapat mengikuti langkah – langkah di bawah ini.

Pertama – tama siapkan text editornya, kemudian buat script html nya seperti gambar di bawah ini beserta id setiap cabang nya

<h1>Cara Membuat Vertical Tab Dengan HTML Dan CSS</h1>
<div class="container">
  <h3>Hubungi dan Kunjungi Cabang Terdekat <a href="https://www.dumetschool.com">Dumet School</a></h3>
  <div class="tab">
    <button class="tablinks" onclick="openCity(event, 'srengseng')" id="defaultOpen">Srengseng</button>
    <button class="tablinks" onclick="openCity(event, 'grogol')">Grogol</button>
    <button class="tablinks" onclick="openCity(event, 'depok')">Depok</button>
    <button class="tablinks" onclick="openCity(event, 'tebet')">Tebet</button>
    <button class="tablinks" onclick="openCity(event, 'gading')">Kelapa Gading</button>
  </div>

  <div id="srengseng" class="tabcontent">
    <h4>Srengseng</h4>
    <p></p>
  </div>

  <div id="grogol" class="tabcontent">
    <h4>Grogol</h4>
    <p></p> 
  </div>

  <div id="depok" class="tabcontent">
    <h4>Depok</h4>
    <p></p>
  </div>
  <div id="tebet" class="tabcontent">
    <h4>Tebet</h4>
    <p></p>
  </div>
  <div id="gading" class="tabcontent">
    <h4>Kelapa gading</h4>
    <p></p>
  </div>
</div>

Teman – teman ikuti terus Cara Membuat Vertical Tab Dengan HTML Dan CSS, dalam pengetikan script samakan dulu sesuai pada script di atas ini termasuk pemberian id dan onclick pada button nya, kemudian isikan alamat setiap cabang yang saya sediakan dengan tag p

Jika sudah save dengan nama index.html, langkah berikutnya kita tambahkan style css nya

* {box-sizing: border-box}
.container{width: 1000px;margin: auto;}
h3{background-color: #274F8F;color: #fff;padding: 10px;}
h4{color:#274F8F;}
a{color: #fff;text-decoration:none;}
.tab {float: left;border: 1px solid #ccc;background-color: #f1f1f1;width: 17%;height: 300px;}
.tab button {
    display: block;
    background-color: inherit;
    color: black;
    padding: 10px 15px;
    width: 100%;
    border: none;
    outline: none;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
    font-size: 17px;
}
.tab button:hover {background-color: #ddd;}
.tab button.active {background-color: #ccc;}
.tabcontent {float: left;padding: 0px 12px;width: 70%;border-left: none;height: 300px;}

Dan jangan lupa tambahkan script javascript nya untuk menjalankan id nya

function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}

document.getElementById("defaultOpen").click();

Jika sudah save dan jalankan pada browsernya, maka hasilnya seperti gambar di bawah ini

Maka tab akan menampilkan sesuai alamat nya yang merupakan id pada setiap cabang nya, bagaimana..?? Sangat mudah bukan..??

Sekian pada artikel kali ini tentang Cara Membuat Vertical Tab Dengan HTML Dan CSS semoga bermanfaat dan menjadi bahan refrensi untuk teman – teman dalam pembuatan layout website nya. Terimakasih dan sampai Jumpa.

Cara Membuat Vertical Tab Dengan HTML Dan CSS

Kategori