Toggling a second menu with ClassieJS or jQuery?

Question

Currently the code is set up to toggle the same menu for every icon.

Here is a fiddle of my current progress http://jsfiddle.net/2Lyttauv/

What I want to achieve is adding a unique menu for each individual icon.

I started by creating the following HTML

<nav class="slider-menu slider-menu-vertical slider-menu-left" id="slider-menu-s1">
            <h3>MENU</h3>
     <a href="#"><span class="icon-flag"></span>Item 1</a>
     <a href="#"><span class="icon-flag"></span>Item 2</a>
            <a href="#"><span class="icon-flag"></span>Item 3</a>
            <a href="#"><span class="icon-flag"></span>Item 4</a>
            <a href="#"><span class="icon-flag"></span>Item 5</a>
      <a href="#"><span class="icon-flag"></span>Item 6</a>
      <a href="#"><span class="icon-flag"></span>Item 7</a>
        </nav>

Now I'd like to add a second menu to

navItem2

the second icon in the sidebar

I've tried creating a second menu using the exact same HTML from above except that I've changed the id="slider-menu-s1 and proceeded to make a separate function but that didn't seemed to work.

If anyone could help or point me in the right direction.

Looks like you took this off codrops?? classieJS doesn't have anything to do w/ your sub menu. It's a helper script that they use when writing their javascript — Rob Scott, Jan 21 '15 at 19:10
Yes the layout is from codrops but the menu functionality isn't. — giantunderthemountain, Jan 21 '15 at 19:12

JA Arce · Accepted Answer · 2015-01-21T19:23:18.810

Here is something that I did.

<nav class="slider-menu slider-menu-vertical slider-menu-left" id="slider-menu-s2">
    <h3>Another Menu</h3>
    <a href="#"><span class="icon-flag"></span>Iteasdfasdfm 1</a>
</nav>

And then notice the id which is slider-menu-s2 so that is what I added in the toggle on the navItemClick which is in here.

        var anotherMenu = document.getElementById( 'slider-menu-s2' );

        navItem2.onclick = function() {
            classie.toggle( this, 'active' );
            classie.removeClass( menuLeft, 'slider-menu-open' ); //this is where you removeClass the other menu to close it
            classie.toggle( anotherMenu, 'slider-menu-open' );
            disableOther( 'navItem2' );
        };

Hope that answers your question.

Here is the jsfiddle http://jsfiddle.net/2Lyttauv/20/

Close but clicking on another menu button puts the menu behind the "another menu". You almost got it. — Rob Scott, Jan 21 '15 at 19:16

Toggling a second menu with ClassieJS or jQuery?

1 Answers1