Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
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
Comment #1
Jeff Burnz CreditAttribution: Jeff Burnz commentedLet 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.
Comment #2
mgwisni CreditAttribution: mgwisni commentedHey, 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:
With:
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.
Comment #3
Jeff Burnz CreditAttribution: Jeff Burnz commentedI 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.