Tired of 'sticky header' plugins that make that annoying 150 height header stay always on top when what you want is only for the menubar to stay on top?

Here is when Sticky MenuBar comes into play. Just select what DOM object is your <ul> based menubar in, and the script will make it sticky on top of your screen whenever your visitors scroll your page. Once you scroll back up, it will stop at the right position.

The plugin also works as a Multi Level dropdown Mega Menu, and comes in 6 different CSS color templates for you to use.

Installation

Sticky MenuBar plugin consists of basically 8 files:

  • js/jquery-1.5.1.min.js
  • js/jquery.hoverIntent.js
  • stickybar/jquery.stickymenu.js
  • stickybar/stickymenu.%color%.menubar.css
  • stickybar/stickymenu.%color%.inner_menu.css
  • stickybar/arrow-right.png
  • stickybar/arrow-down.png
  • img/fbuttons_bg.png (for stripped templates)

There are 10 available solid colors to choose from. Blue, brown, dark, green, red, orange, yellow, pink, silver and white. There are also 5 stripped menubar templates. Blue, brown, dark, red and pink. You may also choose between 2 inner_menu templates: dark and silver. Of course you can make your own CSS templates.

Once you have found these 8 basic files, the first thing you have to do is copy them within your web documents. Then include the js and css files between <head> and </head> tags inside your html document. This is how it should look like:

<link rel="stylesheet" type="text/css" href="stickybar/stickymenu.red.menubar.css" />
<link rel="stylesheet" type="text/css" href="stickybar/stickymenu.silver.inner_menu.css" />
<script type="text/javascript" language="javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.hoverIntent.js"></script>
<script type="text/javascript" language="javascript" src="stickybar/jquery.stickymenu.js"></script>

Next thing to do is to decide where is your menubar (in case you are using your very own menubar). Usually menubars are simple <ul> in the header, but sometimes these menubars are included in their own <div>. To make it a little more visual, I will write some examples.

Installing 'sticky' on a UL

In the case your menubar is a UL object within your header DIV, you can make this Unordered List float independent from your haeder. To do this, you have to call stickyMenubar on the UL class or id.

<script language="javascript" type="text/javascript">
    $(document).ready(function() {
        $('.menu_ul').stickyMenubar();
    });
</script>
<div class="header">
    ... header stuff here ...
</div>
<div>
    <ul class="menu_ul"> ... menubar stuff here ...</ul>
</div>

Installing 'sticky' on a DIV

In the case your header and menubar are 2 separate DIV objects, you can make your menubar float independently from the header by just giving stickyMenubar the target floatingDiv parameter.

<script language="javascript" type="text/javascript">
    $(document).ready(function() {
        $('.menu_ul').stickyMenubar({
            floatingDiv: $('#optionbar')
        });
    });
</script>
<div class="header">
    ... header stuff here ...
</div>
<div class="optionbar">
    <ul class="menu_ul"> ... menubar stuff here ...</ul>
</div>

Customization

floatingDiv the DOM element to be used as the floating panel.
floatingDivBackground (true or false) sets if the background used on the actual menu, is going to be used on the floating element too.
onScroll (callback) function executed when the header is visible and the options menu sticks to it's original position.
onLeaveTop (callback) function executed when the header dissapears from the screen, and the menu becomes sticky to the top of the screen.
megaMenu (true or false) sets if the <ul> stickyMenubar is being called on acts as a mega menu or not.
sensitivity hoverIntent sensitivity. Sets how sensible the menu options are to the mouse movement.
padding this number should match the right and left padding added the 'li' elements on the css, so the javascript calculations of the menu match the css style. Default CSS and JS paddings are 5px.
container_width default 960. It gives the script the exact width of the container in wich the menu is being run. This is so the 'mega menu' option can stretch to all the page width.