mardi 13 octobre 2020

Web hamburger menu is not working in IOS device

hamburger menu is not working in IOS device but works in other mobile devices (Samsung etc).

It is checked that is not the click function problem in IOS. The menu should be clickable in IOS device. I have tried to use button instead of a href but is still not working.

Code:
<div id="mobile-navigation" style= "cursor:pointer">
    <a  href="#menu" class="menu-trigger" style= "cursor:pointer"><i class="fa fa-reorder"></i></a>
</div>

JS:
    /*----------------------------------------------------*/
    /*  Navigation
    /*----------------------------------------------------*/
    if($('header').hasClass('full-width')) {
        $('header').attr('data-full', 'yes');
    }  
    if($('header').hasClass('alternative')) {
        $('header').attr('data-alt', 'yes');
    }
    

    function superFishInit() {
        $('#navigation').superfish({
            delay:       300,                               // one second delay on mouseout
            animation:   {opacity:'show'},   // fade-in and slide-down animation
            speed:       200,                               // animation speed
            speedOut:    50                                 // out animation speed
        });
    }

    function menumobile(){
        var winWidth = $(window).width();
        if( winWidth < 973 ) {
            $('#navigation').removeClass('menu');
            $('#navigation li').removeClass('dropdown');
            $('header').removeClass('full-width');
            $('#navigation').superfish('destroy');
        } else {
            $('#navigation').addClass('menu');
            if($('header').data('full') === "yes" ) {
                 $('header').addClass('full-width');
            }
            superFishInit();
        }
        if( winWidth < 1272 ) {
            $('header').addClass('alternative').removeClass('full-width');
        } else {
            if($('header').data('alt') === "yes" ) {} else {
                $('header').removeClass('alternative');
            }
        }
    }

    $(window).on('load resize', function() {
        menumobile();
    });
    superFishInit();


     /*----------------------------------------------------*/
    /*  Mobile Navigation
    /*----------------------------------------------------*/
        var jPanelMenu = $.jPanelMenu({
          menu: '#responsive',
          animated: false,
          duration: 200,
          keyboardShortcuts: false,
          closeOnContentClick: true
        });
        
      // desktop devices
        $('.menu-trigger').click(function(e){
            e.preventDefault();
          var jpm = $(this);
          if( jpm.hasClass('active') )
          {
            jPanelMenu.off();
            jpm.removeClass('active');
          }
          else
          {
            jPanelMenu.on();
            jPanelMenu.open();
            jpm.addClass('active');
          }
          return false;
        });
        
        // Removes SuperFish Styles
        $('#jPanelMenu-menu').removeClass('sf-menu');
        $('#jPanelMenu-menu li ul').removeAttr('style');


        $(window).resize(function (){
          var winWidth = $(window).width();
          var jpmactive = $('.menu-trigger');
          if(winWidth>990) {
            jPanelMenu.off();
            jpmactive.removeClass('active');
          }
        });


    /*----------------------------------------------------*/
    /*  Stacktable / Responsive Tables Plug-in
    /*----------------------------------------------------*/
    $('.responsive-table').stacktable();
    

I have tried many solutions. Can someone help? Thank you




Aucun commentaire:

Enregistrer un commentaire