Forums

soap

here is the site, it's the top nav. http://gilleardmarketing.com/index.php

On the top nav when you hover over Internet Marketing that's the effect I want but I can't figure out how to make it stay down depending on where my mouse is. I want it to be able to click on the links.

Here is the code:



<div id=\"topnav\">
    <ul id=\"menu\">
        <li><a href=\"index.php\" class=\"logo\"><span></span></a></li>

        <li><a href=\"index.php\" class=\"home\"><span></span></a></li>
        <li><a href=\"about.php\" class=\"about\"><span></span></a></li>
        
        <li><a href=\"http://www.gm-research.com\" class=\"marketresearch\"><span></span></a></li>
        <li><a href=\"strategy.php\" class=\"strategy\"><span></span></a></li>
        <li><a id=\"internetmarketing\" class=\"internetmarketing\" href=\"internet-marketing.php\"><span class=\"internetmarketingSpan\"></span></a></li>
        
        <li><a href=\"traditional-marketing.php\" class=\"printmarketing\"><span></span></a></li>
        <li><a href=\"testimonials.php\" class=\"testimonials\"><span></span></a></li>
        <li><a href=\"contact.php\" class=\"contact\"><span></span></a></li>
    </ul>

    
    
        	<ul class=\"menu_body\" id=\"menu_body\">
                <li><a href=\"internet-marketing.php\">Internet Marketing Program</a></li>
                <li><a href=\"website-marketing-upgrade.php\">Website Marketing Upgrade</a></li>
                <li><a href=\"internet-marketing-mgmt.php\">Internet Marketing Management</a></li>
            </ul>
  
</div>

Here's the js and jquery:


	
	if(eTarg.className == \"internetmarketingSpan\") {
		$('ul.menu_body').slideDown('normal');
	}else if(eTarg.className == \"menu_body\") {
		return false;
	}else {
		$('ul.menu_body').slideUp('normal');
	}
}

I was trying to target window objects and it was working but it wouldn't work in this situation for some reason.

Thanks for any help!

chazzwick

you need to have the dropdown submenu be a child element of the internetmarketing li element

ie

<li>
   <a id=\"internetmarketing\" ></a>
   <ul>
        <li>Submenu 1</li>
        <li>Submenu 2</li>
        <li>Submenu 3</li>
   </ul>


</li>

Then, the jquery


		$(\"ul#menu li\").hover(function(){
			//$(this).children(\"ul\").css({\"display\": \"block\"});
			$(this).children(\"ul\").slideDown(400);
		}, function(){
			//$(this).children(\"ul\").css({\"display\": \"none\"});
			$(this).children(\"ul\").slideUp(200);
		});
		
	});

treehouse : what would you like to learn today?

Forums

Help with jquery sliding menu