You must enable Javascript in your browser to run or open this site.

Jquery - Fixed Sliding Menu

Kembali kita berbincang mengenai Jquery. Kali ini perbincangan kita sejalur dengan Menu Navigasi Jquery. Yaitu kumpulan link yang akan di satukan dan membuatnya menjadi Menu Utama dengan berbagai Style tentunya. Kali ini menu yang saya akan tunjukan adalah menu yang Floating/melayang di bagian atas meskipun sudah di scroll kebawah keatas karna Posisinya adalah Fixed.

Pengertian lain
Position:Fixed : Merupakan properti untuk memposisikan suatu blok element secara tetap di atas layar browser walaupun user melakukan scroll dokumen. Mengingat tentang Fixed [bukan Fixie, kalau Fixie mah trend Sepeda sekarang :P] sepertinya saya telah membuat artikel yang memanfaatkan kode Position:Fixed tersebut [baca : back to Top Jquery].

Kembali ke Topic perbincangan yaitu Jquery - Fixed Sliding Menu. Bingung ya maksud dari keterangan diatas ↑ ? Lihat contohnya seperti di bawah ini :



Kotak diatas adalah kotak IFRAME dari weblog : http://demo-ifnumber4-fqbis.blogspot.com/. Didalam kotak tersebut terdapat 7 Menu yang mana sobat bisa ganti sendiri Tulisan, gambar, maupun Style kotak menu tersebut. Kotak tersebut melambangkan LAYAR dari BROWSER. Bagaimana? bagus bukan? Kalau mau pasang di blog silahkkan ikuti cara di bawah ini :

1. Buka Blogger.com dengan password dan akun masing masing

2. Saat di dashboard klik Layout/Design kemudian klik Edit HTML pada Tab diatas.

3. Kemudian Cari kode <head> dengan CTRL + F

4. Kemudian letakan kode berikut tepat di bawah kode <Head> tadi :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script src='https://sites.google.com/site/farixsantips/scripts/slidemenu.js'></script>
<script type='text/javascript'>
$(function() {
var d=300;
$('#floatmenu a').each(function(){
$(this).stop().animate({
'marginTop':'-78px'
},d+=150);
});

$('#floatmenu > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-78px'
},200);
}
);
});
</script>
5. Kemudian Cari kode ]]></b:skin> dengan CTRL + F. Letakan kode berikut tepat diatasnya kode ]]></b:skin> tadi :
ul#floatmenu {
list-style:none;
margin:0;
padding:0;
position:fixed;
right:10px;
top:0;
width:721px;
z-index:999999
}
ul#floatmenu .tools a{background-image:url(http://icons.iconarchive.com/icons/apathae/wren/64/Utilities-icon.png)}
ul#floatmenu .gallery a{background-image:url(http://icons.iconarchive.com/icons/iconshock/cms/64/gallery-icon.png)}
ul#floatmenu .video a{background-image:url(http://icons.iconarchive.com/icons/babasse/old-school/64/bobines-video-icon.png)}
ul#floatmenu .rssfeed a{background-image:url(http://icons.iconarchive.com/icons/untergunter/leaf-mimes/64/app-rss-plus-xml-icon.png)}
ul#floatmenu .musics a{background-image:url(http://icons.iconarchive.com/icons/itzikgur/my-seven/64/Music-Piano-Chello-icon.png)}
ul#floatmenu .contact a{background-image:url(http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/64/Actions-contact-new-icon.png)}
ul#floatmenu .home a{background-image:url(http://icons.iconarchive.com/icons/iconshock/sigma-general/64/home-icon.png)} /*Gambar Bisa di Ganti sesuai kemauan */
ul#floatmenu li {
display:inline;
float:left;
width:103px
}
ul#floatmenu li a {
background-color:#fff;
background-position:50% 10px;
background-repeat:no-repeat;
border:1px solid #777;
box-shadow:0 0 2px #ccc;
box-shadow:inset 0 0 5px #eee;
text-shadow:0 0 3px #ccc;
display:block;
float:left;
height:25px;
margin-top:-2px;
padding-top:80px;
text-align:center;
text-decoration:none;
width:100px
}
ul#floatmenu li a span {
color:#000;
font-size:12px;
font-family:comic sans ms;
}
ul#floatmenu li a:hover {
background-color:#ffcc00
}
Kode berkedap kedip adalah kode yang berfungsi meletakan MENU FIXED di kanan atau di kiri.
6. Pertunjukan belum selesai kita lanjutkan dengan meletakan kode berikut di bawah kode <body> :
<ul id='floatmenu'>
<li class='home'><a href='#'><span>Home</span></a></li>
<li class='tools'><a href='#'><span>Tools</span></a></li>
<li class='gallery'><a href='#'><span>Gallery</span></a></li>
<li class='video'><a href='#'><span>Video</span></a></li>
<li class='rssfeed'><a href='#'><span>Rss Feed</span></a></li>
<li class='musics'><a href='#'><span>Musics</span></a></li>
<li class='contact'><a href='#'><span>Contact Me</span></a></li>
</ul>
Kode merah dan Biru terserah mau diganti menjadi apa.

