Hello wonderful people. I'm hoping to learn if my request is even possible. I'm fairly new to javascript, so I figured I'd ask here first and see if anyone has solved this problem.

I have two toggled menus sitting next to each other, and I'd like for them to behave similar to the menu and search buttons on Team Treehouse's website (make sure to make your browser small). Obviously, this is only possible if I can "untoggle" an open menu when the other menu is clicked.

Anyone have thoughts or ideas on how to achieve this?

Comments

Jeff Burnz’s picture

Jeff Burnz CreditAttribution: Jeff Burnz commented
Category: support » feature

Let me have a crack at the JS, its pretty strait forward and a better way of doing it, I did this for a site last year so no biggie.

mgwisni’s picture

mgwisni CreditAttribution: mgwisni commented

Hey, I just wanted to mention the fix I made to make this work. I'm still very new with JS, so this may be more code than needed, but it does what I wanted.

I replaced the following code in menu-toggle.js: 

 // Toggle menus open or closed
        $(".at-menu-toggle-button-link").click(function() {
          $(this).parent().siblings('.menu-toggle').slideToggle(100, 'swing');
          return false;
        });

With:

// Toggle menus open or closed
        $("#block-nice-menus-1 .at-menu-toggle-button-link").click(function(event) {
          $("#block-nice-menus-1 .menu-toggle").toggleClass("active");
          $("#block-nice-menus-1 .at-menu-toggle-button-link").toggleClass("active");
          $("#block-search-form .menu-toggle").removeClass("active").addClass("inactive");
          $("#block-search-form .at-menu-toggle-button-link").removeClass("active").addClass("inactive");
          event.preventDefault();
        });
        $("#block-search-form .at-menu-toggle-button-link").click(function(event) {
          $("#block-search-form .menu-toggle").toggleClass("active");
          $("#block-search-form .at-menu-toggle-button-link").toggleClass("active");
          $("#block-nice-menus-1 .menu-toggle").removeClass("active").addClass("inactive");
          $("#block-nice-menus-1 .at-menu-toggle-button-link").removeClass("active").addClass("inactive");
          event.preventDefault();
        });

It adds a class "active" to the one that was clicked, and I used CSS to display or hide those blocks. It's not as pretty as the original, but it worked.

Jeff Burnz’s picture

Jeff Burnz CreditAttribution: Jeff Burnz commented

I have come up with a solution that uses the outside-events.js plugin (very small) and will close the menu when you either click another toggle menu or anywhere on the page (which I think is a nice interaction). This also includes touch events for touch devices (not very well tested as yet, need to do some testing there.

I'll include this in the next release if the testing pans out well.