Fixed Fade Out Menu: A CSS and jQuery Tutorial

Inspired by David Walsh’s top navigation bar that gets semi-transparent when you scroll down the page, I decided to create a tutorial out of that idea.

The aim is to have a fixed navigation that follows the user when he scrolls, and only subtly showing itself by fading out and becoming almost transparent. When the user hovers over it, the menu then becomes opaque again.

Inside of the navigation we will have some links, a search input and a top and bottom button that let the user navigate to the top or the bottom of the page.

Ok, let’s start.

1. The HTML

The markup is pretty simple: we have a div with a list inside. The list items will be our links, the search input and the arrow buttons:

<div id="nav">
 <ul>
  <li><a class="top" href="#top"><span></span></a></li>
  <li><a class="bottom" href="#bottom"><span></span></a></li>
  <li><a>Link 1</a></li>
  <li><a>Link 2</a></li>
  <li><a>Link 3</a></li>
  <li><a>Link 4</a></li>
  <li><a>Link 5</a></li>
  <li><a>Link 6</a></li>
  <li class="search">
   <input type="text"/>
   <input class="searchbutton" type="submit" value=""/>
  </li>
 </ul>
</div>

The links with the classes top and bottom are the arrows that will lead the user to the beginning or the end of the page. The hrefs in these links reference to some elements having the id top and bottom. Make sure, you reference the right elements in your page. The bottom could, for example, be your comments section in you WordPress blog. In that case you would need to refer to #comments instead.

The span of the top and bottom links will contain the actual arrows as background images.
The search button which is a submit button will have no value since we want to give it a background image and no text.

Let’s look at the style now.

2. The CSS

Let’s first define the main navigation div:

#nav{
    height:35px;
    border-bottom:1px solid #ddd;
    position:fixed;
    top:0px;
    left:0px;
    right:0px;
    background:#fff url(../images/nav.png) repeat-x center left;
    z-index:999999;
}

The navigation will always stay right at the top of the page because we “glue” it there with position:fixed and top:0px. The background image will be a semi-transparent button-like background with a slight 3D effect. Since it is almost transparent, you can try to use different background colors instead of white (#ffffff).

We set the z-index very high since we don’t want any other absolute element to be on top of our navigation.

The unordered list and its list items will have the following style:

#nav ul{
    height:25px;
    list-style:none;
    margin:6px auto 0px auto;
    width:600px;
}
#nav ul li{
    display:inline;
    float:left;
    margin:0px 2px;
}

The unordered list has a fixed width of 600px and will be positioned in the center of the navigation. Centering a relatively positioned element can be achieved by stating that the left and right margin is auto.

The list elements shall be aligned next to each other. We define that with display:inline. We make them floating left because we want to apply a margin here, creating some space between the items.

The general style of all the link elements will be the following:

#nav a{
    font-size:11px;
    font-weight:bold;
    float:left;
    padding: 2px 4px;
    color:#999;
    text-decoration: none;
    border:1px solid #ccc;
    cursor: pointer;
    background:transparent url(../images/overlay.png) repeat-x center left;
    height:16px;
    line-height:16px;
}
#nav a:hover{
    background:#D9D9DA none;
    color: #fff;
}

Although it is not really necessary to state that the cursor should be of type pointer here since it is a link element, I often define that because in some browsers the pointer will only appear when there is an “href”. That might not always be the case and so it is always better to define it again in the CSS if one is not sure how link elements will be used.

The links will have a semi-transparent background image similar to the one for the navigation. Again, you can simply define a color for the background or experiment with combinations of these. The overlay image tints any background color in a light gray.

When hovering over the link element, we remove the background image and change the background color.

Let’s look at the style of the two arrow links:

#nav a.top span, #nav a.bottom span{
    float:left;
    width:16px;
    height:16px;
}
#nav a.top span{
    background:transparent url(../images/top.png) no-repeat center center;
}
#nav a.bottom span{
    background:transparent url(../images/bottom.png) no-repeat center center;
}

Now we define the style for the list element that contains the search and the text input:

#nav ul li.search{
    float:right;
}
#nav input[type="text"]{
    float:left;
    border:1px solid #ccc;
    margin:0px 1px 0px 50px;
    padding:2px 2px 2px 2px;
}

Generally, with specifying input[type=”text”] you make sure that you will not change the style of all other inputs. That is a good way of specifying the design of a certain type of inputs.
The margin (TOP RIGHT BOTTOM LEFT) to the left will be a bit more because we want to separate the other links from the search.

The submit button will have the following style:

input.searchbutton{
    border:1px solid #ccc;
    padding:1px;
    cursor:pointer;
    width:30px;
    height:22px;
    background:#E8E9EA url(../images/search.png) no-repeat center center;
}
input.searchbutton:hover{
    background-color:#D9D9DA;
}

This is a good example of when to use a class instead of specifying the style for e.g. input[type=”submit”]. There might be many submits in your page, but this one is very special and no other submit will look like it except the search submit.
This input will not have any value as you saw in the HTML part. Instead, we will have an icon as background image.

And that’s all the style! Now let’s add some rocking JavaScript:

3. The JavaScript

What we want to do now, is to leave the menu as it is, whenever we are at the top of the page. When we start scrolling, we want the menu to fade out and to be almost transparent. When we hover over it, it should appear opaque again. All this we define in the following lines of JavaScript:

$(function() {
	$(window).scroll(function(){
		var scrollTop = $(window).scrollTop();
		if(scrollTop != 0)
			$('#nav').stop().animate({'opacity':'0.2'},400);
		else	
			$('#nav').stop().animate({'opacity':'1'},400);
	});
	
	$('#nav').hover(
		function (e) {
			var scrollTop = $(window).scrollTop();
			if(scrollTop != 0){
				$('#nav').stop().animate({'opacity':'1'},400);
			}
		},
		function (e) {
			var scrollTop = $(window).scrollTop();
			if(scrollTop != 0){
				$('#nav').stop().animate({'opacity':'0.2'},400);
			}
		}
	);
});

So, if we are not at the top of the page, scrolling the window will change the opacity value. That effect takes 400 milliseconds (adapt to your preferred time). If we are at the top of the page, the opacity will have the value 1 which means that the element will be opaque.

When hovering over the element, we make it opaque and when we move the mouse out, we will make it more transparent again (if we are not at the top).

And that’s all! Enjoy!