jQuery click menu

Question

I'm working on this menu:

enter image description here

HTML:

<ul id="menu">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
</ul><!-- end #menu -->

<ul class="submenu submenu-1">
    <li><a href="#">Item 1.1</a></li>
    <li><a href="#">Item 1.2</a></li>
    <li><a href="#">Item 1.3</a></li>
    <li><a href="#">Item 1.4</a></li>
</ul><!-- end #submenu.submenu-item1 -->
<ul class="submenu submenu-2">
    <li><a href="#">Item 1.1</a></li>
    <li><a href="#">Item 1.2</a></li>
    <li><a href="#">Item 1.3</a></li>
    <li><a href="#">Item 1.4</a></li>
</ul><!-- end #submenu.submenu-item1 -->

<div class="hero hero-1">content</div>
<div class="hero hero-2">content</div>
<div class="hero hero-3">content</div>
<div class="hero hero-4">content</div>

jQuery:

$('#menu li a').click(function () {
    $('#menu li').removeClass('active');
    $('.submenu, .hero').slideDown('normal');
});
$('.submenu, .hero').hide();

... it currently shows ALL submenus and hero divs. What I want is.. if its FIRST li of the #menu, it should look for submenu-1 and hero-1 and slidedown.

I'd really appreciate any help.

Thanks!

This looks like its right out of a textbook. Do you have any accompanying HTML? — Dutchie432
– Dutchie432, Commented Dec 22, 2011 at 14:10
No really, I created the mockup myself using balsamiq, need it for my website. — eozzy
– eozzy, Commented Dec 22, 2011 at 14:13

Dutchie432 · Accepted Answer · 2011-12-22 14:48:34Z

2

Add a data attribute to the original a items. (working sample - since no css was provided, the styles are not exactly right, but you get the idea).

<ul id="menu">
    <li><a href="#" data-slide="1">Item 1</a></li>
    <li><a href="#" data-slide="2">Item 2</a></li>
    <li><a href="#" data-slide="3">Item 3</a></li>
    <li><a href="#" data-slide="4">Item 4</a></li>
</ul><!-- end #menu -->

Then your JS can extract that ID in order to show the correct, associated sub menus and content.

$('#menu li a').click(function () {

    //Fetch the value of the 'slide' data attribute of the clicked link
    var id = $(this).data('slide'); 

    $('.submenu, .hero').hide();
    $('#menu li').removeClass('active');
    $('.submenu-'+id+', .hero-'+id).slideDown('normal');

});
$('.submenu, .hero').hide();

The benefit to using this method over some of the other methods mentioned (like .eq() or .index()) is that you can re-arrange the order of the original menu items and it will not throw off which content item gets pulled. So this HTML would still work perfectly...

<ul id="menu">
    <li><a href="#" data-slide="3">Item 3</a></li>
    <li><a href="#" data-slide="1">Item 1</a></li>
    <li><a href="#" data-slide="4">Item 4</a></li>
    <li><a href="#" data-slide="2">Item 2</a></li>
</ul><!-- end #menu -->

edited Dec 22, 2011 at 14:48

answered Dec 22, 2011 at 14:35

Dutchie432

29.3k20 gold badges94 silver badges110 bronze badges

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

3 Comments

m90 Over a year ago

Shouldn't this be data-slide then?

Dutchie432 Over a year ago

You could use data-slide and then the $(this).data('slide') - it would give a slight performance increase, but for 4 (or even 20) items, we're really not talking much of a difference. Updated answer to reflect that, though. Also, I find it easier to use a custom attribute for re-finding the item later on if needed like $(a[slide="2"]) - I've mixed experiences using that method with the data attributes.

Dutchie432 Over a year ago

Using a custom attribute is most certainly "valid code". Now, if you're talking about HTML script that will validate, that is another story - but again - no harm, no foul as far as I'm concerned. Anyway, I've changed it to use data attributes.

m90 · Accepted Answer · 2011-12-22 14:33:17Z

1

You could use jQuery's .index() and .eq() like in this fiddle: http://jsfiddle.net/bUjud/1/
See: http://api.jquery.com/eq/ and http://api.jquery.com/index/

answered Dec 22, 2011 at 14:33

m90

11.8k16 gold badges69 silver badges120 bronze badges

1 Comment

Dutchie432 Over a year ago

Using this method prevents you from re-ordering the links if such an action should be needed in the future. Not saying this is a bad idea, but it is something to consider. I know my boss re-arranges things like that all the time based on the time of year, or popular items available.

qwertymk · Accepted Answer · 2011-12-22 14:49:07Z

DEMO

For this:

<ul id="menu">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
</ul><!-- end #menu -->

<ul class="submenu submenu-1">
    <li><a href="#">Item 1.1</a></li>
    <li><a href="#">Item 1.2</a></li>
    <li><a href="#">Item 1.3</a></li>
    <li><a href="#">Item 1.4</a></li>
</ul><!-- end #submenu.submenu-item1 -->
<ul class="submenu submenu-2">
    <li><a href="#">Item 2.1</a></li>
    <li><a href="#">Item 2.2</a></li>
    <li><a href="#">Item 2.3</a></li>
    <li><a href="#">Item 2.4</a></li>
</ul><!-- end #submenu.submenu-item1 -->

<div class="hero hero-1">content 1</div>
<div class="hero hero-2">content 2</div>
<div class="hero hero-3">content 3</div>
<div class="hero hero-4">content 4</div>

Use this jQuery:

$('#menu li a').click(function () {
    var index = $('#menu li a').index(this) + 1;
    $('.submenu, .hero').hide();
    $('#menu li').removeClass('active');
    $('.submenu-' + index + ', .hero-' + index).slideDown('normal');
});
$('.submenu, .hero').hide();

And check out jQuery.index()

Collectives™ on Stack Overflow

jQuery click menu

3 Answers 3

3 Comments

1 Comment

DEMO

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related