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 […]

From our monthly sponsor: Automate manual QA and catch visual bugs with Percy’s all-in-one visual testing and review platform.


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">
  <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=""/>

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:

    border-bottom:1px solid #ddd;
    background:#fff url(../images/nav.png) repeat-x center left;

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{
    margin:6px auto 0px auto;
#nav ul li{
    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{
    padding: 2px 4px;
    text-decoration: none;
    border:1px solid #ccc;
    cursor: pointer;
    background:transparent url(../images/overlay.png) repeat-x center left;
#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 span, #nav a.bottom span{
#nav 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{
#nav input[type="text"]{
    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:

    border:1px solid #ccc;
    background:#E8E9EA url(../images/search.png) no-repeat center center;

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() {
		var scrollTop = $(window).scrollTop();
		if(scrollTop != 0)
		function (e) {
			var scrollTop = $(window).scrollTop();
			if(scrollTop != 0){
		function (e) {
			var scrollTop = $(window).scrollTop();
			if(scrollTop != 0){

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!

Message from Testkingwe offer self study testking CISSP course foe designers and web developers download testking 350-030 guide and testking 642-436 tutorials to learn css and jquery for your web project.

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

Receive our bi-weekly Collective or official newsletter right in your inbox.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 44

Comments are closed.
  1. hah! I was just looking at his blog again recently and was like ” man I gotta implement this for fun somewhere”

    Good looks! Awesome work.

  2. Pingback: 5 Unique & Creative Navigation Menus with Free Source | Webmaster Index

  3. Great tutorial! I really like the smooth fade and ‘mac’ like effect it has. Added this to

  4. Hey!
    Great tut!
    Im not very good when it comes to java script, if i would like to make the menu fade when i scroll down and to the right what would i have to write to make that happen?

    Thanks for ur time and for the Tut!

  5. Pingback: 45 jQuery Navigation Plugins and Tutorials - Noupe

  6. Pingback: 45 jQuery Navigation Plugins and Tutorials | Google Reader | ????? ?????

  7. Pingback: 45 jQuery Navigation Plugins and Tutorials

  8. Pingback: Wordpress Blog Services - 45 jQuery Navigation Plugins and Tutorials

  9. Pingback: Online Marketing Connect — Blog — 45 jQuery Navigation Plugins and Tutorials

  10. Pingback: 45 jQuery Navigation Plugins and Tutorials | iDESIGN

  11. Pingback: 45 jQuery Navigation Plugins and Tutorials » IMvsMI blog

  12. Pingback: 45 jQuery Navigation Plugins and Tutorials - Interactive Middle East

  13. neat! the only issue i saw was that the menu faded out after you hit the go-to-bottom link, and wouldn’t fade back in unless you moved the mouse off and back on.

  14. hey, nyce post:)
    could you let me know is this the same way to add in wordpress theme 😕

  15. Nice. I had seen David Walsh’s top nav before. Glad to see someone decided to release a copy. I will probably use it in some upcoming projects.

  16. I will use this to show alerts on my website which I feel is the best way to use this. Thanks!