This website uses cookies to personalise ads and to analyse traffic ok
web design

jQuery floating menu

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

The code

The css

body{margin:0px; padding:0px;}
#fl_menu{position:absolute; top:50px; left:0px; z-index:9999; width:150px; height:50px;}
#fl_menu .label{padding-left:20px; line-height:50px; font-family:"Arial Black", Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; background:#000; color:#fff; letter-spacing:7px;}
#fl_menu .menu{display:none;}
#fl_menu .menu .menu_item{display:block; background:#000; color:#bbb; border-top:1px solid #333; padding:10px 20px; font-family:Arial, Helvetica, sans-serif; font-size:12px; text-decoration:none;}
#fl_menu .menu a.menu_item:hover{background:#333; color:#fff;}

The jQuery library and plugins inside head tag

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>

The floating menu markup

<div id="fl_menu">
    <div class="label">MENU</div>
    <div class="menu">
        <a href="#" class="menu_item">An menu item</a>
        <a href="#" class="menu_item">A long menu item</a>
        <a href="#" class="menu_item">Item 3</a>
        <a href="#" class="menu_item">Another one</a>
        <a href="#" class="menu_item">A really, really long menu item</a>
        <a href="#" class="menu_item">Menu item 6</a>
        <a href="#" class="menu_item">And one more</a>
        <a href="#" class="menu_item">A tiny</a>
    </div>
</div>

The floating menu script is inserted in the end of the document, right before the closing body tag

<script>
//config
$float_speed=1500; //milliseconds
$float_easing="easeOutQuint";
$menu_fade_speed=500; //milliseconds
$closed_menu_opacity=0.75;
 
//cache vars
$fl_menu=$("#fl_menu");
$fl_menu_menu=$("#fl_menu .menu");
$fl_menu_label=$("#fl_menu .label");
 
$(window).load(function() {
    menuPosition=$('#fl_menu').position().top;
    FloatMenu();
    $fl_menu.hover(
        function(){ //mouse over
            $fl_menu_label.fadeTo($menu_fade_speed, 1);
            $fl_menu_menu.fadeIn($menu_fade_speed);
        },
        function(){ //mouse out
            $fl_menu_label.fadeTo($menu_fade_speed, $closed_menu_opacity);
            $fl_menu_menu.fadeOut($menu_fade_speed);
        }
    );
});
 
$(window).scroll(function () {
    FloatMenu();
});
 
function FloatMenu(){
    var scrollAmount=$(document).scrollTop();
    var newPosition=menuPosition+scrollAmount;
    if($(window).height()<$fl_menu.height()+$fl_menu_menu.height()){
        $fl_menu.css("top",menuPosition);
    } else {
        $fl_menu.stop().animate({top: newPosition}, $float_speed, $float_easing);
    }
}
</script>

Under //config comment you can set some configuration options for the menu.

Enjoy 🙂

License

This work is released under the MIT License.
You are free to use, study, improve and modify it wherever and however you like.
https://opensource.org/licenses/MIT


90 Comments

Post a comment

