jQuery floating menu
A simple navigation menu that “follows” page scrolling and expands on mouse over, made with css and jquery.
download Get all files related to post
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
Donating helps greatly in developing and updating free software and running this blog
Hi,
Your floating menu does exactly what I would like but is not working on my page
I’ve just copied your code, not personalysed the menu entries yet
https://www.rudyv.be/Aquarium/RVRT/RVRTtest.php
Can you have a look ?
Thanks
Your demo works fine on your site but not on mine
https://www.rudyv.be/Aquarium/RVRT/jquery-floating-menu.html
I embedded an image in this floating div. How can I add a CLOSE button to this div so that user can close if not interested??
Love it! Thank you. Nice clean code and easy to implement on any website.
hi
it’s really helpful
thanks
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
Is it possible to create drop down menus within the floating menu? Would it just consist of a nav tag w/ multiple list tags?
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