• Terbaru

    Membuat Menu Tab View Dengan CSS


    Allhamdulillah akhirnya selesai juga membuat tab view, menanggapi komentar dari pembaca kang w3ndy yang bertanya bagaimana membuat tab view seperti di sebelah kanan atas blog ini ??, untuk itu saya membuat posting ini, sebenarnya tab di sebelah kanan blog saya itu sudah bawaan dari templatenya, tapi disini saya akan menjelaskan membuat tab view yang cara kerjanya mirip dengan tab saya disamping, dan kamu juga bisa memodifikasi tab tersebut nantinya sesuai keperluan kamu. Contoh yang sudah saya buat bisa di lihat disini.


    • Konfigurasi isi dan judul isi tab kamu, kamu buat dengan struktur HTML seperti berikut. Kamu bisa mengisinya dengan widget lain di dalamnya seperti daftar isi blog kamu, recent post dan lain lain.

    /* HTML Structure */

    <ul class="tabs">
    <li><a href="#tab1">Gallery</a></li>
    <li><a href="#tab2">Submit</a></li>
    </ul>

    <div class="tab_container">
    <div id="tab1" class="tab_content">
    <!--Content-->
    </div>
    <div id="tab2" class="tab_content">
    <!--Content-->
    </div>
    </div>
    .
    Silahkan modifikasi sendiri, teks yang saya beri warna hijau adalah id tab sebaiknya tidak perlu di ganti dan tulisan yang saya beri warna biru muda adalah judul dari tab kamu nantinya bagian ini silakan ganti sesuka kamu.

    • Selanjutnya CSS untuk mengatur tab (lebar, tinggi, warna background tab)

    /* CSS Tab Setting */
    ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 15px; /*--tinggi tab--*/
    border-bottom: 1px solid #999;
    border-left: 1px solid #999;
    width: 100%;
    }
    ul.tabs li {
    float: left;
    margin: 0;
    padding: 0;
    height: 31px;
    line-height: 31px;
    border: 1px solid #999;
    border-left: none;
    margin-bottom: -1px;
    overflow: hidden;
    position: relative;
    background: #e0e0e0;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcT2w9hexOa3g_LF1fCl1_1U8R9g3T6h0bIJ9avrG0hjC9Zbe9gtZXhLZ9QNe2-J9jarKQUFLaHEvIT5es7OPQRDyd-OC8YAtppD47nSG5k04kZ-fmxzjrlRAD9mJvdnVPTp2HC2FfdK2h/s1600/tab-bg2.jpg)
    }
    ul.tabs li a {
    text-decoration: none;
    color: #0EFA00;
    display: block;
    font-size: 1.2em;
    padding: 0 20px;
    border: 1px solid #fff;
    outline: none;
    }
    ul.tabs li a:hover {
    background: #662404;
    }
    html ul.tabs li.active, html ul.tabs li.active a:hover {
    background: #fff;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcT2w9hexOa3g_LF1fCl1_1U8R9g3T6h0bIJ9avrG0hjC9Zbe9gtZXhLZ9QNe2-J9jarKQUFLaHEvIT5es7OPQRDyd-OC8YAtppD47nSG5k04kZ-fmxzjrlRAD9mJvdnVPTp2HC2FfdK2h/s1600/tab-bg2.jpg)
    border-bottom: 1px solid #fff;
    }
    .
    Pengaturan CSS tab di atas saya samakan dengan contoh tab pada blog saya, kamu bisa mengganti tinggi, warna latar belakang tab kamu dengan memodifikasi CSS di atas dengan mengganti kode warna background pada perintah
    background: #e0e0e0;
    atau menggantinya dengan gambar dengan meri url gambar seperi berikut
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcT2w9hexOa3g_LF1fCl1_1U8R9g3T6h0bIJ9avrG0hjC9Zbe9gtZXhLZ9QNe2-J9jarKQUFLaHEvIT5es7OPQRDyd-OC8YAtppD47nSG5k04kZ-fmxzjrlRAD9mJvdnVPTp2HC2FfdK2h/s1600/tab-bg2.jpg)

    • CSS selanjutnya adalah untuk mengatur kolom tab atau tampilan isi dari tab di bawah tab dengan pengaturan CSS di atas

    /* CSS Tab Content Setting */
    .tab_container {
    border: 1px solid #999;
    border-top: none;
    overflow: hidden;
    clear: both;
    float: left; width: 100%;
    background: #fff;
    }
    .tab_content {
    padding: 20px;
    font-size: 1.2em;
    }
    .
    Dan yang terakhir adalah script jQuery
    $(document).ready(function() {

    //When page loads...
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content

    //On Click Event
    $("ul.tabs li").click(function() {

    $("ul.tabs li").removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab
    $(".tab_content").hide(); //Hide all tab content

    var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
    $(activeTab).fadeIn(); //Fade in the active ID content
    return false;
    });

    });
    .

    Selesai, selamat mencoba, semoga berhasil....

    4 comments:

    1. waduh thx banget ya. baru nanya tadi, Eh udah langsung di posting.
      Tapi ribet juga ya caranya, kalo buat kode yg Jquery disimpen dmna ya?

      ReplyDelete
    2. @w3ndy

      jquery bisa di letakkan sebelum kode </body> , jangan lupa di masukkan kedalam <script> y sob, semoga berhasil

      ReplyDelete
    3. Langsung di coba bos. Terimakasih maturnuwun

      ReplyDelete

    Saya sangat berterimakasih apabila sahabat sekalian bersedia untuk tidak meninggalkan spam dan meninggalkan komentar yang berhubungan dengan artikel di atas.