7. Kemudian Save Template.

Kemudia lihat hasilnya :) Sudah dulu ya tutorial saya kali ini, saya akhiri dengan wassalam :) dadaaa

49 comments

  1. pertamax gan saya simpen dulu ah,
    oh ya gan mau tanya pake menu seperti ini bikin berat blog gak gan?

    BalasHapus
  2. aaaaarghh
    gagal PERTAMAX
    lg lemot nih inet

    BalasHapus
  3. alhamdulillah yah PERTAMAXXXXXXXXXXXXXXXXXXX :)

    keren:) biasanya di pinggir kali ini di ats menu fixednya :)

    BalasHapus
  4. ohiya btw ane udah pake di blog ane yg satunya nih,, cuma beda bordernya aja,, =)) =))

    BalasHapus
  5. jiahhh tak kira pertamaxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx, , sinyal lemot :(

    BalasHapus
  6. bruakkakakkakakkakak.. =)) =)) bayu PERTAMAXnya jadi KELIMAX,, :P :P

    BalasHapus
  7. To Rizky : Selamat anda mendapatkan hadiah Pertamax :)) coba di cobain dulu om
    To Rama : lain kali bisa pertamax :)) hahahahhaa bagus dong?
    To Hafiz : sabar ya om, lain kali bisa dapat pertamax :D
    To Bayu : bbrrruuakakakakakka ngakak ane sumpah "alhamdulillah yah PERTAMAXXX :) " sambil senyum polos gtu wkwkwkwkw
    To Rama lagi : wkwkwkwkwk lagi nasip dia om :D :P

    BalasHapus
  8. mantaav nih.. keren euy .. kpn2 ta coba aah .. :)

    BalasHapus
  9. GAk pernah pertamax,Sob.... :D(Jaringan kampung).

    Ntar bikin brat blog ngak ya,?

    BalasHapus
  10. To Shinobi : silahkan di coba, sekarang juga bisa :P
    o Aku mau Gratisan : makanya coba dulu untuk ngetes berat blognya.

    BalasHapus
  11. ilmu yg bagus untuk ditiru hehehe
    mmantab.....

    BalasHapus
  12. Mantep nih menunya evolusi dari fixed navigation menu

    BalasHapus
  13. bole jg ni tp ane bole gk request menu yg letakny d atas trus jd kalo nyecroll masi keliatan tu menuny
    kayak punyany o-om

    BalasHapus
  14. siap meluncur.sangat menarik sekali apalagi newbie seperti saya ini hehhe.

    BalasHapus
  15. To Gregorio : Tidak apa apa kawan, bisa lain waktu :)
    To Anisayu : silahkan ditiru :P
    To Musa: iya evolusi dari fixed navigassi
    To Cek info : Wah ane gak tau tuh, itu kan kayak blog SHINOBI
    To Bisnis Online Blog : silahkan di praktekan :D

    BalasHapus
  16. gan berat gak tuh kalo pakai itu ?

    BalasHapus
  17. To Richard: setiap blog beda beda bratnya, coba test di blogmu dulu

    BalasHapus
  18. keren .... gan.... kyanya perlu dicoba nih.... :D..Ahhh ~x( gak sabar ingin coba..sekarang aja deh =))

    BalasHapus
  19. this post awsome,hehe

    BalasHapus
  20. Wah.. ini nih,,, yang dari kemarin saya cari2 sob..... thanks ya sob???

    BalasHapus
  21. To Blog Lano : Thanks gan, silahkan di coba apa adanya :D :))
    To Bangjal : Thanks, gan kalau komen sedikit mengarahlah ke postingan, maaf ya ane ngomong gini, terus terang setiap ente komen pasti tidak mengarah kesana, mohon maaf nih sebesar besarnya . gak maksud memojokan. :(
    To AbduGreen : Oke lanjutkan sob, sama sama
    To sarabose : thanks for support my blog :)

    BalasHapus
  22. sliding ilmu pada post yang sama hehehe

    BalasHapus
  23. Tutor yang sangat inofatif.!
    Mari budayakan saling support sesama blogger dengan memberi satu klik setiap kunjungan..!

    BalasHapus
  24. dah terlalu enak pake menu sendiri :D

    btw tapi bagus banget tuh...

    BalasHapus
  25. Mantap banget sliding menunya, jadi pengen bikin dengan CSS3 aja gimana ya?

    BalasHapus
  26. To Anisayu : Ilmu dibalas dengan ilmu :)
    To Liandri : gak tau kalo gak dicoba :))
    To Prapatan Kretek : mari juga budayakan :))
    To Mbah : oke deh bro pake menusendiri aja :))
    To Rudy Azhar : bisa dengan css3 :D

    BalasHapus
  27. Masih bingung bingung ma jquery belum mastering using jquery

    BalasHapus
  28. banyak tips bagus disini. trims kunjungnya, sy msh prlu banyak belajar. salam musik

    BalasHapus
  29. Cabtik sob,ane dari tadi mainin Jquery - Fixed Sliding Menu mu(contohnya),benar-benar indah.Ane coba sob yach,makasih infonya.

    BalasHapus
  30. To Arena Liga : ikutin aja cara caranya di atas :D
    To Drummer : hehehehe banyak info bagus juga d sana tentang musik :) salam musik dan blogger :)
    To Er'rend : hhahaha silahkan di mainin :P kalau bisa di mainin di blog sobat aja supaya nyaman :P huahahah

    BalasHapus
  31. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  32. wah cantik nih sob....ijin ye nyuba...lagi2 ane yang "petamaxxx" dari bawah =))

    BalasHapus
  33. To Sepatu kerja Pria : sama sama gan kunjunganna :)
    To binkbenk : memang cantik bro, kalo ane ganteng :)) wkwkwkwkw =))

    BalasHapus
  34. maksih gan ilmunya kunjungan di tunggu

    BalasHapus
  35. wah, kebetulan lagi belajar JQUERY nih,
    memang blog ini selalu menjawab pertanyaanku dalam tutorial dan stiap postingnya,
    sangat bermanfaat,
    thanks

    BalasHapus
  36. hehe...gue suka ini. kayaknya loadnya lumayan cepet..nice share

    BalasHapus
  37. waw idenya boleh juga nih... thanks.. baru tau kalo menunya bisa digituin..

    BalasHapus
  38. Kalo mo mindah posisinya gimana bro. Ane pengen taro' di bagian bawah n kalo di mouse over / hover, kotaknya naik keatas. ane sdh coba tapi seluruh kotak jadi iukt naik saat di hover.

    please.. solusinya..

    BalasHapus
  39. To RockMantiCks : oke gan TKP langsung nih gan
    To Zaenal Blog : wahhhh lagi belajar JQuery jangan disini bro :D ini bukan tempat blajar JQuery tapi Trik dari Jquery :D
    To Iskaruji : hehehehe thanks gan kunjungannya :)
    To Sepatu kerja pria : hehehehe thanks gan supportnya :)
    To Y0Y0 : hehehehe bisa aja nih agan :D
    To Google : sumpeh gan ane udah coba juga hasilnya juga tetep semua keangkat.... itu yang kodeTop semuanya tak ganti dengan Bottom kecual Padding-Top itu tetep gak bisa gan. semua keangkat :( gimana ya ane gak begitu paham juga sih, bisanya atas kanan atas kiri sob designya mungkin

    BalasHapus
  40. bagus nih, mau saya praktekin di blog temen ahh. hehehe.. :)

    BalasHapus
  41. To Share Our Knowledge : silahkan saja di pakai, :))

    BalasHapus
  42. wah mantap ini yang Q cari" ;)

    BalasHapus
  43. To willy alam : akhirnya ketemu ya sob :)

    BalasHapus