Sticky MenuBar
- Login
-
Remember me
-
- Mega menu
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis vestibulum nunc non porta. Nam ligula mi, aliquet vel dapibus sed, porttitor sit amet purus. Nunc eget interdum arcu. Donec tincidunt pretium libero, iaculis malesuada dolor condimentum vitae. Suspendisse et arcu at risus ullamcorper aliquet et sed nisi. Nullam venenatis porttitor eros, ac auctor nunc eleifend et. Pellentesque magna risus, volutpat a euismod at, accumsan vel erat. Nam nec gravida augue. Cras augue magna, ornare vel imperdiet eget, semper sed enim.
- More menues
-
- Follow me
-
- Not a menu
Scroll down this page, meanwhile check the blue menubar under the header!
Tired of 'sticky header' plugins that make that annoying 150 height header stay always on top? Here it's the solution: Sticky MenuBar. 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 5 files:
- js/jquery-1.5.1.min.js
- stickybar/jquery.stickymenu.js
- stickybar/stickymenu.~color~.css
- stickybar/arrow-right.png
- stickybar/arrow-down.png
There are 6 available colors to choose. Blue, green, red, yellow, pink and dark. Of course you can make your own CSS templates, which is probably the best, for I'm not very good with CSS.
Once you have found these 5 files (the 2 .js files, one of the color .css files and the two images), the first thing you have to do is copy them within your web documents, inside a folder called sticky. 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.blue.css" />
<script type="text/javascript" src="stickybar/jquery-1.5.1.min.js"></script>
<script type="text/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.
Example #1
<div class="header">
... header stuff here ...
</div>
<div class="menubar">
<ul class="menu_ul"> ... menubar stuff here ...</ul>
</div>
Example #2
<div class="header">
... header stuff here...
<ul class="menubar"> ... menubar stuff here ... </ul>
</div>
In either case, what you want to do is to turn '.menubar' as the floating object, but in the 1st example, the floating object is not the menu object. In the second example, floating object and menu object are the same <ul>. So, once again, between your <head> and </head> tags you need to include the script code:
<script language="javascript" type="text/javascript">
$(document).ready(function() {
/* For example #1 */
$('.menu_ul').stickyMenubar({
floatingDiv: $('.menubar'),
});
/* For example #2 */
$('.menubar').stickyMenubar({
floatingDiv: $('.menubar'),
});
});
</script>
Customization
The plugin accepts the following options.
floatingDiv: the DOM element to be used as the floating menu
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
These last 3 callback functions are very usefull for adding/deleting some margin-bottom from the header (in case all your content goes up when the options menu becomes "position:relative"). Also very usefull for showing or hiding options depending on the place of the page the visitor is watching (scroll up to the header to see the example on the actual menubar)