Issue with IOS 8 and Meanmenu script on SharePoint


Recently I’ve used the Meanmenu script on a project to render a mobile menu. This was in SP 2007 and worked great with a little editing of the script for SharePoint as it is originally developed to work with a UL element. SharePoint 2007’s navigation is formed with tables.

Now this all worked on all mobiles including IPhones. Since the IOS 8 update and the release of the new IPhone 6 and 6+ the menu didn’t render on IOS 8 devices. After updating to IOS 8 on my IPad as well I found the same issue.

With a lot of investigation and help from the telerik app developer software I got to the root of the problem. The issue was for some unexplained reason IOS 8 was rendering the navigation with span tags nested in a div. I had to create a separate script that would render this markup to a mobile menu. Problem solved.

Advertisements

2 Comments Add yours

  1. Gary Chen says:

    Hello AL ROOME,

    I have same problem, Could you let me know how to reslove this problem, thank you very much.

    Gary Chen.

    1. Al Roome says:

      if you copy the meanmenu script and rename it something like jquery.meanmenyios.js. Save it and then go through it and change the

       nav.mean-nav tr

      to

       div.mean-nav div 

      and

      jQuery('.mean-nav tr:first-child').hide();

      to

       jQuery('.mean-nav div').hide();

      .

      you’ll obviously need to change the

      $.fn.meanmenu = function (options) {
      

      to

      $.fn.meanmenuios = function (options) {

      .

      Then add this bellow script to the master page.

      
      jQuery(document).ready(function ($) {
      if ($("div.top_menu div.zz1_TopNavigationMenu_5").length > 0) {
          $('div.top_menu').meanmenuios();
      }
      $('.ms-topNavContainerUCLH .zz1_TopNavigationMenu_5').meanmenu();
      });
      
      

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s