0

We are attempting to get submenus to only appear when the user "taps" the menu option on a mobile browser. This functionality works good on hover but some mobile devices don't work with hovering. We need the ability to click submenu titles in order to drop them down and then click them again to collapse them.

0

Then look far, the best I found in my case has been the following:

I have overridden the method (js) of tb MegaMenu and done through the function drupal

  1. I created a copy of tb-megaMenu-frontend.js file and called tbmega-custom.js and saved in the js folder of my theme.
  2. What added to the system through the function drupal js_alter. In my theme in the file called template.php

    function mytheme_js_alter (&$javascript){
        $javascript[drupal_get_path('module', 'tb_megamenu') . '/js/tb-megamenu-frontend.js']['data'] = path_to_theme() . '/js/tbmega-custom.js';
    }
    
  3. I have adjusted the code to my needs. Just change the behavior of tbMegaMenuAction:

     Drupal.behaviors.tbMegaMenuAction = {
        attach: function (context) {
            $('.tb-megamenu-button', context).once('menuIstance', function () {
            var This = this;
            $(This).click(function () {
                if (parseInt($(this).parent().children('.nav-collapse').height())) {
                    $(this).parent().children('.nav-collapse').css({height: 0, overflow: 'hidden'});
                    Drupal.TBMegaMenu.displayedMenuMobile = false;
                }
                else {
                    $(this).parent().children('.nav-collapse').css({height: 'auto', overflow: 'visible'});
                    Drupal.TBMegaMenu.displayedMenuMobile = true;
                }
            });
        });
    
        //Comment this for mobile click
        //var isTouch = 'ontouchstart' in window && !(/hp-tablet/gi).test(navigator.appVersion);
        //if (isTouch) {
    
    
            $(document).ready(function ($) {
                var mm_duration = 0;
                $('.tb-megamenu').each(function () {
                    if ($(this).data('duration')) {
                        mm_duration = $(this).data('duration');
                    }
                });
                var mm_timeout = mm_duration ? 100 + mm_duration : 500;
    
    
    
                $('.nav > li, li.mega').click(function (event) {
                    event.preventDefault();
    
                    var $this = $(this);
    
                    if ($this.hasClass('mega') && !$this.hasClass('clicado')) {
    
                        $('.nav > li, li.mega').each(function () {
                            $(this).removeClass('clicado open');
                        });
    
    
                        $this.addClass('clicado');
                        $this.addClass('animating');
                        clearTimeout($this.data('animatingTimeout'));
                        $this.data('animatingTimeout', setTimeout(function() {
                            $this.removeClass('animating')
                        }, mm_timeout));
                        clearTimeout($this.data('hoverTimeout'));
                        $this.data('hoverTimeout', setTimeout(function() {
                            $this.addClass('open')
                        }, 100));
    
    
    
                    } else {
    
                        if($this.hasClass('mega') && $this.hasClass('clicado')) {
    
                            $this.removeClass('clicado');
                            $this.addClass('animating');
                            clearTimeout($this.data('animatingTimeout'));
                            $this.data('animatingTimeout', setTimeout(function() {
                                $this.removeClass('animating')
                            }, mm_timeout));
                            clearTimeout($this.data('hoverTimeout'));
                            $this.data('hoverTimeout', setTimeout(function() {
                                $this.removeClass('open')
                            }, 100));
                        }
    
                    }
    
                });
            });
    
        //}
    
        $(window).resize(function () {
            var windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
            if (windowWidth != Drupal.TBMegaMenu.oldWindowWidth) {
                Drupal.TBMegaMenu.oldWindowWidth = windowWidth;
                Drupal.TBMegaMenu.menuResponsive();
            }
        });
      }
     }
    
| improve this answer | |
  • Thank you for this code. I use it and it works. But when I have a views block with ajax pager on the same page, the TB Mega menu click behavior gets destroyed, clicking does not open menu anymore. Can you help please? – drupalfan Oct 18 '16 at 15:37
  • Events associated with an item type are often lost when other copies (only lost in the new elements) are added. Somehow as mention the events are being destroyed navgación bar. The way to deal with elements that are added in after the page and its load is complete, it is to delegate the event to another element that does not change or refresh. You can read more on this here: learn.jquery.com/events/event-delegation – chalo Oct 18 '16 at 16:07
  • Thank you. I do not understand this enough. Can you please give me a tip how to rewrite above code so that I have a chance to solve it by myself? – drupalfan Oct 18 '16 at 16:59
  • We must use on instead of click something like: $('body').on('click', '.nav > li, li.mega', function (event) { event.preventDefault(); .... .... .... This code use delegation, is only needed in the click event, the rest of the code is the same. – chalo Oct 18 '16 at 17:15
  • I found out that the click event is firing multiple times if the ajax pager is used (and page is not 0). Then I found this: stackoverflow.com/questions/6120943/… .... and finally I found the solution here: sholsinger.com/2011/08/…. See new code below. – drupalfan Oct 18 '16 at 17:32
0

Because click function fires multiple times (e.g. when using a views block with ajax pager) I had to change the code like this (solution from here):

        //$('.nav > li, li.mega').click(function (event) {
        $('.nav > li > a, li.mega > a').click(function (event) {  

          if(event.handled !== true) {
            event.handled = true;

            //event.preventDefault();

            //var $this = $(this);
            var $this = $(this).parent();

            if ($this.hasClass('mega') && !$this.hasClass('clicado')) {

                $('.nav > li, li.mega').each(function () {
                    $(this).removeClass('clicado open');
                });
                $this.addClass('clicado');
                $this.addClass('animating');
                clearTimeout($this.data('animatingTimeout'));
                $this.data('animatingTimeout', setTimeout(function() {
                    $this.removeClass('animating')
                }, mm_timeout));
                clearTimeout($this.data('hoverTimeout'));
                $this.data('hoverTimeout', setTimeout(function() {
                    $this.addClass('open')
                }, 100));
            } else {

                if($this.hasClass('mega') && $this.hasClass('clicado')) {

                    $this.removeClass('clicado');
                    $this.addClass('animating');
                    clearTimeout($this.data('animatingTimeout'));
                    $this.data('animatingTimeout', setTimeout(function() {
                        $this.removeClass('animating')
                    }, mm_timeout));
                    clearTimeout($this.data('hoverTimeout'));
                    $this.data('hoverTimeout', setTimeout(function() {
                        $this.removeClass('open')
                    }, 100));
                }

            }

          }  //if(event.handled !== true)
          return false;

        });
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.