a i n a d z r i ;
 Home | Follow+

Jumaat, 15 Julai 2011
Tutorial: Floating Menu Bar Jquery

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(){

$(&#39;#backMenu&#39;).sweetMenu({
top: 40,
padding: 8,
iconSize: 48,
easing: &#39;easeOutBounce&#39;,
duration: 500,
icons: [
&#39;images/back.png&#39;
]
});

$(&#39;#exampleMenu&#39;).sweetMenu({
top: 100,
padding: 8,
iconSize:40,
easing: &#39;easeOutBounce&#39;,
duration: 500,
icons: [
&#39;http://1.bp.blogspot.com/-8HPX3cRbEv4/TWqAKubiMlI/AAAAAAAAD-M/3vIzpvJOzHo/s1600/2011-02-28_003024.png&#39;,

&#39;http://1.bp.blogspot.com/-OE-a1ACRYvM/TWp-YDU4JAI/AAAAAAAAD98/AcK_uUbYiuU/s1600/Lockbox.png&#39;,

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

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

&#39;http://2.bp.blogspot.com/-YtXFVHsn9Yk/TWqALDHN4mI/AAAAAAAAD-c/qM-XY5PrDgg/s1600/Sketches.png&#39;,

&#39;http://3.bp.blogspot.com/-R9xU-Bj9Ye4/TWp9wCGKvKI/AAAAAAAAD90/U9jqZvY3ueA/s1600/Kate.png&#39;
]
});
});
</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>

 kene hati2 sikitlah sebab dye banyak code. kalau jadi korang gtau ea. kalau x jadi pun, gtau!

kbye✿

Label:



About Me


Blogger from Malacca-Bangalore. Was born in 1997. Blogging since 2008. Full time dental student and part time blogger. This blog is a little place where I express my feelings and memories. I'm sucker for cute things and beautiful words. Feel free to join my journey through out life and leave your advices or thoughts at the comment section or chatbox. Love, Ain Nadzri.


Chatbox


Alien sesat


Treasure


Copyright ©Ain Nadzri. All rights reserved.