HTML
This contains our menu HTML element, this is just a simple HTML UL
tag to make our menus but if you already have one then use that instead.
NOTE:
If you’re going to use your old menus make sure to replace the class in JS code.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<div class="nav-container">
<div class="nav">
<ul>
<li><a href="">Home</a></li>
<li><a href="">CSS</a></li>
<li><a href="">PHP</a></li>
<li><a href="">SEO</a></li>
<li><a href="">jQuery</a></li>
<li><a href="">Wordpress</a></li>
<li><a href="">Services</a></li>
</ul>
<div class="clear"></div> /*clear floating div*/
</div>
</div>
|
CSS
To make our menu list horizontally we need to add CSS code.
|
|
.nav-container{ background: url('images/nav_bg.jpg') repeat-x 0 0;}
.f-nav{ z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;} /* this make our menu fixed top */
.nav { height: 42px;}
.nav ul { list-style: none; }
.nav ul li{float: left; margin-top: 6px; padding: 6px; border-right: 1px solid #ACACAC;}
.nav ul li:first-child{ padding-left: 0;}
.nav ul li a { }
.nav ul li a:hover{ text-decoration: underline;}
|
We set the z-index very high since we don’t want any other absolute
element to be on top of our navigation and add with in percent to center
menu while scrolling.
Javascript
This small JS code contains the main functions of our fixed scroll menu.
1
2
3
4
5
6
7
8
9
10
11
12
13
|
jQuery("document").ready(function($){
var nav = $('.nav-container');
$(window).scroll(function () {
if ($(this).scrollTop() > 136) {
nav.addClass("f-nav");
} else {
nav.removeClass("f-nav");
}
});
});
|
So, if we are on the top less than 136 height in pixel the menu is in
the original position and add f-nav CSS class when greater than 136px
height or add f-nav CSS class on scroll, where the top page greater
than 136px height.
That’s it, its easy right? Enjoy!
No comments:
Post a Comment