Tutorial Membuat Slide Panel Sederhana

Tutorial Membuat Slide Panel Sederhana - Ketika kita melakukan blogwalking/browsing ke situs web/blog orang lain kita terkadang menemukan sebuah panel yang berupa link/gambar dimana ketika kita melakukan klik pada link/gambar tersebut, maka secara otomatis akan muncul sebuah area dengan konten/isi tertentu. Dan ketika melakukan klik lagi pada link/gambar tersebut, maka secara otomatis juga area yang tadinya muncul tersebut akan disembunyikan kembali. Nahh, hal semacam itulah yang disebut dengan slide panel. Contoh slide panel itu sendiri kurang lebihnya seperti gambar diatas...

Untuk membuat slide panel sederhana seperti diatas, kita bisa menggunakan script jQuery + CSS, kemudian kita implementasikan dengan HTML. Berikut adalah script kode untuk membuat slide panel sederhana :

<script src="NamaFileJquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".btn-slide").click(function(){
        $("#panel").slideToggle("slow");
        $(this).toggleClass("active");
        return false;
    });
});
</script>
<style type="text/css">
a:focus {
    outline: none;
}
#panel {
    background: #555;
    border:1px solid #000;
    color:#FFFFFF;
    height: 100px;
    line-height:100px;
    display: none;
    text-align:center;
}
.slide {
    margin: 0;
    padding: 0;
    border-top: solid 4px #422410;
    background: #555 url('#') no-repeat center top;
}
.btn-slide {
    background: #009900 url('#') no-repeat right -50px;
    border-radius: 7px 7px 7px 7px;
    text-align: center;
    width: 144px;
    height: 31px;
    padding: 10px 10px 0 0;
    margin: 0 auto;
    display: block;
    font: bold 120%/100% Arial, Helvetica, sans-serif;
    color: #fff;
    text-decoration: none;
}
.active {
    background-position: right 12px;
}
</style>

<div id="panel">
Sisipkan konten/isi/apapun yang anda inginkan disini, dan sesuaikan dengan selera anda.
</div>
<div class="slide">
<a class="btn-slide" href="#">Slide Panel !</a></div>

Note :
background: #555 url('#') adalah kode untuk menentukan warna latar/latar menggunakan gambar. Sedangkan background: #009900 url('#') adalah kode untuk menentukan warna latar/latar menggunakan gambar dari tombol slide panel itu

Cukup sekian dulu postingan saya kali ini, semoga ini bisa bermanfaat bagi anda. Selebihnya saya mohon ma'af atas segala kekurangan yang ada. Salam sejahtera by ngeposta...

Anda sedang membaca Artikel berjudul Tutorial Membuat Slide Panel Sederhana, dan dengan URL http://kabarkabaru.blogspot.com/2012/09/tutorial-membuat-slide-panel-sederhana.html. Anda boleh membagikan artikel Tutorial Membuat Slide Panel Sederhana ini kepada Teman - Teman anda namun jangan lupa mencantumkan link Tutorial Membuat Slide Panel Sederhana sebagai Sumbernya.Terima Kasih