Wednesday, February 24, 2010

jQuery: Sliding Top Menu

Untuk demo klik disini
Bingung ni masu ngasih judulnya apaan!!! kita langsung ajah lah ya..
  1. Seperti biasa backup dulu template anda.
  2. Cari kode ]]></b:skin> lalu masukan kode dibawah ini tepat diatasnya.
  3. #sliderWrap { margin: 0 auto; width: 300px; } #slider { position: absolute; background-image:url(http://s2.sigmirror.com/files/58956_xcuvk/slider.png); background-repeat:no-repeat; background-position: bottom; width: 300px; height: 159px; margin-top: -141px; } #slider img { border: 0; } #sliderContent { margin: 50px 0 0 50px; position: absolute; text-align:center; background-color:#FFFFCC; color:#333333; font-weight:bold; padding: 10px; } #header { margin: 0 auto; width: 600px; background-color: #F0F0F0; height: 200px; padding: 10px; } #openCloseWrap { position:absolute; margin: 143px 0 0 120px; font-size:12px; font-weight:bold; }
  4. Setelah itu cari kode </head> lalu masukan kode dibawah ini diatasnya.
  5. <script type="text/javascript" src="http://s2.sigmirror.com/files/58960_sspjf/jquery-1.2.6.min.js"></script>
  6. Lalu cari lagi kode <body>, setelah itu tambahkan kode berikut ini dibawahnya
  7. .
    <script type="text/javascript"> $(document).ready(function() { $(".topMenuAction").click( function() { if ($("#openCloseIdentifier").is(":hidden")) { $("#slider").animate({ marginTop: "-141px" }, 500 ); $("#topMenuImage").html('<img src="http://s2.sigmirror.com/files/58955_t6ugo/open.png"/>'); $("#openCloseIdentifier").show(); } else { $("#slider").animate({ marginTop: "0px" }, 500 ); $("#topMenuImage").html('<img src="http://s2.sigmirror.com/files/58954_fdrhd/close.png"/>'); $("#openCloseIdentifier").hide(); } }); }); </script> <div id="sliderWrap"> <div id="openCloseIdentifier"></div> <div id="slider"> <div id="sliderContent"> Isn't this nice? </div> <div id="openCloseWrap"> <a href="#" class="topMenuAction" id="topMenuImage"> <img src="http://s2.sigmirror.com/files/58955_t6ugo/open.png" alt="open" /> </a> </div> </div> </div>
  8. Save Template anda, dan lihat hasilnya.
nah semoga bermanfaat ya.. selamat mencoba..

0 komentar:

Post a Comment

saran, komentar dan kritikan anda sangat berharga buat saya, terima kasih.