jQuery hover menu - Nothing works

[as4s1n]

I am working on a hover menu using jQuery. For some reason nothing seems to work. What I want it to do is when you hover over the anchor tag the ol that is after it will expand revealing the contents of that subject header and retract when it is mousedout. I have no idea what is wrong.

JQuery:

$(".HM_menuItem ol").hide();
$(".HM_menuItem a").hover(
	function() {
		$(this).find("ol").slideToggle();
	},
	function() { 
		$(this).find("ol").slideToggle();
	}
);

HTML:

		<div id="navi-menu">
			<div class="HM_menuItem">
				<a href="#">Root 1</a>
				<ol>
					<li>Child 1</li>
					<li>Child 2</li>
				</ol>
			</div>
			<div class="HM_menuItem">
				<a href="#">Root 2</a>
				<ol>
					<li>Child 1</li>
					<li>Child 2</li>
				</ol>
			</div>
		</div>

Here is a link to a live site.

Thanks

 

[misson]

Firstly, the sample page calls the jquery methods before the elements exist. Use ready() to set up the handlers and hide the elements (you should have caught this one).

Second, find() searches descendants. Use next() or nextAll() to get following siblings.

 

[farscapeone]

In other words:

$(document).ready(function(){
	$(".HM_menuItem ol").hide();
	$(".HM_menuItem a").hover(
		function() {
			$(this).next("ol").slideToggle();
		},
		function() { 
			$(this).next("ol").slideToggle();
		}
	);
});

That should do the trick

 

[as4s1n]

Oh yea, I completely blanked about that $(document).ready(function() {});. The reason I was using $.find() was because I was looking on Dark Horizons they have a menu with code like this:

$("#content-navigation .navigation-tongue").hover(
    function () {
        $(this).find("ol").toggle("fast");
        $(this).addClass("selected");
    },
    function () {
        $(this).find("ol").toggle("slow");
        $(this).removeClass("selected");
    }
)

With a menu structure that looks like:

<div id="content-navigation">
	<ul>
		<li id="content-navigation-news" class="navigation-tongue">
			<a href="/news/">News</a>
			<ol>
				<li><a href="/news/">Latest News</a></li>
				<li><a href="/news/archive/">News Archive</a></li>

			</ol>
		</li>
		<li id="content-navigation-interviews" class="navigation-tongue">
			<a href="/interviews/">Interviews</a>
			<ol>
				<li><a href="/interviews/">Latest Interviews</a></li>
				<li><a href="/interviews/a/">Interviews Archive</a></li>

			</ol>
		</li>
<!-- Etc -->

I used a similar structure but then why does that work when mine doesn't?

Also: Whenever you mouseout of the anchor tag the OL retracts, I want people to be able to hover over that while the menu section is expanded so it would be possible to click the links on that. Any help with that?

 

[misson]

I used a similar structure but then why does that work when mine doesn't?

Similar isn't the same as same. Compare:

$("#content-navigation .navigation-tongue")[...]

<div id="content-navigation">
  <ul>
    <li id="content-navigation-news" class="navigation-tongue">
      <a href="/news/">News</a>
      <ol>

with:

$(".HM_menuItem a")[...]

<div id="navi-menu">
  <div class="HM_menuItem">
    <a href="#">Root 1</a>
    <ol>

Use of lists for the top level menu aside (which is more semantic, hence preferable), what's the main difference?

Also: Whenever you mouseout of the anchor tag the OL retracts, I want people to be able to hover over that while the menu section is expanded so it would be possible to click the links on that. Any help with that?

Once you spot the difference, you'll see why yours behaves the way it does and how to get the other behavior.

 

[as4s1n]

I'm sorry, I am still in the dark with that. I just can't seem to figure it out. I worked on something a year ago and dropped it because I never understood this. My guess would be something along these lines:

// ...
$("#navi-menu .HM_menuItem a").hover(
    function() {
        $(this).next("ol").slideDown();
            if($(this).is(":ol")) {
                $(this).hover(
                function() {
                        $(this).show();
                    },
                    function() {
                        $(this).slideUp();
                    });
             }
    }
});

But that's probably wrong.

 

[misson]

Take a close look at the selectors and structure. The Dark Horizons menu selects the parent .navigation-tongue ($("#content-navigation .navigation-tongue")):

<div id="content-navigation">
  <ul>
---><li id="content-navigation-news" class="navigation-tongue">
      <a href="/news/">News</a>
      <ol>

whereas yours selects the sibling link ($(".HM_menuItem a")):

<div id="navi-menu">
  <div class="HM_menuItem">
---><a href="#">Root 1</a>
    <ol>

Thus the Dark Horizons menu can use find(), since the <ol> is a child of their selected element, but you must use next(), since the <ol> is a sibling of your selected element.

A consequence of the different selectors is that when the mouse is hovering over the <ol> it's still hovering over Dark Horizons' .navigation-tongue, keeping the <ol> open. In your menu, hovering over the <ol> requires leaving the <a>, which causes the menu to close.

 

[as4s1n]

Thanks Misson, that makes so much more sense now.

 

[refog333]

thanks