dropdown menu that supports ipad

I'm coding a design I've been given for a multisite project. The menu needs to be a dropdown menu and needs to work with the iPad - on some pages there isn't an option for a sidebar menu. Would like it to work on desktops on hover and work with 3.0+ menu system. Is there a plugin that can do this (or a tutorial)? Pages will be added and subtracted from both the main menu and submenus.

  • DavidM
    • DEV MAN’s Mascot

    Hi flojnel,

    I can't really imagine that being different from standard menu design actually. The iPad should work just like a desktop computer in that regard, being HTML5 compatible.

    Perhaps the following can help you get that going?

    You could also look at Twenty Eleven's nav menu code and CSS to see how it's done there, it's a great standard to follow, plus that page from the codex references it as well.

    Hope that helps!


  • flojnel
    • Site Builder, Child of Zeus

    The main problem with the iPad and css menus is that you can get css menus (which is how I've been making menus for a long time) to open on the iPad, but they don't close on their own. I was hoping to find a plugin that dealt with this, perhaps through JavaScript.

  • rentageekmom
    • New Recruit

    You have to add some CSS styling, but this little script will add JS to the existing WordPress menu. The CSS you add needs to style the inserted SPAN tag to have an image that indicates there is a drop down. If users click the image, the menu will pop open. Once you mouse off, it hides again. I haven't tested it on iPad/etc but it might work without any modification.

    <script type="text/javascript">
    	jQuery("ul.sub-menu").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav
    	jQuery("ul.navigation li span").click(function() { //When trigger is clicked...
    		//Following events are applied to the subnav itself (moving subnav up and down)
    		jQuery(this).parent().find("ul.sub-menu").slideDown('fast').show(); //Drop down the subnav on click
    		jQuery(this).parent().hover(function() {
    		}, function(){
    			 jQuery(this).parent().find("ul.sub-menu").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
    		//Following events are applied to the trigger (Hover events for the trigger)
    		}).hover(function() {
    			jQuery(this).addClass("subhover"); //On hover over, add class "subhover"
    		}, function(){	//On Hover Out
    			jQuery(this).removeClass("subhover"); //On hover out, remove class "subhover"
  • flojnel
    • Site Builder, Child of Zeus

    Thanks - it looks like a good script, but the problem with the iPad is there is no "mouse off" as there isn't a mouse. It doesn't detect finger hovers. Project Seven has a menu that works with the iPad, but not sure how to make it dynamic. So far avoided this problem by having menus in sidebars too, but this site doesn't have it on every page.

  • flojnel
    • Site Builder, Child of Zeus

    Was hoping to find something that was supposed to work out of the box - I don't have an iPad for testing. Have looked around and there doesn't seem to be anything out there. Have a lead on someone who had developed code for the Project Seven Pop Menu Magic for earlier versions of WordPress - going to try to follow-up with her.

    Looks like it might be time to get an iPad - I've been resisting!

    Your idea sounds good too - if the other doesn't work out, I'll pursue it. Thanks much.

  • DavidM
    • DEV MAN’s Mascot

    In my response I totally forgot about the touch-based aspect of the iPad, sorry for that one! But yeah, I don't know of any pre-made solutions, it involves some javascript/jquery coding as far as I can see.

    Thanks for that snippet rentageekmom! Mighty appreciated!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.