Applying Jquery effects to navigation menu

[Yarik]

Hi,

I made a dropdown menu using html and css and it is working, then I tried to apply some nice effects to my menu and the animation works but only first time when I hover a menu item. Please could you give me any advice. Thanks.
my website

var menu = function() {
            this.menuLi = $('.menu ul li').children('ul').hide().end();
            this.init();
        };

        menu.prototype = {
            
            init : function() {
                this.setMenu();
            },

            setMenu : function() {
                this.menuLi.hover(function() {
                    //mouseover
                    $(this).find('> ul').stop(true, true).slideDown(250);
                }, function() {
                    //mouseout
                    $(this).find('> ul').stop(true, true).fadeOut(200);
                });
            }
        }

        new menu();

[Pullo]

Hi,

I can reproduce your error on Chrome and FF. Maybe something is being cached?
Could you provide a boiled down version of the menu bar (with the relevant css and js, but minus the rest of the page).
Then I could have a look and see if I can help.

[Yarik]

Hi,

I can reproduce your error on Chrome and FF. Maybe something is being cached?
Could you provide a boiled down version of the menu bar (with the relevant css and js, but minus the rest of the page).
Then I could have a look and see if I can help.

Thanks for your reply. It works perfect in FF, but only when you hover first time in Safary, Chrome and Opera.

CSS

.menu {
	width: 100%;
	height: 44px;
	background: url('/wp-content/themes/cenr/img/menu-bg.png') no-repeat scroll 0 0 transparent;
}
.menu ul {
	list-style: none;
	margin: 0;
	padding: 9px 0 0 20px;
}
.menu .current_page_item {
	background: #3e403f;
	border: 1px solid #373838;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
.menu .current_page_item a {
	padding: 4px 14px;
}
.menu .current_page_item a:hover {
	border: none;
}
.menu ul li, .menu ul li a {
	float: left;
}*
.menu ul li {
	position: relative;
}
.menu ul li a {
	font-size: 12px;
	color: #fff;
	margin: 0 3px;
	padding: 5px 15px;
	text-decoration: none;
	text-transform: uppercase;
	display: block;
	text-shadow: 0 1px 0 #000;
}
.menu ul li a:hover {
	padding: 4px 14px;
	background: #3e403f;
	border: 1px solid #373838;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
.children .current_page_item {
	border: none;
}
.menu ul li ul a:hover {
	padding: 4px 14px;
	background: #535554;
}
.menu ul li ul {
	padding: 0;
	margin: 0;
	position: absolute;
	left: 0;
	top: 100%;
	display: none;
	background-color: #3e403f;
	border: 1px solid #373838;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
.menu li:hover > ul {
	display: block;
}
.menu ul li ul li, .menu ul li ul li a {
	float: none;
}
.menu ul li ul li {
	_display: inline;
}
.menu ul li ul li a {
	width: 120px;
	display: block;
}*
.menu ul li ul li ul {
	display: none;
}
.menu ul li ul li:hover ul {
	display: block;
	left: 100%;
	top: 0;
}

JS

// Top menu

        var menu = function() {
            this.menuLi = $('.menu ul li').children('ul').hide().end();
            this.init();
        };

        menu.prototype = {
            
            init : function() {
                this.setMenu();
            },

            setMenu : function() {
                this.menuLi.hover(function() {
                    //mouseover
                    $(this).find('> ul').stop(true, true).slideDown(250);
                }, function() {
                    //mouseout
                    $(this).find('> ul').stop(true, true).fadeOut(200);
                });
            }
        }

        new menu();

[Pullo]

Hi,

The problem is the following line in your JavaScript:

$(this).find('> ul').stop(true, true).fadeOut(200);

Change it to:

$(this).find('> ul').stop(true, true).hide();

BTW, this is what I meant as a boiled down example, something that'll allow me to reproduce your issue easily:

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<title>CENR | The Centre for Energy and Natural Resources</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="http://webthesis.yariksalmin.com/wp-content/themes/cenr/style.css" />
</head>

<body>
<div class="menu">
  <ul>
    <li class="page_item page-item-2 current_page_item"><a href="http://webthesis.yariksalmin.com/">Home</a></li>
    <li class="page_item page-item-5"><a href="http://webthesis.yariksalmin.com/we-are/">We are</a></li>
    <li class="page_item page-item-7"><a href="http://webthesis.yariksalmin.com/we-do/">We do</a>
      <ul class='children'>
        <li class="page_item page-item-58"><a href="http://webthesis.yariksalmin.com/we-do/workshops/">Workshops</a></li>
        <li class="page_item page-item-83"><a href="http://webthesis.yariksalmin.com/we-do/education/">Education</a></li>
        <li class="page_item page-item-86"><a href="http://webthesis.yariksalmin.com/we-do/consulting/">Consulting</a></li>
        <li class="page_item page-item-88"><a href="http://webthesis.yariksalmin.com/we-do/projects/">Projects</a></li>
      </ul>
    </li>
  </ul>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
var menu = function() {
  this.menuLi = $('.menu ul li').children('ul').hide().end();
  this.init();
};

menu.prototype = {
  init : function() {
    this.setMenu();
  },
	
  setMenu : function() {
    this.menuLi.hover(function() {
      //mouseover
      $(this).find('> ul').stop(true, true).slideDown(250);
    }, function() {
      //mouseout
     $(this).find('> ul').stop(true, true).hide(); 		
    });
  }
}

new menu();
</script>
</body>
</html>

HTH

[Yarik]

I see what you mean, but you said css and js thats why I put all that stuff together. Yes it is working now. Why does fadeOut cause a problem?

[Pullo]

I see what you mean, but you said css and js thats why I put all that stuff together.

That's cool. I should have been more explicit

No idea why fadeout causes the problem. My guess is that there is some caching going on in Chrome and co. but I've no idea where.
At least it's working now.

[Yarik]

Thanks. You might noticed that effect with factories. Sometimes maybe because my hosting is really rubbish I can see images are being animated before they actually loaded. How can I wait until they are loaded and then do the animation? I suppose the problem is that I append images to the DOM.

[Pullo]

I can see images are being animated before they actually loaded. How can I wait until they are loaded and then do the animation?

With jQuery, you use $(document).ready() to execute something when the DOM is loaded and $(window).load() to execute something when all other things are loaded as well, such as the images.

There is a good answer to this question on Stack Overflow: http://stackoverflow.com/questions/5...uting-somethin

[Yarik]

Thanks. It is working now.