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 :
6. Pertunjukan belum selesai kita lanjutkan dengan meletakan kode berikut di bawah kode <body> :
7. Kemudian Save Template.
Kemudia lihat hasilnya :) Sudah dulu ya tutorial saya kali ini, saya akhiri dengan wassalam :) dadaaa
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>5. Kemudian Cari kode ]]></b:skin> dengan CTRL + F. Letakan kode berikut tepat diatasnya kode ]]></b:skin> tadi :
<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>
Kode berkedap kedip adalah kode yang berfungsi meletakan MENU FIXED di kanan atau di kiri.ul#floatmenu {
list-style:none;
margin:0;
padding:0;
position:fixed;
: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
}
6. Pertunjukan belum selesai kita lanjutkan dengan meletakan kode berikut di bawah kode <body> :
<ul id='floatmenu'>Kode merah dan Biru terserah mau diganti menjadi apa.
<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>
7. Kemudian Save Template.
Kemudia lihat hasilnya :) Sudah dulu ya tutorial saya kali ini, saya akhiri dengan wassalam :) dadaaa
pertamax gan saya simpen dulu ah,
BalasHapusoh ya gan mau tanya pake menu seperti ini bikin berat blog gak gan?
wkkwkwkkw,, KEDUAX ane,, :(( :((
BalasHapusaaaaarghh
BalasHapusgagal PERTAMAX
lg lemot nih inet
alhamdulillah yah PERTAMAXXXXXXXXXXXXXXXXXXX :)
BalasHapuskeren:) biasanya di pinggir kali ini di ats menu fixednya :)
ohiya btw ane udah pake di blog ane yg satunya nih,, cuma beda bordernya aja,, =)) =))
BalasHapusjiahhh tak kira pertamaxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx, , sinyal lemot :(
BalasHapusbruakkakakkakakkakak.. =)) =)) bayu PERTAMAXnya jadi KELIMAX,, :P :P
BalasHapusTo Rizky : Selamat anda mendapatkan hadiah Pertamax :)) coba di cobain dulu om
BalasHapusTo 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
mantaav nih.. keren euy .. kpn2 ta coba aah .. :)
BalasHapusGAk pernah pertamax,Sob.... :D(Jaringan kampung).
BalasHapusNtar bikin brat blog ngak ya,?
To Shinobi : silahkan di coba, sekarang juga bisa :P
BalasHapuso Aku mau Gratisan : makanya coba dulu untuk ngetes berat blognya.
Yah,Gak jadi Pertamax ~x(
BalasHapusilmu yg bagus untuk ditiru hehehe
BalasHapusmmantab.....
Mantep nih menunya evolusi dari fixed navigation menu
BalasHapusbole jg ni tp ane bole gk request menu yg letakny d atas trus jd kalo nyecroll masi keliatan tu menuny
BalasHapuskayak punyany o-om
siap meluncur.sangat menarik sekali apalagi newbie seperti saya ini hehhe.
BalasHapusTo Gregorio : Tidak apa apa kawan, bisa lain waktu :)
BalasHapusTo 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
gan berat gak tuh kalo pakai itu ?
BalasHapusTo Richard: setiap blog beda beda bratnya, coba test di blogmu dulu
BalasHapuskeren .... gan.... kyanya perlu dicoba nih.... :D..Ahhh ~x( gak sabar ingin coba..sekarang aja deh =))
BalasHapusthis post awsome,hehe
BalasHapusWah.. ini nih,,, yang dari kemarin saya cari2 sob..... thanks ya sob???
BalasHapusWonderful and wobbly! Loved your blog!
BalasHapusFree Software Download
To Blog Lano : Thanks gan, silahkan di coba apa adanya :D :))
BalasHapusTo 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 :)
sliding ilmu pada post yang sama hehehe
BalasHapusbikin berat gx ne sob?
BalasHapusTutor yang sangat inofatif.!
BalasHapusMari budayakan saling support sesama blogger dengan memberi satu klik setiap kunjungan..!
dah terlalu enak pake menu sendiri :D
BalasHapusbtw tapi bagus banget tuh...
Mantap banget sliding menunya, jadi pengen bikin dengan CSS3 aja gimana ya?
BalasHapusTo Anisayu : Ilmu dibalas dengan ilmu :)
BalasHapusTo 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
Masih bingung bingung ma jquery belum mastering using jquery
BalasHapusbanyak tips bagus disini. trims kunjungnya, sy msh prlu banyak belajar. salam musik
BalasHapusCabtik sob,ane dari tadi mainin Jquery - Fixed Sliding Menu mu(contohnya),benar-benar indah.Ane coba sob yach,makasih infonya.
BalasHapusTo Arena Liga : ikutin aja cara caranya di atas :D
BalasHapusTo 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
Komentar ini telah dihapus oleh administrator blog.
BalasHapusmakasih bnyak ya gan infonya
BalasHapuswah cantik nih sob....ijin ye nyuba...lagi2 ane yang "petamaxxx" dari bawah =))
BalasHapusTo Sepatu kerja Pria : sama sama gan kunjunganna :)
BalasHapusTo binkbenk : memang cantik bro, kalo ane ganteng :)) wkwkwkwkw =))
maksih gan ilmunya kunjungan di tunggu
BalasHapuswah, kebetulan lagi belajar JQUERY nih,
BalasHapusmemang blog ini selalu menjawab pertanyaanku dalam tutorial dan stiap postingnya,
sangat bermanfaat,
thanks
hehe...gue suka ini. kayaknya loadnya lumayan cepet..nice share
BalasHapuswah keren nih gan,,,,ana br tau nih
BalasHapuswaw idenya boleh juga nih... thanks.. baru tau kalo menunya bisa digituin..
BalasHapusKalo 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.
BalasHapusplease.. solusinya..
To RockMantiCks : oke gan TKP langsung nih gan
BalasHapusTo 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
bagus nih, mau saya praktekin di blog temen ahh. hehehe.. :)
BalasHapusTo Share Our Knowledge : silahkan saja di pakai, :))
BalasHapuswah mantap ini yang Q cari" ;)
BalasHapusTo willy alam : akhirnya ketemu ya sob :)
BalasHapus