Best 2 Know

The Ultimate Blogging Resource

  • Advertising
  • WebHosting
  • Contact Us
  • Blogger
    • Blogger Templates
    • Blogger Tutorials
  • Browser
    • Firefox
    • Google Chrome
  • Google
  • Internet
    • Facebook
    • Twitter
  • Thesis
  • Windows
  • WordPress
    • WordPress Themes
    • WordPress Plugins
  • More
    • Linux
    • Review
    • Solutions
    • Announcements

Jquery – Create Float Menu with Scroll Follow Effect

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.

Subscribe via Email

Share this:

  • Twitter
  • Facebook
  • Pocket
  • Print
  • Email

Related

April 19, 2010 Ritesh Sanap Blogger Tutorials Blogger Hacks, Jquery, Social Bookmarking

Post navigation

Previous Previous post: How to Show offline in Gtalk or How to be invisible in Gtalk
Next Next post: You might also like this Widget for blogger or Related post widget

Currently Trending

  • How to download Specific parts of YouTube videos
  • Windows Vista CD key
  • h4x0r ( Hacker ) - Blogger Template
  • You might also like this Widget for blogger or Related post widget
  • How to Hide Desktop Icons in Mac
  • How To Make Your Own Windows Media Player Theme
  • How to Increase Dropbox upload speed
  • How to add Attribution widget in blogger
  • HTTP2 Server Push for W3 Total Cache Minify plugin
  • How to Create Multiple Excerpts in WordPress

Random Posts

Change Blog’s Font Type with Cufón

June 17, 2010 By Ritesh Sanap 2 Comments

From Netbook to Jetbook- Make your notebook super fast

March 14, 2009 By Ritesh Sanap 5 Comments

Insert your Name in Taskbar

February 29, 2008 By Ritesh Sanap Leave a Comment

Asino footer for thesis

May 13, 2011 By Ritesh Sanap 6 Comments

Easily Publish your web content around the world

April 21, 2010 By Ritesh Sanap Leave a Comment

WordPress

HTTP2 Server Push for W3 Total Cache Minify plugin

August 17, 2016 By Ritesh Sanap 5 Comments

How to Disable Emojis in WordPress

January 6, 2016 By Ritesh Sanap Leave a Comment

JetPack Related posts and Sharing not working with NGINX

November 10, 2015 By Ritesh Sanap Leave a Comment

Simply Pure – WordPress Theme

November 2, 2014 By Ritesh Sanap 2 Comments

Advanced What should we Write about next? – WordPress Plugin

July 28, 2014 By Ritesh Sanap Leave a Comment

How to Disable Self Pingback or TrackBack

January 16, 2014 By Ritesh Sanap Leave a Comment

BlueStrap – WordPress Theme

January 1, 2014 By Ritesh Sanap 15 Comments

How to Create Multiple Excerpts in WordPress

December 24, 2013 By Ritesh Sanap Leave a Comment

How to Disable Auto Update in WordPress

November 21, 2013 By Ritesh Sanap Leave a Comment

How to Delete Feedbacks from JetPack Contact Form

November 19, 2013 By Ritesh Sanap 9 Comments

Recent Posts

  • HTTP2 Server Push for W3 Total Cache Minify plugin
  • How to show hidden files and folders in Mac OS X
  • How to Disable Emojis in WordPress
  • Canva – Online Photo Editor
  • JetPack Related posts and Sharing not working with NGINX

Archives

Recommends

  • DigitalOcean – Cloud Hosting
  • Dropbox – Cloud Storage
  • Elegant Themes – WordPress Themes
  • LastPass – Password Manager
  • Like us on Facebook
  • Follow on Twitter
  • +1 on Google
  • Subscribe via Email
  • RSS Feed

© 2022 Best 2 Know · All Rights Reserved · We ♥ DigitalOcean

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.