Applying Jquery effects to navigation menu

JavaScript
1

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();
2

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.

3

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();
4

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

5

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?

6

That’s cool. I should have been more explicit :slight_smile:

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.

7

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.

8

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/544993/official-way-to-ask-jquery-wait-for-all-images-to-load-before-executing-somethin

9

Thanks. It is working now.