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.
http://opensource.org/licenses/MIT


90 Comments

Post a comment

Comments pages: 1 2 3

  1. JR
    Posted on January 12, 2012 at 01:30 Permalink

    If you want the Menu to float/animate/slide horizontally instead of vertically for side scrolling websites. Replace the script in the footer with this:
    //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"); $(window).load(function() { menuPosition=$('#fl_menu').position().left; FloatMenu(); }); $(window).scroll(function () { FloatMenu(); }); function FloatMenu(){ var scrollAmount=$(document).scrollLeft(); var newPosition=menuPosition+scrollAmount; if($(window).width()<$fl_menu.width()+$fl_menu_menu.width()){ $fl_menu.css("left",menuPosition); } else { $fl_menu.stop().animate({left: newPosition}, $float_speed, $float_easing); } }

    The code above just replaces height with width and top with left! Easy!

    Reply
    • natalie
      Posted on March 9, 2012 at 16:13 Permalink

      I tried applying your suggestion to the downloadable demo menu that opens horizontally . It did not work for me. I am in the process of creating a horizontal scrolling website and am in need of a menu that floats horizontal. For me, the code above results in a stationary menu, with no menu hover function.

      Reply
  2. BILL
    Posted on January 3, 2012 at 12:52 Permalink

    Hello my friend,
    How can I insert sub menus in your floating menu ???????

    Reply
  3. Mehdi
    Posted on December 4, 2011 at 13:29 Permalink

    You are the best …thank you so much for this amaizing tutorial again 🙂

    Reply
  4. Julia
    Posted on December 1, 2011 at 20:16 Permalink

    I’m having trouble with this menu on my unfinished website: http://neighbourhood1.chemicalrain.net – it seems to not like something in my coding. 🙁

    Any ideas? Thank you for the great script!

    Reply
  5. Streety
    Posted on November 22, 2011 at 16:35 Permalink

    When changing from Absolute to fixed positioning the menuPosition is miscalculating the amount of scroll down relative to the CSS top position.

    This means the nav is twice as far down as it should.

    Any ideas to fix?

    Reply
    • malihu
      Posted on November 24, 2011 at 15:55 Permalink

      The script works with position absolute. May I ask, why would you wanna make it fixed?

      Reply
  6. Streety
    Posted on November 21, 2011 at 18:23 Permalink

    Thank you for sharing.

    Really nice bit of code. I hope you don’t mind if I mod it slightly.

    Thanks again.

    Reply
    • malihu
      Posted on November 24, 2011 at 15:55 Permalink

      I don’t mind at all 🙂

      Reply
  7. Zach
    Posted on October 27, 2011 at 23:17 Permalink

    How do you set a top and bottom limit? For example, I want my div to stop right below the header and right above the footer.

    Thanks,
    Zach

    Reply
  8. Albert
    Posted on October 26, 2011 at 11:47 Permalink

    Hi,

    Thank you so much for this! Just what I was looking for..

    Is there any way the menu can be visible when hovering the “menu_item”?

    Reply
  9. sadhu
    Posted on October 21, 2011 at 17:26 Permalink

    hi, i am using this but i have issue in IE, it doesnt work, it works fine in ff and chrome, i did renamed your f1_menu….. can help me?

    Reply
    • malihu
      Posted on October 23, 2011 at 04:20 Permalink

      I’ve checked the script and demo in ie8 and ie9 and works well. What version of IE you tested on? And did you test the demo or another implementation?

      Reply
  10. vsync
    Posted on August 10, 2011 at 16:37 Permalink

    check out my plugin that does the same, only with more control:

    http://plugins.jquery.com/project/stickyfloat

    Reply
  11. James
    Posted on August 4, 2011 at 11:31 Permalink

    Is it possible to make this menu float horizontally to go with a side scrolling website? Thanks in advance!

    Reply
  12. Solar
    Posted on June 2, 2011 at 02:01 Permalink

    Hi Malihu,

    First off, thanks for this sleek floating menu!

    Bug submission:
    When I’m on my 22″ monitor (1920×1200), it works 100% as expected.
    But when I’m on my 14″ laptop monitor (1366×768), the menu:
    a. Doesn’t scroll down together with the page.
    b. Clicking on a menu item, the page scrolls down (using anchor HTML tags) but the menu doesn’t move down.

    Please advice further. Thanks.

    Reply
    • Solar
      Posted on June 2, 2011 at 18:49 Permalink

      Cancel my “a. Doesn’t scroll down together with the page.”. The menu works fine when I scroll down. It only doesn’t work when I jump down a page by clicking on a menu item (aka my 2nd point b.).

      In addition, the menu also doesn’t work when I click on a menu item to go UP.

      Reply
  13. Startcubes
    Posted on May 23, 2011 at 23:15 Permalink

    Hi there,

    I see that the menu, when loading the page, starts without being opaque (or minimized). Surely, there is an easy way to alter this. Could you provide me a hint? 🙂

    Thanks a lot for your great work!

    Reply
    • malihu
      Posted on May 26, 2011 at 03:30 Permalink

      I believe you’re referring to the horizontal version of the menu, correct?
      If yes, just set $page_load_fade_delay variable value to 0 (default is 2000 milliseconds).

      Reply
  14. Hugo Juggernaut
    Posted on May 22, 2011 at 19:19 Permalink

    I appreciate your work on this script – it will surely see some action on my pages. Elegant and functional!!!! It was nice of you to add the horizontal expansion upon request 🙂

    Thank you.

    TheAngel.com

    Reply
  15. shaker
    Posted on March 22, 2011 at 07:52 Permalink

    how do u add sub menus

    Reply
  16. maribel
    Posted on January 30, 2011 at 09:11 Permalink

    thanks for everything, I love your work

    Reply
  17. Roger
    Posted on January 19, 2011 at 16:39 Permalink

    Hi,
    is possible to implement your script for a horizontal floating togheter vertical floating?
    I have a variable windows width (from 2000 to 6000 px).
    thx

    Reply
    • malihu
      Posted on February 17, 2011 at 18:14 Permalink

      I’ll check it and let you know 😉

      Reply
  18. Lee
    Posted on January 8, 2011 at 19:36 Permalink

    I fixed it. I had to wrap the menu html portion in another div (fl_menuWrap) which is set to float right and then set #fl_menu to relative.

    MENU

    <a href=”#” rel=”nofollow”>An menu item</a>
    <a href=”#” rel=”nofollow”>A long menu item</a>
    <a href=”#” rel=”nofollow”>Item 3</a>
    <a href=”#” rel=”nofollow”>Another one</a>
    <a href=”#” rel=”nofollow”>A really, really long menu item</a>
    <a href=”#” rel=”nofollow”>Menu item 6</a>
    <a href=”#” rel=”nofollow”>And one more</a>
    <a href=”#” rel=”nofollow”>A tiny</a>

    <!– END fl_menu –>

    #fl_menuWrap{float:right; margin:0; width:40px;}
    #fl_menu{position:relative; margin:0; width:40px; z-index:9999; width:150px; height:50px;}

    Reply
    • malihu
      Posted on January 8, 2011 at 21:19 Permalink

      Great to see you fixed it 🙂

      Reply
  19. Lee
    Posted on January 8, 2011 at 19:29 Permalink

    Hi

    The page is behind a password. Can you send me your email address so I can send you the files. I am trying to have the menu remain floating but stick to its parent element in a fluid layout so it slides across the screen when the window is resized. When I change the CSS #fl_menu to float:right; it will stick but it disables the floating aspect of the menu. I have done this with another floating jQuery menu and it works so there might be something in your implementation. However I really like the menu aspect of your design.

    Thank You

    Reply
  20. Lee
    Posted on January 8, 2011 at 18:01 Permalink

    Hi

    Thanks for the fast response. Here are the three changes I made:

    #fl_menu{position:fixed; top:50px; left:0px; z-index:9999; width:150px; height:50px;}

    menuPosition=$(‘#fl_menu’).position().top;
    //FloatMenu();
    $fl_menu.hover(

    $(window).scroll(function () {
    //FloatMenu();
    });

    That did not work. Should I do something else?

    Thank you

    Reply
    • malihu
      Posted on January 8, 2011 at 18:27 Permalink

      That’s correct, it should work. Maybe I haven’t understand correctly what you need. Can you provide a link?

      Reply
  21. Lee
    Posted on January 8, 2011 at 15:39 Permalink

    Hi malihu

    Can this menu be made sticky so that it moves in a floating layout to remain constant in its placement relative to its surrounding content. Thanks again and really great work.

    Reply
    • malihu
      Posted on January 8, 2011 at 17:13 Permalink

      Hi Lee,

      It’s very easy to make it sticky by editing a couple of lines:
      a) Change its css position from absolute to fixed (position:fixed).
      b) Inside the script, comment or remove both FloatMenu(); function calls located in $(window).load and $(window).scroll.

      Reply
      • Anna
        Posted on January 18, 2011 at 00:19 Permalink

        Omg, this is fantastic, this is exactly what I wanted to do and I wasn’t figuring it out on my own; glad someone else asked and you so quickly responded. Thanks for sharing!! 😀

        Reply
  22. James
    Posted on December 18, 2010 at 16:53 Permalink

    Very nice menu.

    Can this be centered within a fixed width?

    Reply
    • malihu
      Posted on December 19, 2010 at 05:20 Permalink

      How exactly? Can you explain more?

      Reply
  23. Sam
    Posted on November 26, 2010 at 15:17 Permalink

    Amazing! Thank you so much!

    Reply
  24. Sam
    Posted on November 20, 2010 at 22:50 Permalink

    However i still have one little question (if thats okay): would it be possible to fold the menu horizontal instead of vertical? So, not dropping down, but dropping..err.. horizontal.

    Like so: {menu (hover)} –> home –> link –> link –> link etc..

    Does that make sense or am i pushing it too far?

    Reply
    • malihu
      Posted on November 25, 2010 at 10:17 Permalink

      Hi Sam,
      I have optimized the code and made an additional script that expands the menu horizontally (check the second demo). Post, demos and download files are updated 🙂

      Reply
  25. Sam
    Posted on November 20, 2010 at 18:20 Permalink

    @myowncomment

    Woops, got it to work! Apparently the error only shows on my local testing area, very strange…

    Thanks!

    Reply
    • malihu
      Posted on November 20, 2010 at 19:14 Permalink

      Cool 🙂

      Reply
  26. Sam
    Posted on November 20, 2010 at 13:59 Permalink

    Hi, thanks for your reply. I use IE8, included all plugins. My guess is that it conflicts with a jquery image gallery thats on the same page. By the way: i just tried using Firefox and that works fine. Any guesses why it doesnt work properly with IE8 (since people are still using IE, it has to work with that browser also).

    Reply
  27. Sam
    Posted on November 19, 2010 at 22:25 Permalink

    Hi, great job. Im trying to implement this into a website but i get a javascrip error in IE: “this property or method is not supported by this object”. Should i update jquery (using 1.3.1) or is there another method to get rid of this error?

    Reply
    • malihu
      Posted on November 20, 2010 at 01:59 Permalink

      What version of IE you get the error? Works fine on version 8.0.6001. Have you included the jquery.easing.1.3.js plugin?

      Reply
  28. Ronald
    Posted on October 26, 2010 at 23:22 Permalink

    Thanks a lot for this easy to use technique of floating menu.

    Reply
  29. Arie Zonshine
    Posted on August 17, 2010 at 23:28 Permalink

    You are doing a wonderful job here. Very useful, Thank you!
    🙂

    Reply
  30. e11world
    Posted on August 6, 2010 at 21:19 Permalink

    Will this work using jQuery 1.3.2 as well?

    Reply
    • malihu
      Posted on August 7, 2010 at 01:33 Permalink

      Definitely 😉

      Reply

Comments pages: 1 2 3

Post a comment

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