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


86 Comments

Post a comment

Comments pages: 1 2 3

  1. aljo
    Posted on May 10, 2016 at 14:32 Permalink

    hi

    it’s really helpful
    thanks

    Reply
  2. Frank
    Posted on March 31, 2016 at 01:49 Permalink

    Hi

    I know this post is old, but I hope someone can help. The menu works great on desktops, but it does not close one mobile devices. Does anyone know what needs to be changed/added to get the menu to close once a user wants to close the menu (either by clicking somewhere else on the screen or by a time out?

    thanks

    Reply
  3. Thomas
    Posted on April 22, 2015 at 17:20 Permalink

    Is it possible to create drop down menus within the floating menu? Would it just consist of a nav tag w/ multiple list tags?

    Reply
  4. Rajavenkateshwaran
    Posted on July 15, 2014 at 20:59 Permalink

    Hey mate thanks for this wonderful floating menu script. I tried embedding a live chat inside your floating menu div and it worked perfect for me. Thanks again

    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