Hi! My name is Rizqy and I’m new as writer in this blog. Thanks to Ritesh for make me a writer. In this blog, I’ll write about javascript especially jquery, tips-trick windows, and maybe the other. In this occasion I’ll write about jquery javascript framework. Jquery is one of the most popular javascript framework. It has many plugin that we can use freely to beautify our blog or website.
Now I’ll share how to make a float menu with touching of jquery effect. The example of float menu we can see at http://spenasa-blogger.blogspot.com. Look at the left side, you will find a float menu with some menu of course. If we scroll the page, that menu will look like follow our scroll. We will use Jquery Scrool Follow plugin for this. You can go to the documentation page of this plugin at http://kitchen.net-perspective.com/open-source/scroll-follow.
Javascript
To use the plugins from Jquery, we must add the library script from jquery. Find </head> and paste the script below.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
After that, add the script below. This script is the core of the jquery scroll follow and Jquery UI.
<script src='http://mbahrizh.googlecode.com/files/jquery.scrollfollow.js' type='text/javascript'/>
<script src='http://mbahrizh.googlecode.com/files/jquery-ui-1.7.2.custom.min.js' type='text/javascript'/>
Also add this script. This script for call the scroll follow effect.
<script type='text/javascript'>
$( document ).ready( function ()
{
$( '#floatmenu' ).scrollFollow();
}
);
</script>
CSS
This is the basic CSS. You can costumize it as your desire. Add the CSS below before ]]></b:skin>.
#floatmenu {background:#FFF; border: 2px solid #088A08; position: absolute; width: 40px; height: 200px; color: rgb(102, 102, 102); font-size: 12px; top: 100px; left: 0px; z-index: 1;}
HTML
Basicly, you just add a <div> tag after <body> tag. You’re free to choose your menu content. You can give your facebook, twitter, or the other.
<div id='floatmenu'>
<!-- The menu content is here... -->
</div>
That’s all my first post. In another time, I’ll write about the other jquery effects. I hope you enjoy it.
good tutorial rizgy
Thnks. My name use "Q", not G.
Sorry for that i typed it by mistakely
yah.. sebenernya bagus sih. tp sayang tabrakan dengan lightbox. ngga tau kenapa tuh. setiap kali scriptnya disamain dng lightbox selalu ngga jalan lightboxnya. sebel! :(
@Xian Iwan Santoso
Please can you write your comment in English I have tried Translating but i was unable to Get any thing from it