SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2012
    Location
    UK
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Applying Jquery effects to navigation menu

    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

    Code:
    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. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,009
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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. #3
    SitePoint Enthusiast
    Join Date
    Jun 2012
    Location
    UK
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    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

    Code:
    .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

    Code:
    // 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. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,009
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    The problem is the following line in your JavaScript:

    Code:
    $(this).find('> ul').stop(true, true).fadeOut(200);
    Change it to:

    Code:
    $(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:

    HTML Code:
    <!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. #5
    SitePoint Enthusiast
    Join Date
    Jun 2012
    Location
    UK
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,009
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by Yarik View Post
    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.

  7. #7
    SitePoint Enthusiast
    Join Date
    Jun 2012
    Location
    UK
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,009
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by Yarik View Post
    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

  9. #9
    SitePoint Enthusiast
    Join Date
    Jun 2012
    Location
    UK
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. It is working now.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •