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: Create your beautiful portfolio website with Squarespace. Start your free trial.Advertisement

fixedFadeOutMenu

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!

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.

http://www.codrops.com

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. Cool tutorial. I remember when google implement this and though it was a nice clean effect. Thanks for the posts. I’m looking forward to playing around with it.

  2. Hi there,
    I visited tympanus.net and i found really great tutorials. i tried few

    I also treid this one at my site but getting a prb.. prb is that my icons goes back to my other images.. I have inserted all image through css in my theme and icon of fadeout menu as well.. please review my site and tell me what do I do..

    Even though the css for fadeout menu, im using that at top in my theme and later others but I didnt solved my prb… you can see the prob in reader and when i scroll same happen when icom moves at rating stars 🙁

    • Hello Waqas,
      I can see that your menu gets hidden at the top, that’s because your nav element is one of the first in the html. Add this line to the CSS in order to make sure, the navigation is always on top of other elements
      z-index:999999;

      I hope it helps! Cheers, ML

  3. Thanks Mary,
    I tried your method, I’ve added
    z-index:999999; at the end of
    style.css (fadeout menu)
    but nothing happned 🙁

    I need to use this menu because of lack of space for menu…. So I think I will leave it as it is 🙁

    • Hi Waqas,
      you need to add the z-index:999999; line to the style definition of the #nav. Like this:
      #nav{
      height:35px;
      border-bottom:1px solid #ddd;
      position:fixed;
      top:0px;
      left:0px;
      right:0px;
      z-index:999999;
      }
      and then it will work. In the style.css the #nav item is the first one. I hope it helps! Cheers, ML

  4. Hi, this is a great little effect. But one thing I’ve noticed is that upon re-hover in IE8, the rollovers do not work.

    This is obviously another IE bug, but have you or can you think of any fix?

    Thanks

  5. I would like to have this feature in the bottom of my page, but when using
    position:fixed;
    bottom:0px;

    in IE8 the menu is not fixed in bottom only in FF.
    Is that prob to solve?

  6. Nice, but I need a menu where you hover one link, and the rest of the menu fades out. Any ideas or how to modify this script? Thanks

  7. I believe the Position: Fixed does not work in most versions of IE, I have not really read the Javascript part of the code above but it would be cool to add an IE hack for Position: Fixed to this tut.

  8. @INDIANA WEBDESIGNER

    You can easily do that using Jquery.

    I can’t post the code here due to time but i think you’ll find something similar on Smashing Magazine.

    Run a search or on Css-Tricks.com

  9. I love your work. I watched the demo on my mac with safari and firefox but when I viewed it on my iPad the menu scrolls off the page?! Has anyone else found this bug?

  10. Great tutorial!

    The only gripe is, like Fil said, if you click a button you have to move off the menu and on again for it to fade in. Has anyone worked out the little extra code to fix this? I’m looking to add it to my new site and would like to remove this bug if possible!

    Thanks!!

  11. As soon as I asked I fixed it! Typical. If anyone is interested here is the extra code to add to the javascript:

    $(‘#nav’).mouseover(
    function(e) {
    $(‘#nav’).stop().animate({‘opacity’:’1′},400);
    }
    );

  12. http://www.handbagsonsales.com

    Chanel Handbags

    Gucci Handbags Gucci 2010 New Handbag

    Hermes Handbags

    Balenciaga Handbags

    Bottega Veneta Handbags

    Chloe Handbags

    Coach Handbags

    Dior Handbags

    Fendi Handbags

    Dolce & Gabbana Handbags

    Hermes Handbags

    Versace Handbags

    Prada Handbags

  13. Hi, this is a great little effect. But one thing I’ve noticed is that upon re-hover in IE8, the rollovers do not work.

    This is obviously another IE bug, but have you or can you think of any fix?

    Thanks

    is there any bugfixing to solve this problem?

  14. The only gripe is, like Fil said, if you click a button you have to move off the menu and on again for it to fade in. Has anyone worked out the little extra code to fix this? I’m looking to add it to my new site and would like to remove this bug if possible!

  15. thank you for this beautiful theme and also for making web publishing possible for design-challenged people like me!

  16. i am using platform pro theme for wordpress

    i am tried to add this fixed fade out manu but i am not get success because i dont have kowladge to how to add it

    firstly i added following code

    in header



    Link 1
    Link 2
    Link 3
    Link 4
    Link 5
    Link 6

    $(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);
    }
    }
    );
    });

    now i am not getting where to add

    followig code

    #nav{
    height:35px;
    border-bottom:1px solid #ddd;
    position:fixed;
    top:0px;
    left:0px;
    right:0px;
    background:#ffffff url(http://www.gundya.com/wp-content/uploads/nav.png) repeat-x center left;
    z-index:999999;
    }

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

    #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(http://www.gundya.com/wp-content/uploads/overlay.png) repeat-x center left;
    height:16px;
    line-height:16px;
    }
    #nav a:hover{
    background:#D9D9DA none;
    color: #fff;
    }

    #nav a.top span, #nav a.bottom span{
    float:left;
    width:16px;
    height:16px;
    }
    #nav a.top span{
    background:transparent url(http://www.gundya.com/wp-content/uploads/top.png) no-repeat center center;
    }
    #nav a.bottom span{
    background:transparent url(http://www.gundya.com/wp-content/uploads/bottom.png) no-repeat center center;
    }

    #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;
    }

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

    please tell me on which file and with step by step

    THANKS FOR GREAT WORK !