Comments pages: 1 2 3

  1. Brooke
    Posted on March 12, 2014 at 20:01 Permalink

    I tried this script in my website and the menu does not follow the page as it scrolls and the menus do not drop down. As far as I can tell the script does not seem to activate.

    Reply
  2. Prateek Sasanker
    Posted on July 4, 2013 at 12:23 Permalink

    Great Piece of Code……
    I have applied this to my vertical menu with submenus. The problem is that my submenus are going under the browser window when scrolling. How can I fix it? Plz help!

    Reply
  3. Dave E.
    Posted on July 1, 2013 at 00:12 Permalink

    How ’bout submenus? Does that capability exist with this UI widget?

    Reply
  4. David E.
    Posted on April 24, 2013 at 20:14 Permalink

    In the $(window).load() I would add a click handler to show people how to determine what menu item was clicked. For example…

    $fl_menu.click( function (e) { alert($(e.target).text()); } );

    Reply
  5. Chris
    Posted on March 25, 2013 at 06:53 Permalink

    Is it possible to use 2 of these on the same page?

    Reply
  6. Udeh
    Posted on March 8, 2013 at 15:47 Permalink

    Thanks…

    Reply
  7. BeeWorks
    Posted on January 24, 2013 at 12:47 Permalink

    How do I add the jquery plugin and the html mark up to WordPress hosted site?

    Reply
  8. scsxpress
    Posted on January 8, 2013 at 18:12 Permalink

    Great floating menu!
    What if one had a menu placeable by a mouse click?

    Reply
  9. Hlias
    Posted on December 24, 2012 at 10:00 Permalink

    Hi and thanks for this amazing floating menu.
    Is it possible to have multiple menus which work independently when you hover and not only a single one?

    Reply
  10. Kaan Ashan
    Posted on December 21, 2012 at 12:50 Permalink

    Hi Malihu,
    It’s great menu. Thanks your sharing.
    How can I implement to my Blogger page.
    Thanks in advance.
    Kaan

    Reply
  11. Nicolas
    Posted on December 20, 2012 at 21:40 Permalink

    why are you complicating developers life? the css could be applied programmatically… call me when you’re done, this is not useful, is error prone.

    Reply
    • malihu
      Posted on December 20, 2012 at 23:28 Permalink

      Hi and thanks for the feedback.
      Except position:absolute of #fl_menu and display:none/block of #fl_menu .menu, what else should be applied by the script (since most CSS rules are fonts, colors etc.)?

      Reply
  12. windson
    Posted on November 30, 2012 at 20:07 Permalink

    Hi Malihu,
    I am getting error in IE all versions.
    To See this error you should follow these steps:
    * Internet Options ->Advanced Tab -> In “Settings” Panel -> Browsing -> Uncheck the “Disable Script Debugging (Internet Explorer) and (other)”
    Now Reload the page by hitting Shift+F5
    Error Is:
    “Line: 33
    Error: ‘menuPosition’ is undefined”
    this line is in floatmenu() function. and we are not initializing menuPosition in this function.

    Solution:
    Re position this line of code “menuPosition=$(‘#fl_menu’).position().top;” from window.load to the outside of all other methods or at the top of the java script file.

    Reply
  13. bluenames
    Posted on October 13, 2012 at 14:30 Permalink

    hi, looks cool

    i have separated files for css and javascript sources and call these in my html code with the tag, but the codes provided above on this website (http://manos.malihu.gr/jquery-floating-menu) for this cool menu do not work:

    1. menu box does not scroll with webpage, but stays still/fix (although “position: absolute;” for “#fl_menu” in css file)

    2. hover over “MENU” does not expand the submenues

    note: i already use “#menu” in my css for an other menu on the same webpage

    do you have a solution?

    many thx, cheers
    bluenames

    Reply
  14. marko
    Posted on October 5, 2012 at 22:34 Permalink

    Hey man,

    Thanks for this, but i just can’t do it. I’m busting my ass but it won’t work. Can you help?

    Reply
  15. ZazeSmirks
    Posted on August 15, 2012 at 17:29 Permalink

    Hello,

    I am in the process of making a floating scroll menu, however, every single JQuery code I try, it NEVER seems to work. I am so exhausted and stress and I have a deadline I have to meet for this site approaching really soon. Can you please help me? I am currently using the updated version of Firefox, Google Chrome, and IE9. I would really appreciate it if someone knew the answer to my problem.

    Reply
  16. Sylvain
    Posted on August 7, 2012 at 09:40 Permalink

    Hi !

    first, thanks for this ! So cool !

    For my website, my menu is on the top at 150px. And when i scroll down, i want it at just 20px. It’s possible ?

    Thank you !

    Reply
    • malihu
      Posted on August 7, 2012 at 16:32 Permalink

      Hello,
      Try changing:
      menuPosition=$('#fl_menu').position().top;
      to
      menuPosition=20;
      Thanks for your comments

      Reply
  17. wiyono
    Posted on July 26, 2012 at 14:56 Permalink

    Really nice, many thanks

    Reply
  18. ozhan
    Posted on July 23, 2012 at 15:30 Permalink

    Hi, first of al great work!!! i love it!

    My website is getting more content and i want to categorize the items better then how it looks now.

    My question is: is it possible to make the floating menu a multilevel dropdown menu?

    Groetjes uit Holland!!

    Reply
  19. sokea
    Posted on July 4, 2012 at 13:55 Permalink

    is it possible to adapt it for wordpress ?

    Reply
  20. wash
    Posted on June 17, 2012 at 20:25 Permalink

    muy bueno codigo para inspirarse, gracias, un saludo

    Reply
  21. Sadun89
    Posted on June 14, 2012 at 19:07 Permalink

    First of all many thanks to you sharing such a nice module with us..
    I hope to add this to my final year project.
    Anyway I faced some problem while using this.

    I need to change value in

    EEE

    I want to change href value and tag value “EEE” clicking another link.
    (Using java script or other method)

    Can you show way to me to do this?
    this also huge help for me..Bcz I tried several time to do this but always I failed.

    Reply
  22. Alexandre Vazzolla
    Posted on June 14, 2012 at 07:55 Permalink

    is there a way to change background color aspect by a image.
    The purpose is to build a menu with rounded web buttons , which are in
    fancy by now .
    Thanks

    #fl_menu .menu .menu_item{
    display:block;

    background-image : url(images/mmktlogo.png); >>>> I tried this and has not worked
    background:#000;
    color:#bbb;
    border-top:1px solid #333;
    padding:10px 20px;
    font-weight:bold;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size:12px;
    text-decoration:none;
    }

    Reply
  23. 4G JAMMER
    Posted on June 12, 2012 at 09:19 Permalink

    We are a group of volunteers and starting a new
    scheme in our community. Your website provided us with valuable info to work on.

    You have done a formidable job and our whole community will be thankful to you.

    Reply
  24. Janne Marri
    Posted on April 5, 2012 at 22:21 Permalink

    I’m trying to create this side scrolling website and I like the menu scrolling down as you scroll. My question is what in the jquery code should you change in order for it to follow sideways when scrolling sideways instead of scrolling downwards? thanks so much!

    Reply
    • madhavi
      Posted on April 27, 2012 at 10:47 Permalink

      I have floating div within ajax tabcontainer.. so the above logic is not woring for me.. pls help

      Reply
  25. Todd Baylis
    Posted on March 19, 2012 at 05:08 Permalink

    Hi Malihu,

    First off, I just wanted to say this is VERY nice and very close to what I wanted to achieve. I was hoping I could get your assistance with a small modification that I believe would increase the usability of this menu. Rather than have the menu scroll along with the page (where it moves every time a user scrolls a single line) I would like the menu to shoot down to the next major section once it comes into view in the content region. The navigation item corresponding to the content would then be aligned with the content heading, for example:

    Menu:

    About
    My Work
    C.V.
    Contact

    As the user scrolled past “about” and down to “my work”, the menu would slide down so that “My Work” was now aligned with the heading “My Work.” Also I would be using HTML5 sections for each of these and all of the content would be on a single page (with anchor links linking to each section.)

    Secondly (and this would just be more of a “nice to have”) to deal with content that is longer than a single browser window’s height (where the menu would then disappear) I was thinking it default to your normal scrolling, maybe shooting down for every full browser height scrolled. What I’m hoping to do is avoid the constant movement of the navigation which I believe may distract users from the content.

    An alternative, and perhaps superior approach to the above suggestion would be to have a sub-navigation, i.e.:

    About
    My Work
    Project 1
    Project 2
    etc.
    C.V.
    Contact

    And in this case the navigation would continue to follow the content, this time each project sub-heading would align with the sub-navigation item.

    Sorry if this is a little wordy, but what do you think about my suggestions? Is it easily done using your code? Do you think it would be an improvement? Do you see any issues?

    I’d love to hear from you! I will check back on this site to see if you’ve responded, or you can also email me directly at the address I’ve provided.

    Thanks very much for your time! Again, amazing work! I will be sure to follow your other articles 🙂

    Todd Baylis

    Reply
  26. Mak
    Posted on February 23, 2012 at 14:05 Permalink

    Hi all,

    Would possible be possible to add a sub submenu ?

    MENU
    SUB MENU 1
    SUB MENU 2
    SUB MENU 3
    -> -> SUB SUB MENU 3

    How to do that ?

    Thk you for your support

    Reply
    • Mak
      Posted on February 28, 2012 at 07:52 Permalink

      it’s ok for me.

      Reply
  27. webipsum
    Posted on February 19, 2012 at 15:17 Permalink

    malihu and friends.
    I need something similar, but that the menu only appears on the top, after rolling a number of lines of the page.
    Any tips or tutorial about it?
    Thank you for your attention.

    Reply
  28. RONALDO
    Posted on January 30, 2012 at 20:27 Permalink

    obrigado thanks
    work

    Reply
  29. JR
    Posted on January 18, 2012 at 13:53 Permalink

    I haven’t tested this but where it says “$fl_menu.hover” change .hover to .click or maybe .mouseup.
    You can possible parameters on the jquery docs here http://api.jquery.com/category/events/mouse-events/

    Cheers

    Reply
    • shawna
      Posted on July 16, 2012 at 08:46 Permalink

      I edited script to activate on click (and close on mouse out) as follows…

      $(window).load(function() {
      menuPosition=$(‘#fl_menu’).position().top;
      FloatMenu();
      $fl_menu.click(
      function(){ //mouse over
      $fl_menu_label.fadeTo($menu_fade_speed, 1);
      $fl_menu_menu.fadeIn($menu_fade_speed);
      },
      $fl_menu.mouseleave(
      function(){ //mouse out
      $fl_menu_menu.fadeTo($closed_menu_opacity);
      $fl_menu_menu.fadeOut($closed_menu_opacity);
      }
      ));
      });

      Reply
  30. Matt C
    Posted on January 13, 2012 at 06:25 Permalink

    This menu would be ideal if the submenu was click-to-open rather than hover-to-open, so that it would work on touchscreens. Is there any way to make that happen? Thanks. -matt

    Reply

Comments pages: 1 2 3

Post a comment

Cancel reply

Your e-mail is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
You can write or copy/paste code directly in your comment using the <code> tag:
<code>code here...</code>
You may also use the data-lang attribute to determine the code language like so:
<code data-lang-html>, <code data-lang-css>, <code data-lang-js> and <code data-lang-php>

css.php