Minggu, 11 Juli 2010

Sliding Panel Using jQuery Plugin and CSS3

Sobat masih ingat dengan postingan Beben yang terdahulu enggak :p Slide Out With jQuery Plug-In, atau dengan yg ini nih sob Side Bar Menu. Artikel kali ini juga tidak jauh akan membicarakan mengenai slide menu yg keberadaannya ada di pinggir kiri/kanan ;) sebuah web/blog. Sebenarnya postingan ini sudah pernah dibikin oleh sobat kita http://granoblog.blogspot.com dengan title "Shoutmix Sliding Panel dengan jQuery" Disesi postingan sobat kita entuh, pada bagian tombol slidingnya no-fixed :-?? nah disini Beben si bloglang ganteng kalem mau berbagi bagaimana versi fixed dari sumber yg sama ;)) :">

Original Posted by Spyrestudios

Setelah membuka sumber tutorialnya nanti akan ada 3 buah demo. Nomor 3 ini yg ingin Beben bagi pada sobat² dan followers tercintaku :x :"> Setelah aku praktekan di blog dummy :D jadinya bisa sobat saksikan di RCTI saluran televisi kejuaraan sepak bola dunia (screenshot dibawah ini) ;))

Bahan-bahan untuk membuatnya...

  1. Letakan CSS3 berikut diatas kode ]]></b:skin>
  2. a.trigger{
    position: fixed;
    text-decoration: none;
    top: 80px; right: 0;
    font-size: 16px;
    letter-spacing:-1px;
    font-family: verdana, helvetica, arial, sans-serif;
    color:#fff;
    padding: 15px 35px 15px 15px;
    font-weight: 700;
    background:#333333 url(plus.png) 85% 55% no-repeat;
    border:1px solid #444444;
    -moz-border-radius-topleft: 20px;
    -webkit-border-top-left-radius: 20px;
    -moz-border-radius-bottomleft: 20px;
    -webkit-border-bottom-left-radius: 20px;
    -moz-border-radius-bottomright: 0px;
    -webkit-border-bottom-right-radius: 0px;
    display: block;
    }
    a.trigger:hover{
    position: fixed;
    text-decoration: none;
    top: 80px; right: 0;
    font-size: 16px;
    letter-spacing:-1px;
    font-family: verdana, helvetica, arial, sans-serif;
    color:#fff;
    padding: 20px 40px 20px 20px;
    font-weight: 700;
    background:#222222 url(plus.png) 85% 55% no-repeat;
    border:1px solid #444444;
    -moz-border-radius-topleft: 20px;
    -webkit-border-top-left-radius: 20px;
    -moz-border-radius-bottomleft: 20px;
    -webkit-border-bottom-left-radius: 20px;
    -moz-border-radius-bottomright: 0px;
    -webkit-border-bottom-right-radius: 0px;
    display: block;
    }
    a.active.trigger {
    background:#222222 url(minus.png) 85% 55% no-repeat;
    }
    .panel {
    position: fixed;
    top: 80px;
    right: 0;
    display: none;
    background: #aaa;
    border:1px solid #111111;
    -moz-border-radius-topleft: 20px;
    -webkit-border-top-left-radius: 20px;
    -moz-border-radius-bottomleft: 20px;
    -webkit-border-bottom-left-radius: 20px;
    width: 330px;
    height: auto;
    padding: 30px 30px 30px 130px;
    filter: alpha(opacity=85);
    opacity: .85;
    }
    .panel p{
    margin: 0 0 15px 0;
    padding: 0;
    color: #fff;
    }
    .panel a, .panel a:visited{
    margin: 0;
    padding: 0;
    color: red;
    text-decoration: none;
    }
    .panel a:hover, .panel a:visited:hover{
    margin: 0;
    padding: 0;
    color: #ffffff;
    text-decoration: none;
    }
    Isikan tulisan yg berwarna merah dengan gambar yg bisa sobat dapatkan di gambarnyo.
  3. Letakan script berikut diatas/sebelum tag </head>
  4. <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $(".trigger").click(function(){
    $(".panel").toggle("slow");
    $(this).toggleClass("active");
    return false;
    });
    });
    </script>
    Jika sobat sudah memiliki script berwarna biru itu sudah tidak usah dimasukin lagi script tersebut. Minimal jQuery versi 1.3.2 :) Jadi sobat tinggal memasukkan script yg berwarna kuning saja :-bd
  5. Masukkan kode HTML berikut didalam body sobat, bisa juga diatas tag </body>
  6. <div class="panel">
    ISIKAN KONTENNYA DISINI SOOOOBBB!!!
    </div>
    <a class="trigger" href="#">Your Title</a>
  7. Save.
  8. Selamat berkreasi sob, wassalam :-h salam blogger \m/

Tidak ada komentar:

Posting Komentar