javascript hover function for submenu

Question

I'm pretty new at trying to understand javascript and I've been pooling over multiple examples trying to figure out what I'm doing wrong, but cant get this working properly. At one point I had working with onmouseover/mouseout but it only worked on 1 of the menus.

I'm sure it is something simple I have overlooked, but any help would be appreciated.

http://jsfiddle.net/N3TyT/

jQuery(document).ready(function($) {
$('#top-menu').hover(
  function () {
    $('#submenu').show(active);
  },
  function () {
    $('#submenu').hide(non-active);
  }
);
});

<ul id="menu" class="nav-menu">
    <li>Home</li>
    <li id="top-menu"><a href="#">About Us</a>
    </li>
    <ul id="submenu" class="sub-menu non-active">
        <li>US</li>
        <li>Our Style</li>
        <li>The Experience</li>
    </ul>
    <li id="top-menu"><a href="#">Galleries</a>
    </li>
    <ul id="submenu" class="sub-menu non-active">
        <li>Weddings</li>
        <li>Engagements</li>
        <li>Featured Weddings</li>
    </ul>
    <li id="top-menu"><a href="#">The Details</a>
    </li>
    <ul id="submenu" class="sub-menu non-active">
        <li>Investment</li>
        <li>Press and Awards</li>
        <li>Testimonials</li>
    </ul>
    <li>FAQ</li>
    <li>Contact</li>
    <li>The Blog</li>
</ul>

.nav-menu {
    list-style-type:none;
    text-align:center;
    text-transform:uppercase;
    font-weight:bold;
    font: 24px'Playfair Display', Georgia, serif;
}
.navmenu ul li {
    margin:30px;
}
.non-active {
    display:none;
}
.active {
    display:inline;
}

Please could you briefly tell us what you are trying to achieve? — Simon Adcock
– Simon Adcock, Commented Mar 9, 2013 at 8:56

showdev · Accepted Answer · 2021-03-24 01:57:09Z

2

It doesn't answer your specific question but the same behavior can be easily achieved with css. This way you don't depend on javascript being turned on for standard menu access.

ul.menu li ul {
  display: none;
}

ul.menu li:hover ul {
  display: block;
  position: relative;
}

<ul class="menu">
  <li><a href="#">Home</a></li>
  <li>
    <a href="#">Galleries</a>
    <ul>
      <li>Gallery #1</li>
      <li>Gallery #2</li>
    </ul>
  </li>
  <li>
    <a href="#">Albums</a>
    <ul>
      <li>Album #1</li>
      <li>Album #2</li>
    </ul>
  </li>
</ul>

View on jsFiddle

edited Mar 24, 2021 at 1:57

showdev

29.3k37 gold badges61 silver badges82 bronze badges

answered Mar 9, 2013 at 9:05

Bart

17.4k5 gold badges63 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Brigand Over a year ago

Good mention. Throw in some CSS3-Transitions for extra-bonus-points :-)

psu · Accepted Answer · 2013-03-09 08:57:09Z

1

You are using hide and show wrong. http://api.jquery.com/show/ http://api.jquery.com/hide/

http://jsfiddle.net/eXKV9/

$('#top-menu').hover(
  function () {
    $('#submenu').show();
  },
  function () {
    $('#submenu').hide();
  }
);

answered Mar 9, 2013 at 8:57

psu

3791 gold badge5 silver badges15 bronze badges

Comments

Amy · Accepted Answer · 2013-03-09 08:57:57Z

1

id must be unique. If you have multiple elements with the same id, jquery will not retrieve all the elements when you do $('#top-menu'), it'll only find the first element that matches the selector.

answered Mar 9, 2013 at 8:57

Amy

7,5262 gold badges22 silver badges31 bronze badges

Comments

Brigand · Accepted Answer · 2013-03-09 09:36:22Z

0

We're going to need to change the HTML a bit. IDs are used only once on a page. Classes are similar, but can be applied to any number of elements. We also want to nest our sub-menu's under the top-menu. That way the association is more clear.

<li class="top-menu"><a href="#">About Us</a>
    <ul class="sub-menu non-active">
        <li>Ashley + David</li>
        <li>Our Style</li>
        <li>The Experience</li>
    </ul>
</li>

We want to specify the nested sub-menu to show or hide. $(this) refers to the top-menu that was hovered over.

$('.top-menu').hover(
  function () {
    $(this).find('.sub-menu').show("slow");
  },
  function () {
    $(this).find('.sub-menu').hide("slow");
  }
);

demo

edited Mar 9, 2013 at 9:36

answered Mar 9, 2013 at 9:17

Brigand

86.4k20 gold badges168 silver badges174 bronze badges

2 Comments

user2151084 Over a year ago

This adds unnecessary animation and the dropdown ends up being unclickable because it disappears.

Brigand Over a year ago

@user2151084, thanks. I noticed something was off. It appears to be fixed now by nesting the elements and slightly changing the jQuery usage.

Brigand · Accepted Answer · 2013-03-09 09:20:50Z

-1

I updated your work. Is this what are trying to establish?

$('#top-menu').mouseover(function(){
    $('#submenu').addClass('active');
});
$('#top-menu').mouseout(function(){
    $('#submenu').removeClass('active');
});

JSFiddle Demo

edited Mar 9, 2013 at 9:20

Brigand

86.4k20 gold badges168 silver badges174 bronze badges

answered Mar 9, 2013 at 9:03

jzap

1121 silver badge4 bronze badges

2 Comments

user2151084 Over a year ago

Thanks, this is the solution I was needing. The others worked, but I eventually want the height of the menu to remain the same even with the dropdowns activated, so I needed a code that would let me modify the class. Understand I just need to ensure unique ids to work throughout. Thanks

Brigand Over a year ago

(-1) The code doesn't work on drop downs after the first, and the answer needs formatting. Please review the formatting guidelines. I updated the post to show correct formatting.

Collectives™ on Stack Overflow

javascript hover function for submenu

5 Answers 5

1 Comment

Comments

Comments

demo

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related