Forums

Luminated

I'm trying to get my navbar fade in and fade out. I got the fade in working great, but I can't figure out how to have it gracefully fade out when the mouse leaves the nav area or moves to the next nav item. Any help?

http://www.econesthomes.com/

jQuery:


<script type=\"text/javascript\"> 
jQuery(document).ready(function() {
			jQuery('.main-nav ul li').hover(function(){
				jQuery(this).find('ul.children').animate({opacity:1},{queue:false,duration:500});
			}, function(){
				jQuery(this).find('ul.children').animate({opacity:0},{queue:false,duration:500});
			});
		});
</script>

The HTML is quite beefy and its just a two tiered navigation using nested UL's, so best to probably just view source or use Firebug.

jamy_za

Try this:

<script type=\"text/javascript\">
jQuery(document).ready(function() {
         jQuery('.main-nav ul li').hover(function(){
            jQuery(this).children('ul.children').fadeIn();
         }, function(){
            jQuery(this).children('ul.children').fadeOut();
         });
      });
</script>

Luminated

Thank you...that did work as far as the effect went, but for some reason the fadeIn and fadeOut function causes the 'ul.children' to act very strangely. When the mouse leaves, the sub links become styled like the top level links and I get an odd horizontal scroll bar across the page, which tells me something is expanding the page somehow! Very odd.

jamy_za

Hmmm, try this:

<script type=\"text/javascript\">
jQuery(document).ready(function() {
         jQuery('.main-nav ul li').hover(function(){
            jQuery(this).children('ul.children').fadeTo(400, 0);
         }, function(){
            jQuery(this).children('ul.children').fadeTo(400, 1);
         });
      });
</script>

noahgelman

Should probably throw a .stop() in as well

<script type=\"text/javascript\">
jQuery(document).ready(function() {
         jQuery('.main-nav ul li').hover(function(){
            jQuery(this).children('ul.children').stop().fadeTo(400, 0);
         }, function(){
            jQuery(this).children('ul.children').stop().fadeTo(400, 1);
         });
      });
</script>

Luminated

We're getting close! But now the submenu simply fades in and out without staying. I setup a test page:

http://www.econesthomes.com/wp-content/ ... t-nav.html

Thanks for the help so far guys, this is enlightening! :)

jamy_za

The testing page actually helps quite a bit :lol:
Try swapping the 1 and 0 around (I made a mistake last time), it should be:

<script type=\"text/javascript\">
jQuery(document).ready(function() {
         jQuery('.main-nav ul li').hover(function(){
            jQuery(this).children('ul.children').stop().fadeTo(400, 1);
         }, function(){
            jQuery(this).children('ul.children').stop().fadeTo(400, 0);
         });
      });
</script>

Luminated

Yes yes, almost there! I figured that out actually shortly after I posted this. The only last little hangup is Google Chrome and IE (of course) cause some crazy issues. When the mouse leaves the nav, the sub links inherit the styling of the top level links. In IE in particular, the sublinks never dissapear, they just stay visible. :(

noahgelman

IE has some opacity issues, and perhaps chrome does as well. How does this work?

<script type=\"text/javascript\">
jQuery(document).ready(function() {
         jQuery('.main-nav ul li').hover(function(){
            jQuery(this).children('ul.children').stop().fadeIn(400);
         }, function(){
            jQuery(this).children('ul.children').stop().fadeOut(400);
         });
      });
</script>

Luminated

Still no cigar...also getting that strange styling issue in Firefox too...

http://www.econesthomes.com/wp-content/ ... t-nav.html

jamy_za

Yeah IE 6 and 7 have some major problems with perfectly fine javascript.

What I would do is have your javascript run in an if statement. So if it's less or equal to IE 7 do this otherwise do that.

if($.browser.msie && $.browser.version < 8){
    //insert ie 6 and 7 code
}
else {
 // insert other browser code
}

I'm pretty sure people will be shouting at me for being lazy but I just don't care enough to waste my time to develop for IE 6 and 7. They can live without the pretty fade and slide effects. (Instead of using fadeOut() and fadeIn() or slideUp() and slideDown() I would basically replace that with show() and hide() for the IE6 and 7 .js)

Luminated

I totally agree, but I can't get this to work right even in Firefox and Chrome. :/ Closest I came is this:

http://www.econesthomes.com/

It doesn't fade out, which is fine and in some ways is even a nice balance, but it doesn't degrade at all if you have Javascript turned off, which concerns me, although I think in some ways is more ridiculous than using IE6. But it works.

It could be my CSS, but I don't understand why the styling issues occur only when I use fadeIn and fadeOut/fadeTo.

I know its possible and maybe simple, but not as I originally thought, hence the topic title. :)

jamy_za

I'm about to write an article on multi levelled CSS nav menus. - They work on IE 7(A bit buggy apparently, but I haven't run into any problems yet), and IE 8 and other browsers.

Here's what you could do:
[list]Have it degrade without .js by not having sub menu's at all.[/list:u]
[list]Have it degrade by having the CSS nav sub menu (which won't work in IE 6 though, so that would have no sub menu) - You could do this by having the CSS nav menu styled for #nav-css and then when the .js kicks in it renames it to #nav-js so the styling changes.[/list:u]

I think the styling issues occur because in some cases the js sets the opacity to 0 (object is still "there") and in other cases the display is set to none, which kind of removes the element.

treehouse : what would you like to learn today?

Forums

Simple, but not so simple it seems....