Tuesday, September 21, 2010

Membuat Menu Buttom Slide Out Dengan Jquery Dan CSS3


Selamat Sore Sahabat DJ Site Semua,

Sebenernya sih dari pagi niat untuk bikin postingan di DJ Site udah ada hhe, cuma berhubung lagi cinta-cintanya sama CSS3 jadi malah Blog Catatan pribadi yang jadi korban postingan saya tadi pagi hhe... Dan waktu mau posting di DJ Site ternyata udah siank, jadi saya mesti buru-buru Offline wkwkwk... Dan baru sore ini saya bisa kembali Posting hhe...

Nah, Sore ini saya mau posting tutorial lagi untuk anda. Berhubung di Blog sebelah saya udah bikin tutorial bikin Table kaya Hostingan, jadi disini saya mau ngasih tutorial yang lain untuk anda. Sebenernya Tutorial ini pernah saya aplikasikan di Blog Joomla terdahulu dan pernah juga dipake di salah satu blog saya dulu cuma berhubung waktu itu saya belum kenal sama CSS3(kayanya masih belum di publikasikan hhe), jadi serba ribet klo dibikin tutorial apalagi mesti Upload banyak gambar untuk Backgroundnya hhe... Dan berhubung sekarang Udah ada CSS3 yang gak butuh Background, barusan saya isenk nyoba Bikin Menu Button Slide Out ini lagi tapi gak pake gambar banyak-banyak kaya dulu wkwkw.... Dan hasilnya ternyata sama kaya yang di Joomla untuk itu sekalian aja saya share ke anda....

Untuk yang mau preview atau ng'liat Demonya dulu silahkan klik DISINI, dan klo loadingnya udah selesai silahkan arahkan kursornya ke Menu yang ada diatas....

Disini saya gak memasukkan Url link di Menu tersebut, jadi klo anda berminat dan ingin membuat menu tersebut dengan Link Url anda silahkan anda rubah Tag HTMLnya dan tambahkan linknya.....

Okeh langsung aja yach:

1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode seperti dibawah ini:

]]></b:skin>

5. klo udah ketemu masukkan Kode CSS dibawah ini tepat diatas kode ]]></b:skin> tersebut

