10 jQuery Floating Menu and Message Plugins

Sam Deering

These are some awesome jQuery Floating Menu plugins in today’s post will help you to add a floating, sticky menu containing important links to your website. The “floating” effect! You will notice that the menu bar at the top starts floating over the rest of the page once you scroll past it. Enjoy!

Related Posts:

1. Portamento.js

A jQuery plugin that makes it simple to add sliding (aka “floating”) panel functionality to your web page. Works fine with floated and absolutely-positioned layouts, in all modern browsers and some not-so-modern ones too.



2. jQuery floating menu

A simple navigation menu that “follows” page scrolling and expands on mouse over, made with CSS and jQuery.

jQuery floating menu


3. Create a Floating Menu with jQuery

Here is the code you can use to create a floating jQuery menu that stays where you absolutely position it on the screen. Make sure you have jQuery loaded on whatever page you use this.

Floating Menu with jQuery


4. Absolute Floating Menu as jQuery plugin

Is also a jQuery plugin right out of the box (in addition to standalone mode). When the script code is loaded, if jQuery was loaded before that (even in when noConflict() is used), Absolute floating menu will register itself as jQuery plugin.

Absolute Floating Menu

Source + Demo

5. jQuery Floating Message Plugin

This plugin will basically display the messages easily. Dual licensed under the MIT or GPL Version 2 licenses.

jQuery Floating Message Plugin

Source + Demo

6. Creating a Floating HTML Menu Using jQuery and CSS

For all of us who deal with long web pages and need to scroll to the top for the menu, here’s a nice alternative: floating menus that move as you scroll a page. This is done using HTML, CSS and jQuery, and it’s fully W3C-compliant.

Floating HTML Menu


7. Fixed Floating Elements

Learn how to replicate the fixed floating sidebars or elements with very little jQuery.

Fixed Floating Elements

Source + Demo

8. jqFloat.js

A jQuery plugin that able to make any HTML objects appear to be floating on your web page.


Source + Demo

9. Floating HTML5 Menu

This menu works perfectly well with Firefox, Opera, Chrome and Safari. The dropdown also works on non-CSS3 compatible browsers such as IE7+, but the rounded corners and shadow will not be rendered.

Floating HTML5 Menu


10. Horizontal Floating Menu Demo Using jQuery

What you just experienced is nothing but the Horizontal Water Menu packaged as a plugin for the amazing jQuery JavaScript library.

Horizontal Floating Menu

Source + Demo

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.echteinfach.tv/ Echt Einfach TV

    I am not a fan of menus that follow you all the time / all the “screen”.

    jqfloat instead is quite interesting for web animations :)

  • Pingback: 7月21日の注目記事 | Javable.Jp

  • Pingback: 10 jQuery Floating Menu and Message Plugins » PHP Script Blog

  • vsnair

    Thanks man…. Thanks a lot… i was searching for these types of codes for a long…. finaly i got it from your post… Thank you once again….

  • joy

    Good One,

    Great ….
    Thx a lot

  • Prashanth

    Excellent Ones..

  • Anon47346

    Where can I find some help with the one your site uses? By this I mean the menu that replaces your main nav and logo when scrolling down. Thank you. I saved your site/blog and look forward to visiting again.

    • http://www.facebook.com/profile.php?id=764338584 Brad Guy

      I’m looking for the same thing, just like the jQuery4u navigation menu… Anyone find anything like it out there yet?

  • davidyell

    Bit of a let down that this post was written in 2012, yet references plugins from 2009. Surely this post needs a refresh?

    • http://jquery4u.com/ jQuery4u

      Sorry about that mate, there are like 200+ posts which need a refresh! Hard to keep track of them all but I’ll do my best to update the best ones!

  • Jason C

    Can the 2. jQuery floating menu be used on WP? If yes, can u provide some direction? Thx

  • retertert


  • retertert


  • retertert


  • retertert


  • retertert


  • retertert


  • Pingback: How do I correctly make my nav bar scrol down with my page??? - Page 3