Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jun 2008
    Location
    Bradford, OH (30 mins from Dayton)
    Posts
    36
    Thanks
    1
    Thanked 11 Times in 11 Posts

    Menus appear/disappear on click

    Hello,

    I've been looking all over the web and I can't find a solution. I am very new to jQuery as well.

    My case:
    I have a nav bar, each link in it activates/triggers a megamenu (each link has its own megamenu).

    What I need:
    I need a way to have each link activate its own megamenu, the megamenu should close when:

    1. The user clicks on another item in the nav bar.
    2. The user clicks on the same item in the nav bar.
    3. The user clicks on a 'close button' (X) graphic inside the megamenu (not shown in the HTML for simplicity sake).

    HTML:
    Code:
    <div id="top-nav">
        <ul>
          <li><span>Products &amp; Services</span>
            <ul>
              <li><div class="megamenu">Content here...</div></li>
            </ul>
          </li>
          <li><span>Support &amp; Training</span>
            <ul>
             <li> <div class="megamenu">Content here...</div></li>
            </ul>
          </li>
          <li><span>Communities</span>
            <ul>
             <li> <div class="megamenu">Content here...</div></li>
            </ul>
          </li>
          <li><span>Store</span>
            <ul>
              <li><div class="megamenu">Content here...</div></li>
            </ul>
          </li>
        </ul>
      </div>
    Any help would be GREATLY appreciated.

    Thank you.
    Last edited by rzea; 11-16-2010 at 05:04 PM.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,954
    Thanks
    9
    Thanked 724 Times in 718 Posts
    How about:

    Code:
    $(document).ready(function(){
    	$('#top-nav li').click(function(){//set up a click event for the li
    		$(this).siblings('.active').click();//click any other lis which are active to close their menus
    		$(this).find('.megamenu').toggle('slow');//toggle the child megamenu
    		$(this).toggleClass('active');//toggle a class so we can identify any open megamenus
    	});
    	
    	$('.megamenu').hide().click(function(event){//hide the mega menu on load and set up a click event..
    		$(this).parents('li').click();//..that just clicks the parent li
    		event.stopPropagation();//stop the click bubbling up to the parent li
    	});
    
    
    });
    </script>
    You'd probably hide the megamenu with css rather than js, but still. Tests OK in FF.

  • Users who have thanked SB65 for this post:

    rzea (11-16-2010)

  • #3
    New Coder
    Join Date
    Jun 2008
    Location
    Bradford, OH (30 mins from Dayton)
    Posts
    36
    Thanks
    1
    Thanked 11 Times in 11 Posts

    Thumbs up

    SB65,

    Your code worked like a charm

    I will hide the megamenus with CSS, yes. I also need to add the 'close button' I mentioned, but that should not be a problem, the code you created is doing the heavy lifting now.

    Thanks a million!

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,954
    Thanks
    9
    Thanked 724 Times in 718 Posts
    You're welcome. Once you've set up the close image just attach the click event to this instead of to .megamenu.

  • #5
    New Coder
    Join Date
    Jun 2008
    Location
    Bradford, OH (30 mins from Dayton)
    Posts
    36
    Thanks
    1
    Thanked 11 Times in 11 Posts

    Arrow

    Will do amigo.

    Just FYI, here's another solution I was provided with in stackoverflow.com:

    http://stackoverflow.com/questions/4...ppear-on-click

  • #6
    New Coder
    Join Date
    Jun 2008
    Location
    Bradford, OH (30 mins from Dayton)
    Posts
    36
    Thanks
    1
    Thanked 11 Times in 11 Posts

    Question Modified HTML

    Well, I had to modify my HTML because the way I had it before it wasn't working for how I needed the megamenus to display until I started implementing them with CSS.

    My new HTML is (which is actually simpler):

    Code:
      <ul>
        <li>Products &amp; Services (1)</li>
        <li>Support &amp; Training (2)</li>
        <li>Communities (3)</li>
        <li>Store (4)</li>
      </ul>
      <div class="megamenu">1111</div>
      <div class="megamenu">2222</div>
      <div class="megamenu">3333</div>
      <div class="megamenu">4444</div>
    Any idea how I can have each LI open the corresponding DIV on click? Keep in mind that the megamenus should close by either opening another megamenu or clicking on its menu item again.

    Thanks in advance,
    Last edited by rzea; 11-22-2010 at 03:11 PM.

  • #7
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,954
    Thanks
    9
    Thanked 724 Times in 718 Posts
    There's a very similar thread here which covers this - although you might need to amend your html slightly.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •