Tutorial: Floating Menu Bar Jquery

Julai 15, 2011

Assalammualaikum. (= hmm, Aind ade terima request dari kak michiko. dye nak buat Floating Menu Bar Jquery. ala, yang bile kite letak cursor kat situ, keluar perktaan tu. macam nie:

Ok, ni caranya: (perhatikan betul2 tau!)

1. Dashboard-design-edit HTML-tick expand widget

2. post kod ni BAWAH <head>

<script src='http://cikamoitutor.bravehost.com/jquery-1.4.2.min.js' type='text/javascript'/><script src='http://cikamoitutor.bravehost.com/jquery.easing.js' type='text/javascript'/><script src='http://cikamoitutor.bravehost.com/jquery.sweet-menu-1.0.js' type='text/javascript'/>

3.copy n paste kod ni bawah ]]></b:skin> pulak k ?

<script type='text/javascript'>

$(document).ready(function(){

$('#backMenu').sweetMenu({

top: 40,

padding: 8,

iconSize: 48,

easing: 'easeOutBounce',

duration: 500,

icons: [

'images/back.png'

]

});

$('#exampleMenu').sweetMenu({

top: 100,

padding: 8,

iconSize:40,

easing: 'easeOutBounce',

duration: 500,

icons: [

'http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdUv3_mbGJDFs6SrJ65s0R6EZQwnrueZbLfLjrjQqzcue44k-i5340PnnGCUFNYOWC4oroYoSbZE2M3cCC7kqimHL1kJCbmzejiz4fHcq7LU0arkMLVelF9BlMUE7kjlcSpevi5DtMPKPl/s1600/2011-02-28_003024.png',

'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-0L5URNRewTiLS4m7J2Cck62q1LN4KQk0Z2g0XvXM-CQ0Y4ucXsxki182yfMuC41KmmKLsWev8d9YMImAERShTNtkwMdquPLMbM0QvFsyZQeoql0xJfWGy1ntA1SOaIu7TaDhct4DdDUu/s1600/Lockbox.png',

'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhFLFnD8MwBuusbhYVWL6G5OYAVbQsEMwlroNKA75XPWw0pTR_g9DYy5YjZLRjCE70wAkpKz3ToBlLB0pMCKSRK_B6dB0QwUz6Tcc6YMqgxP5ktECVmmDAcem8KN69VHfyt0idmgiWQNgi/s1600/Text.png',

'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjljtbd6-0fHpuqBbrKatruU1ZNqbUFUOo0tzH-Sf6XZvzzyJHWlk4i0MKooQ6PjXYRwO1-nJjZI_a6zaPt6zBQ93c_72QF37a2qyObh4UkC0hJbv3zMTnOeZLGx476Lf1pClTDCnJQFO-a/s1600/Customize.png',

'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLl8IiNBHP3YFzvz_td5_atkva6qL9hqTTCcmTqNwUR5w4XS3PFLVVPRsSkpGZs56BhkTMRP0lh_6yKd-NYb6B9lLyDYfEh-SbzNuBJNUvlmEcrSdvjtmgjsYkprlWfzC2Q3dyXKUjgu8B/s1600/Sketches.png',

'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKZHdQJaITWeIAn7wh-40oxTCghXJRqOclhloq1oDF6ypem2DFGgEarCQKDfsQAYfSWWgIr2ysYVxwG6Vm3wwqJUTPTLfLTYqJ7YohcCg47qlaoep8gZ9F3Yj8-DE45J69RV_Jtqr-R6CV/s1600/Kate.png'

]

});

});

</script>

p/s: yang diboldkan bleh tukar pic yg korang suke!

4. copy n paste kod ni ats ]]></b:skin> .

.sweetMenuAnchor{border-top: 1px solid #ffffff;border-right: 1px solid #ffffff;border-bottom: 1px solid #ffffff;border-top-right-radius: 4px;-moz-border-radius-topright: 4px;border-bottom-right-radius: 4px;-moz-border-radius-bottomright: 4px;color: #000000;font-size: 20px;font-weight: bold;text-align: right;text-transform: uppercase;font-family: Arial Narrow;text-decoration: none;background-color: #ACF3FD;opacity: 1.0;}
.sweetMenuAnchor span{display: block;padding-top: 10px;}

5. copy n paste cod ni ats </body>

<div id='exampleMenu'>
<li><a expr:href='data:blog.homepageUrl' title='homepage'>Home</a></li><li><a href='LINK anda' target='_blank' >Tajuk1</a></li>
<li><a href='LINK anda' target='_blank' >tajuk2</a></li>
<li><a href='LINK anda' target='_blank' >tajuk3</a></li>
<li><a href='LINK anda' target='_blank' >tajuk4</a></li>
<li><a href='LINK anda' target='_blank' >tajuk5</a></li>
</div>