Community Forums › Forums › Archived Forums › Design Tips and Tricks › Collapse mobile menu after clicking link
Tagged: mobile menu js javascript
- This topic has 7 replies, 4 voices, and was last updated 6 years, 5 months ago by Alec Burns.
-
AuthorPosts
-
July 11, 2017 at 10:34 am #208976Alec BurnsMember
Hello,
I’d like for my hamburger menu to collapse after a user clicks a navigation link. I’m currently using the Infinity Pro child theme.
Here’s the JavaScript file for the responsive menu:
(function(document, $, undefined) { // Add js body class when javascript is enabled $('body').addClass('js'); // Add accessibility menu 'use strict'; var infinity = {}, mainMenuButtonClass = 'menu-toggle', subMenuButtonClass = 'sub-menu-toggle'; infinity.init = function() { var toggleButtons = { menu: $('<button />', { 'class': mainMenuButtonClass, 'aria-expanded': false, 'aria-pressed': false, 'role': 'button' }) .append(infinity.params.mainMenu), submenu: $('<button />', { 'class': subMenuButtonClass, 'aria-expanded': false, 'aria-pressed': false, 'role': 'button' }) .append($('<span />', { 'class': 'screen-reader-text', text: infinity.params.subMenu })) }; $('.nav-primary').before(toggleButtons.menu); // add the main nav buttons $('nav .sub-menu').before(toggleButtons.submenu); // add the submenu nav buttons $('.' + mainMenuButtonClass).each(_addClassID); $('.' + mainMenuButtonClass).addClass('ionicons-before ion-drag'); $('.' + subMenuButtonClass).addClass('ionicons-before ion-chevron-down'); $(window).on('resize.infinity', _doResize).triggerHandler('resize.infinity'); $('.' + mainMenuButtonClass).on('click.infinity-mainbutton', _mainmenuToggle); $('.' + subMenuButtonClass).on('click.infinity-subbutton', _submenuToggle); }; // add nav class and ID to related button function _addClassID() { var $this = $(this), nav = $this.next('nav'), id = 'class'; $this.addClass($(nav).attr('class')); if ($(nav).attr('id')) { id = 'id'; } $this.attr('id', 'mobile-' + $(nav).attr(id)); } // Change Skiplinks and Superfish function _doResize() { var buttons = $('button[id^=mobile-]').attr('id'); if (typeof buttons === 'undefined') { return; } _superfishToggle(buttons); _changeSkipLink(buttons); _maybeClose(buttons); } /** * action to happen when the main menu button is clicked */ function _mainmenuToggle() { var $this = $(this); _toggleAria($this, 'aria-pressed'); _toggleAria($this, 'aria-expanded'); $this.toggleClass('activated'); $('nav.nav-primary').slideToggle('fast'); //changed to .nav-primary since we're not toggling .nav-secondary } /** * action for submenu toggles */ function _submenuToggle() { var $this = $(this), others = $this.closest('.menu-item').siblings(); _toggleAria($this, 'aria-pressed'); _toggleAria($this, 'aria-expanded'); $this.toggleClass('activated'); $this.next('.sub-menu').slideToggle('fast'); others.find('.' + subMenuButtonClass).removeClass('activated').attr('aria-pressed', 'false'); others.find('.sub-menu').slideUp('fast'); } /** * activate/deactivate superfish */ function _superfishToggle(buttons) { if (typeof $('.js-superfish').superfish !== 'function') { return; } if ('none' === _getDisplayValue(buttons)) { $('.js-superfish').superfish({ 'delay': 100, 'animation': { 'opacity': 'show', 'height': 'show' }, 'dropShadows': false }); } else { $('.js-superfish').superfish('destroy'); } } /** * modify skip links to match mobile buttons */ function _changeSkipLink(buttons) { var startLink = 'genesis-nav', endLink = 'mobile-genesis-nav'; if ('none' === _getDisplayValue(buttons)) { startLink = 'mobile-genesis-nav'; endLink = 'genesis-nav'; } $('.genesis-skip-link a[href^="#' + startLink + '"]').each(function() { var link = $(this).attr('href'); link = link.replace(startLink, endLink); $(this).attr('href', link); }); } function _maybeClose(buttons) { if ('none' !== _getDisplayValue(buttons)) { return; } $('.menu-toggle, .sub-menu-toggle') .removeClass('activated') .attr('aria-expanded', false) .attr('aria-pressed', false); $('nav, .sub-menu') .attr('style', ''); } /** * generic function to get the display value of an element * @param {id} $id ID to check * @return {string} CSS value of display property */ function _getDisplayValue($id) { var element = document.getElementById($id), style = window.getComputedStyle(element); return style.getPropertyValue('display'); } /** * Toggle aria attributes * @param {button} $this passed through * @param {aria-xx} attribute aria attribute to toggle * @return {bool} from _ariaReturn */ function _toggleAria($this, attribute) { $this.attr(attribute, function(index, value) { return 'false' === value; }); } $(document).ready(function() { infinity.params = typeof InfinityL10n === 'undefined' ? '' : InfinityL10n; if (typeof infinity.params !== 'undefined') { infinity.init(); } }); })(document, jQuery);
Thank you!
http://alecbwd.com/testing/jay/July 18, 2017 at 9:48 am #209266Alec BurnsMemberDid I post this in the wrong place?
October 24, 2017 at 8:57 pm #212920sahMemberAlec-
I have the same question - getting infinity pro's mobile menu to close back up after clicking on a link that goes to a location on the same page.
Did you ever find a solution?
Susan
October 25, 2017 at 10:31 am #212940carasmoParticipantThis should be a question for StudioPress support as this is an oversight in their js.
Anyway, this is untested but should work.
First you have to change the js to use the unminified version then re-minify or pack it afterwards.
Using FTP and a code editor, open up responsive-menus.js (not the min version), at the very bottom find:
$(document).ready(function () { if ( _getAllMenusArray() !== null ) { genesisMenu.init(); } });
Change that to add the function to close the menu:
$(document).ready(function() { if (_getAllMenusArray() !== null) { genesisMenu.init(); //* Close Menu Panel when a link that is an anchor is clicked but not just a # $('.genesis-responsive-menu ul li a[href*=#]:not([href=#])').on('click', function() { var $toggle = $('.menu-toggle'); $toggle.next('nav').slideUp(); $toggle.attr('aria-expanded', 'false'); $toggle.attr('aria-pressed', 'false'); $toggle.removeClass('activated'); }); } });
After this chunk make sure you have kept the
})( document, jQuery );
Now stick that on your server in the correct location in your theme with FTP and open up the php in a code editor (probably functions.php) where they are enqueueing the scripts and find the words
responsive-menus.min.js
and change that to theresponsive-menus.js
. Clear all local and server cache.Test. If it works, then re-minify the script (online you can use http://refresh-sf.com/) and replace the code inside responsive-menus.min.js and then change the php back.
In order to this properly, use the proper tools.
Backup first all the files so you can swap back if you create an error.
October 25, 2017 at 1:32 pm #212945vgmm008MemberI have a similar issue with magazine pro. I added a search icon in the primary nav menu, which slides down a full screen overlay with a search form. (the idea is described here https://sridharkatakam.com/slide-search-box-full-screen-overlay-genesis/)
my responsive menu on mobile is running correctly except when I click on the search icon, the responsive menu does not collapse and the resulting full screen overlay search form page is not proper...
I tried modifying the responsive-menus-js files as suggested above but it is not successful.
Thank you very much
October 25, 2017 at 2:27 pm #212949carasmoParticipantYour issue is not the same so the code will not work. You would need to write jQuery to close the menu when the search icon is clicked. Open up another thread and see if a volunteer here will help you. You will need to link to your site.
October 25, 2017 at 2:38 pm #212950vgmm008Memberthank you very much for your reply. for now the client website is not online...
November 4, 2017 at 9:46 am #213259Alec BurnsMemberThanks for the help! Unfortunately, as this post didn't get a response for 3 1/2 months, I ended up just outsourcing the work. I'm new to the forum—should I leave this up for others?
Thank you,
Alec -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.