Tutorial Membuat Slide Panel Sederhana GM Cellular Komentar WEB Design Tweet

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.

---

Luangkan sejenak: Demikianlah artikel tentang Tutorial Membuat Slide Panel Sederhana diatas, semoga bermanfaat untuk sobat dimanapun berada :)

---

Ditulis Oleh WEB PULSA CENTER on - Rating: 4.5

Judul : Tutorial Membuat Slide Panel Sederhana
Deskripsi : Tutorial Membuat Slide Panel Sederhana - Ketika kita melakukan blogwalking/browsing ke situs web/blog orang lain kita terkadang menemukan s...

SILAHKAN KOMENTAR DENGAN FACEBOOK