.container{
width:900px;
height:130px;
margin:0 auto;
position:relative;
overflow:hidden;
border:3px solid #fff;
background-color:#fff;
-moz-box-shadow:1px 1px 6px #000;
-webkit-box-shadow:1px 1px 6px #000;
-moz-border-radius:0px 0px 20px 20px;
-webkit-border-bottom-left-radius:20px;
-webkit-border-bottom-right-radius:20px;
border-radius:0px 0px 20px 20px;
}
ul#menu{
list-style:none;
position:absolute;
bottom:0px;
left:20px;
font-size:36px;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
color:#999;
letter-spacing:-2px;
}
ul#menu li{
float:left;
margin:0px 10px 0px 0px;
}
ul#menu a{
cursor:pointer;
position:relative;
float:left;
bottom:-95px;
line-height:20px;
width:210px;
}
.icon_about,
.icon_work,
.icon_help,
.icon_search{
width:64px;
height:64px;
display:block;
left:140px;
top:50px;
position:absolute;
}
.icon_about{
background:transparent url(http://i785.photobucket.com/albums/yy131/djnand/id_card.png) no-repeat top left;
}
.icon_work{
background:transparent url(http://i785.photobucket.com/albums/yy131/djnand/globe.png) no-repeat top left;
}
.icon_help{
background:transparent url(http://i785.photobucket.com/albums/yy131/djnand/help.png) no-repeat top left;
}
.icon_search{
background:transparent url(http://i785.photobucket.com/albums/yy131/djnand/find.png) no-repeat top left;
}
ul#menu span.title{
display:block;
height:26px;
text-shadow:1px 1px 1px #000;
color:#B7B7B6;
text-indent:10px;
}
ul#menu span.description{
width:140px;
height:80px;
background-color:#B7B7B6;
border:3px solid #fff;
color:#fff;
display:block;
font-size:24px;
padding:10px;
-moz-box-shadow:1px 1px 6px #000;
-webkit-box-shadow:1px 1px 6px #000;
box-shadow:1px 1px 6px #000;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
ul#menu a:hover span.description{
background-color:#54504F;
}
ul#menu a:hover span.title{
color:#54504F;
}

Udah belum? klo udah kita beralih lagi dan cari kode <body>

Klo udah ketemu masukkan HTML ini dibawah kode tersebut

<div class="container">
<ul id="menu">
<li>
<a>
<i class="icon_about"></i>
<span class="title">About</span>
<span class="description">
Learn about us and our services
</span>
</a>
</li>
<li>
<a>
<i class="icon_work"></i>
<span class="title">Work</span>
<span class="description">
See our work and portfolio
</span>
</a>
</li>
<li>
<a>
<i class="icon_help"></i>
<span class="title">Help</span>
<span class="description">
Talk to our support
</span>
</a>
</li>
<li>
<a>
<i class="icon_search"></i>
<span class="title">Search</span>
<span class="description">
Search our website
</span>
</a>
</li>
</ul>
</div>

Udah? klo udah jangan ngopi dulu kerjaan anda belum tuntas.. sekarang beralih dan cari kode </head>

Udah Ketemu? klo udah masukkan Javascript ini tepat diatasnya

<script src='http://djkeren.googlecode.com/files/djbuttomslider.js' type='text/javascript'/>

Atau klo anda lebih suka yang ribet nie saya kasih Javascript aslinya:

$(function() {
$('#menu > li').hover(
function () {
var $this = $(this);
$('a',$this).stop(true,true).animate({
'bottom':'-15px'
}, 300);
$('i',$this).stop(true,true).animate({
'top':'-10px'
}, 400);
},
function () {
var $this = $(this);
$('a',$this).stop(true,true).animate({
'bottom':'-95px'
}, 300);
$('i',$this).stop(true,true).animate({
'top':'50px'
}, 400);
}
);
});

Gimana baik kan saya haha.... klo semua tahap diatas udah anda lakukan silahkan save template anda dan ambil Cangkir kopi anda hhe.....

* Image Icon di Kode CSS-nya terpaksa saya gunakan karena saya gak bisa bikin Gambar Bola dunia dan lainnya itu pake CSS hhe... dan klo Sahabat DJ Site ada yang bisa nggeh monggo silahkan di Share cara bikin Icon tanpa Imagenya hhe... Dan untuk keterangannya silahkan ganti dan rubah sesukanya karena disini saya cuma memberi contoh hhe....

Buat Sahabat DJ Site Semua, Happy Blogging N Have A Nice Day....


di

36 comments:

  1. nartiSeptember 21, 2010 at 6:04 PM

    lihat demonya boleh juga tuh...
    jadi sekarang punya rumah(blog) berapa nih?
    salut deh... :)

    ReplyDelete
  2. sdaSeptember 21, 2010 at 6:06 PM

    kalau nyoba harus bikin blog lagi nih...
    takut gagal...hehe...

    ReplyDelete
  3. Manchester United Tech | Berita Sepak BolaSeptember 21, 2010 at 6:10 PM

    kayaknya keren nih...ane coba dulu sob, moga aja berhasil..
    thx udh share n happy blogging..

    ReplyDelete
  4. Djangan PakiesSeptember 21, 2010 at 6:15 PM

    Sonten kang, hari ini mampir dua kali nyambangi sahabat.

    Meluncur ke TKP Demo, ternyata hasilnya mangstaf dan menarik. benar-benar 180 derajat celcius

    ReplyDelete
  5. aliemSeptember 21, 2010 at 6:29 PM

    ra mudeng kang...

    ReplyDelete
  6. saka heroSeptember 21, 2010 at 6:31 PM

    sebelumnya makasih mas tutorialnya, jujur lagi males banget nih oprek template. Pusing tugas sana-sini mas.
    Cuman pengen blog walking ke rumahnya mas ferdinand aja, sukses selalu mas :D

    ReplyDelete
  7. bajul ijoSeptember 21, 2010 at 7:33 PM

    wah mantap tuh om, kebetulan saya baru bikin blog so bisa dipraktekin nih.

    ReplyDelete
  8. orang kampungSeptember 21, 2010 at 7:37 PM

    met malem sobat, lama gak main kesini tambah keren tuh tutorialnya, saya ijin save aja dulu.. soalnya kalo diliat dari previewnya gak mungkin diterapin diblog saya, sudah terlalu rame widget soalnya, ntar kalo mau bikin blog baru bisa kepake deh.. thank's for share brader

    ReplyDelete
  9. Rock Theory BontangSeptember 21, 2010 at 8:04 PM

    ane uda liat sob, keren pisan...

    ReplyDelete
  10. tomoSeptember 21, 2010 at 8:08 PM

    kodenya panjang sekali

    ReplyDelete
  11. rawinsSeptember 21, 2010 at 8:15 PM

    ngintip dulu aja deh om. lagi di warnet neh susah buat uprak uprek

    ReplyDelete
  12. om rameSeptember 21, 2010 at 8:20 PM

    keren Fer, jadi kepingin. tapi apa daya beLakangan ini waktu ngebLog Lg menipis, paLing cuma bisa update dan baLas komen pengunjung terus kunjungi beberapa teman akrab aja. seLebihnya offLine Lg.

    kaLi aja ada tempLate yg mau diwarisin enggak apa2, dari pada cuma nganggur buat ngetes doang. hehehe... ngarepdotcom.

    ReplyDelete
  13. fbSeptember 21, 2010 at 8:48 PM

    Sekarang banyak kode yang pake jsquery ya

    ReplyDelete
  14. Rela RahmahSeptember 21, 2010 at 9:02 PM

    ih lucu, kalo dideketin kursor, itunya naik.. *sempet mainin itu beberapa menit* wkekekeke ^^

    ReplyDelete
  15. deasy-worldSeptember 21, 2010 at 9:10 PM

    Thanks dah di sharing Ferdinand! meskipun gak tahu banyak mengenai CSS.. cuma ingin terus belajar>>walaupun otodidak.

    Sukses sll DJ-Site!

    ReplyDelete
  16. Shudai AjlaniSeptember 21, 2010 at 9:28 PM

    oke fer aku lansung liat ke demonyaaaa :D

    ReplyDelete
  17. rizalSeptember 21, 2010 at 11:22 PM

    sy udah lihat demonya dan sanagt mantap sekali, jadi lebih hidup blog kita...

    btw. desig templatenya juga mantap tu, nngak ada link downloannya ya hee..he...

    ReplyDelete
  18. UnknownSeptember 21, 2010 at 11:58 PM

    bikin pgn ganti menu horizontalku...asem kok....

    ReplyDelete
  19. UnknownSeptember 22, 2010 at 1:21 AM

    Aduh maniz banget menunya,vertikal limit.Kalau yang model horizontal gimana?

    ReplyDelete
  20. dinohpSeptember 22, 2010 at 6:53 AM

    Mantap mas,thanks atas tutorialnya..

    ReplyDelete
  21. UnknownSeptember 22, 2010 at 7:39 AM

    Wah... keren banget sob menunya.... animasinya naik turun gitu kalao di klik,,,, keren dech....

    ReplyDelete
  22. UnknownSeptember 22, 2010 at 7:56 AM

    waaah Tpo neh..demona keren.. Menu nya bagus bgt gan... tpi gw lagi meminimalisir penggunaan script .js... suka bikin loding blog berat or suka bikin salah satu widget-ku error.. :)

    ReplyDelete
  23. Kumpulan Soal CPNS LengkapSeptember 22, 2010 at 9:32 AM

    keren surantap tenan, menunya bisa ciluk- baa.. wkwkwk..
    nek jumla mudeng -dikit- mbajak modul punya temen he he, tak simpen odene buat koleksi.. teng qiyu :)

    ReplyDelete
  24. Domain ForwardingSeptember 22, 2010 at 9:37 AM

    pokoke ane usule teteuup: bikin dj-template.blogspot.com khusus, kayaknya mantep pak dj..
    bakal banyak yang naksir dan pasang di blognya (termasuk ane) xexexe -kabuur-

    ReplyDelete
  25. tiwiSeptember 22, 2010 at 10:08 AM

    hmmm...ora ngeh...he3..., ntr aja kl ada kesulitan konsul lgsg sm suhunya DJ SITE ini...he3..,tq...

    ReplyDelete
  26. Eka ninjitsuSeptember 22, 2010 at 10:29 AM

    dari dulu pengen tombol yg kayak gini, akhirnya ketemu juga hehehehe.... Ntar Kapan2 aku coba Sobat... Happy Blogging juga dan selamat beraktivitas yah...

    ReplyDelete
  27. deasySeptember 22, 2010 at 10:38 AM

    Belajar banyak disini...Thanks DJ-Site!

    Happy Blogging Ferdinand!

    ReplyDelete
  28. DJ SiteSeptember 22, 2010 at 11:26 AM

    terlalu ribet dan norak, bukan malah bagus tapi malah norak sob

    ReplyDelete
  29. Ummi UbaySeptember 22, 2010 at 12:57 PM

    wadooh chika gx ngarti >.<

    ReplyDelete
  30. Berpikir PositifSeptember 22, 2010 at 8:36 PM

    saya selalu salut dengan para blogger tutorial yang selalu siap sharing pengetahuan mereka, seandainya nggak ada blogger seperti itu mana bisa blog aku jadi , maklum nggak ngerti html , atau css sob jadi kalau udah tingkat tinggi seperti ini cuma bisa uji coba saja

    ReplyDelete
  31. TUKANG CoLoNGSeptember 22, 2010 at 9:25 PM

    aku gag ngopi brader..hehe
    tumben gag pake cheers..hehe

    eh aku mau masukin link url, tapi aku bingung mau masukin link apa terus dimana? haha

    oia, ajarin dong brader biar warna latar komen admin beda ama yang lain..:)

    ReplyDelete
  32. perawatan acSeptember 23, 2010 at 7:57 AM

    wah mantepp tuhh ane dah lihatt sobb..bisa nongol2 gitu yahh..ngerjain ini bisa mumet 7 keliling dehhh,,,

    ReplyDelete
  33. attayaya speedtestSeptember 23, 2010 at 4:04 PM

    yihaaaaaaaaaaaaaaaa

    ReplyDelete
  34. catatan kecilkuSeptember 26, 2010 at 9:31 PM

    Aku terus terang aja waktu baca judulnya bingung, gak paham maksudnya. Tapi waktu lihat demo-nya langsung terpana... bagus bener... :)

    ReplyDelete
  35. the others....September 26, 2010 at 9:46 PM

    Mampir lagi, setelah beberapa hari terpaksa absen blogging.

    ReplyDelete
  36. situsonlineJanuary 17, 2011 at 10:52 PM

    Selamat malam,,,bagi yg langsung ke TKP jgn lupa makan dulu ya...!biar mantap !

    ReplyDelete