WordPress CSS dropdown menu on iPad

3 Views

So I don’t know anything really when it comes to developing for iPad. I have a WordPress site and I’m using WPTouch to present to mobile devices. The desktop version is showing for iPads and it looks pretty good. The trouble is the drop down menu functionality is horrible. The menu is 100% CSS. If you hover it, the menu comes up sometimes but disappears. If it doesn’t disappear, tapping on any of the links proves fruitless (just closes the drop down menu).

Is there a simple solution without creating an iPad theme? My top category links also point to pages, but if necessary I can disable them in place of functionality.

Read More

The site is: http://pureamericannaturals.com

Post Views: 3

Related posts

Leave a Reply

2 comments

  1. Ok, I made this as simple as possible and here’s how:

    1. I created a custom WordPress menu. Any top menu links that had sub-category items were replaced by a Custom Link with a # as the href. If the top menu link didn’t have sub-category items it can stay the default link.

    2. In my header.php I did a quick test to see the User Agent is an iPad or not

      if (!strstr($_SERVER['HTTP_USER_AGENT'], 'iPad')) {
    wp_nav_menu( array( 'theme_location' => 'primary' ) );
        } else {
    wp_nav_menu( array( 'menu' => 'iPad Menu', 'menu_class' => 'menu_ipad' ) );
}

    3. Pulled it all together with a custom touchstart event

      $('.menu_ipad ul a').bind('touchstart', function(e) {
    e.preventDefault();
    var newLoc = $(this).attr('href');
    window.location.href = newLoc;
});