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://1.bp.blogspot.com/-8HPX3cRbEv4/TWqAKubiMlI/AAAAAAAAD-M/3vIzpvJOzHo/s1600/2011-02-28_003024.png',

'http://1.bp.blogspot.com/-OE-a1ACRYvM/TWp-YDU4JAI/AAAAAAAAD98/AcK_uUbYiuU/s1600/Lockbox.png',

'http://3.bp.blogspot.com/-D-iRR9UIz5k/TWp-9to863I/AAAAAAAAD-E/0dSNTvNoZJQ/s1600/Text.png',

'http://1.bp.blogspot.com/-z-iw2XB4WUQ/TWqAK5_Z86I/AAAAAAAAD-U/mVSX7JI-1YY/s1600/Customize.png',

'http://2.bp.blogspot.com/-YtXFVHsn9Yk/TWqALDHN4mI/AAAAAAAAD-c/qM-XY5PrDgg/s1600/Sketches.png',

'http://3.bp.blogspot.com/-R9xU-Bj9Ye4/TWp9wCGKvKI/AAAAAAAAD90/U9jqZvY3ueA/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>