home

Jquery Overlay Menu

It is simple and most attractive thing, for example, if you browsing any website which has more content (like news portals or article websites) continuously you're reading the entire page at the point your at the bottom of the web page so again you want to go new tab if your using jquery menu no need to go to scroll stop of the page because jquery overlay menu flying on top of the page check this website menu also the same thing we are using for my website as demo and live check demo and download example code read line by line.

Colours Indicates the Method or concepts

Jquery Overlay Menu HTML code

Here is html code of jquery overlay menu, we have div element with class (class="nav-container"), it will work like container to hold all tabs, div has three list tags (li). list tags have some different name like (Home, About, Download, Contact) when ever user use to scroll to bottom of the page that time main div(nav-container) carry all the tabs fly on the air top of the web page.

<div class="nav-container">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

Jquery Overlay Menu code

This jquery code for Overlay menu, when ever the scroll happened 100 pixel from the top, that time menu will overlay on the page, when the browser (window) scroll from top 100 pixel class will replace to f-nav instead of nav-container other wise means you scroll back to same place remove class f-nav (f-nav) reset main class(nav-container).

var $ = jQuery.noConflict();
$("document").ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$(".nav-container").addClass("f-nav");
}else{
$(".nav-container").removeClass("f-nav");
}
});
});

Jquery Overlay Menu Css

This is all css code for Overlay menu, which classes containing with nav-container that all is just normal css for basic, most important class in this css class is f-nav, this class overlay the menu on top with using like using z-index adding fixing menu using position (position:fixed;) from top 0pixel (top:0px) this all are most important properties for jquery overlay menu.

.//Normal css for menu
.nav-container{
width:1024px;
background: #ff6459;
}
.nav-container ul li a{
color:#fff;
float:left;
padding:4px 12px;
}
.nav-container ul li a:hover{
background:#000;
color:#FFFFFF;
padding:4px 12px;
border-right:1px solid #ce574e;
}
// This class is very important for this menu
.f-nav{
z-index: 9999;
position:fixed;
top: 0;
width:1024px;
}

Hi if you want to download jquery Overlay menu you can use download button other wise click on demo page for demo.