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>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
Tidak ada komentar
Posting Komentar