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.