Creating iPad Friendly Drop Down Menus

CSS3 Menu on Theatrium Design

If you aren’t thinking about how your website runs on the iPad, you should be… with the phenomenal growth of the iPad market, Apple is trying to keep up with the ever growing demand for iPads.  But what happens when people visit your website on the iPad?

I recently jumped on the iPad bandwagon and have been having a lot of fun playing around with my new toy and downloading apps to try.  I find one of the most annoying aspects of the iPad however is browsing the web.  The iPad comes with Safari installed, so getting on the web is a breeze.  The problem starts when you travel to a website and try to navigate to other pages.

The iPad’s smaller browser window can make it a little awkward to use menu systems on a website designed for a regular 21+ inch monitor.  And on many websites, the navigation system simply doesn’t work!  When I tested my own website I found that my Spry dropdown menus were simply non-functional in the iPad.  The only pages I could visit were my top level navigation elements.  Ugh!

Lingering on a link can trigger the iPad's popup window

As a quick stop-gap, I added some vertical menus to the left column of my category pages, so at least all my pages could be navigated on the iPad.  But the challenge was to make my drop-down menus work.

After a little digging, I learned that the problem on touch screens, like the iPad, is the concept of mouseover / hover is tricky.  If your finger lingers over a link on the ipad, you are likely to see iPad’s popup window instead of your own.  iPad users quickly muscle train their fingers to avoid this, by adjusting the pressure and speed of their fingers over the screen.

Making sure the drop down menu CODING will work on the iPad is critical though.  SPRY dropdown menu widgets don’t seem to transfer well to the iPad, so I started looking for a better menu system.

I ended up installing the CSS3 Menu, a pure CSS text-based menu system that doesn’t use javascript, and works beautifully on the iPad and iPhone. The CSS3 Menu comes with dozens of pre-styled menus that are fully customizable using CSS.  The menus are SEO friendly and work well on all major browsers, including Firefox, Opera, Chrome and Safari. On non-CSS3 compitable browsers, such as IE7,  some of the formatting doesn’t show (such as rounded corners and shadows), and the drop downs don’t work on IE6.  However, most web designers have put IE6 to bed (including me).

CSS3 Menu on Theatrium Design's website

My new menu can be seen here, as rendered on the iPad.  My husband thinks it’s too orange, but I like it.  Besides, it’s so easy to change out that I can play around with it as much as I like, maybe changing out according to the seasons.

CSS3 Menu can be downloaded for free for non commercial websites, or you can purchase a license for a very reasonable price.  It comes with an easy to use GUI interface that makes designing the menu simple and fast.  You then just need to drop it into your website.  Sweet!

A few weeks ago, I wrote about removing flash elements from websites, and replacing it with iPad friendly jQuery elements.  I recommend this especially for homepage slideshows so you don’t have a big gaping empty hole in your design when viewed from the iPad.  In the coming weeks, I’m going to explore adding style elements that only render for iPads or mobile devices.

Going forward, it’s clear that in designing new Websites, either custom coded, or using CMS or eCommerce application tools, creating templates and themes that natively render well in Ipad and iPhones will be key.  Many template designers are already offering iPad friendly designs and options that can quickly be implemented with their themes.  Although many designers shake their heads at yet another browser to support, I think it’s exciting that there are already so many options out there to support this huge market.

If you don’t know what your website looks like on the iPad, and you don’t have an iPad handy, then by all means visit your local Apple store and use one of theirs to visit your website.  If it looks great, awesome!  Leave your website open as an advertisement to the next Apple customer.  But if you don’t like what you see, feel free to give me a call.

 

31 comments


  • Allright, based solely on your recommendation, random-web-developer-person-I-found-from-Google, I’ll try CSS Menu.

    Just noticed that my drop downs don’t work on the iPad either. You are right, Apple is sufficiently popular that we all have to do it their way.

    I’m always nervous about these decisions, since the hours it always takes (it’s never “a few mouse clicks” like they advertise) to get it up, running, and customized I feel permanently committed.

    Thanks for the review!

    January 12, 2012
    • Good luck with it Karl. I found it pretty straightforward, but let me know if you run into trouble… try it on a test page first! :)

      January 12, 2012
  • Biz Rardin

    I find it incredibly strange that no one is addressing the fact that once you open a drop down menu on an ipad, you can’t get rid of it.

    Everyone has been so focused on getting these things to work that they’ve completely forgotten about this (I assume that’s what happened, anyway).

    What if I start sifting through the menus and decide I want to stay on the current page? Now I have to deal with the drop down just sitting there, refusing to go away.

    January 25, 2012
  • Andrew

    I actually disagree that your new menu works on touch based devices. If I click on “Services” I do not get a popped sub menu I get taken to the services page. I’m on android but the issue is the same on ipad i would imagine. So I have no way of getting to your submenu pages now. This is the exact issue I am having on my own sites.

    March 8, 2012
    • Andrew, I finally had a chance to test it on an Android tablet and I see what you mean. I’m going to look into this and will post again if I can find the work around. VERY frustrating!

      March 12, 2012
    • On the Android 4x, we are able to get the drop-down to work, but it’s not a slam dunk. You have to press and hold the menu, and then slide down to get it to work… not ideal, and I think I’ll keep my side navigation menus in as an alternative method for Android users.

      May 2, 2012
  • Mike

    I am new to the iPad drop down issue and am.lookingt to get the menu on my site working. Do you know how the CSS3 menu compares to thespry 2.0 menu? I’m using dreamweaver cs5.5. Any input is greatly appreciated. Thanks!

    Mike

    March 24, 2012
  • Looks good. I also downloaded CSS3Menu. Creation is easy, but I’m a complete nub when it comes to installing it onto my WordPress site. You said you just “drop it into your website.” Could you tell me how you do that? CSS3Menu’s explanation is over my head. Thanks!

    May 2, 2012
    • The simplest way is to use the Published document as a template. When you hit the Publish button, it creates a single page with your menu. Open that and you can see where to copy and paste your code in your web document. Copy the scripts from the header section into your

      section, and put the rest in your area where you want it to show on the page. Maye sure you copy the support folders and files into the root of your website.
      May 2, 2012
  • I think I’m getting there, but is there a particular place to put the support files? I’ve tried the root, wp-content, themes folders. Sorry to be a bother. Right now, menu does show up on the site without any styling (click my name).

    May 2, 2012
    • Actually, I almost have it now. Just need to figure out how to get the navbar to show up on all pages, not just the homepage…

      May 2, 2012
  • Elijah

    i just want to say your an answer to prayer. I have been so frustrated with an html template i bought, it looks great but the bars don;t work and am completely new to programming, its a miracle anything has already been done. I do have one question though, in my hosting i have a javascript folder and css folder, i already did publish and uploaded the html file. I read the comment to mike s, do i have to copy paste anything in the index html or in every html from the publish html that was created and should i delete one of those folders java script or css?
    thank you in advance you really have made my life easier.

    June 4, 2012
    • Elijah

      incidentally i am speaking of ipad and iphone issues on computer its fine?

      June 4, 2012
  • Andrei

    Hi! Thank you CSS3 Menu! It works in iPad and iPhone. But just one last question sir, how can I autohide the submenus after tapping a link? Thanks much!

    June 20, 2012
    • John Law

      Hi Andrei

      Did you find a solution to hiding the drop-down menu? All I can think of is to have an extra ‘close’ button at the end of the menu bar…
      best wishes from Bath UK

      JL

      October 29, 2013
  • mohamed fouad

    Nice Seluotion …. Thanks

    July 5, 2012
  • I am working on installing drop-down menus in the sidebars of my class blog. However, they don’t seem to work on an ipad. Could someone please suggest what I could do to make them work? I’m not up to speed with programming language.

    The sample menu is in the left sidebar at the top.

    Thanks for any input you can offer.

    July 14, 2012
  • You are a DREAM! I’ve been working on this for too long and you finally gave me a solution I can use. Bless you!

    September 2, 2012
  • Great for wine list!!! in my restaurant I have iPads replacing my wine menu. It works great because my customers can see the wine’s label and can search wine by any parameter they choose. All data is shown in a table and it’s very easy to compare different wines and choose the best one for you. This app is made by a company named Conceptic, the eMenu PRO application is very intuitive and easy to use- even if you never touched an iPad before. Read more about iPad menu PROs and challenges here:  www.emenu-international.com or  www.emenu-international.com/solutions/ipad-menu/ipad-emenu-for-restaurants

    December 2, 2012
  • Jon

    Hey guys you may be interested in this plugin that adds some code to the a:over state to enable iPads and other touch devises to use drop down menus on wordoress! http://wordpress.org/extend/plugins/black-studio-touch-dropdown-menu/installation/

    December 14, 2012
  • Emily W

    I purchased Randy Talents DW Menumaker Extension from the Adobe.com website, but when I contacted support numerous times no response! When I try to download on Mac using DW5 I get a message that it does not have a valid signature and will not be installed by the DW Extension Manager. I find it absurd beyond belief that This developer touts unlimited support. What a joke.
    Is there a way to work around this problem? I am now trying to fix my website. The other solution for me anyway is direct links to each item. My site is small.

    February 14, 2013
  • I just discovered that there is only one thing you have to do to make a hovering drop down menu work on an Android. Of course I cannot vouch for the fact that this works on an iPad.

    The top level item that makes the menu drop down, should not have an href in its anchor. You can always take out the thing that has in the href and put it in the first item to drop down.

    When you do this, the hovering still works on a real computer and a click on the drop down menu on the Android Tablet brings up the drop down menu and lets you click on items in the menu.

    June 2, 2013
  • Hi Steven, are you talking about removing the href from a spry menu? Can you give us more info on that as Im still a newbie and wanting to build atablet compatible site preferably using a ready designed spry menu bar.

    February 27, 2014
  • Isn`t there an easy code that changes the way a menu behaves when using a tablet or smartphnone?

    March 31, 2014
  • Thanks for this – I’m not a dunce, but I’m quite new and working things out as I go. This seems to be a big problem, but every other answer I’ve found seems very piece-meal. Menus are really time consuming, so I don’t want to spend hours half understanding a solution. But this looks great – Thanks for the advice – I think it’s the answer to my prayers :)

    April 2, 2014
  • For newest information you have to visit the web and on
    internet I found this web page as a best web page for most recent updates.

    April 13, 2014
  • With the evidence, a lawyer can file a claims case before the court and handle
    everything on your behalf. A personal injury lawyer will also be unable to assist you in
    this regard. Many claims may start out general and then become much more complicated, and in
    these types of cases it is critical to have a knowledgeable attorney at your side.

    June 8, 2014
  • I am curious to find out what blog platform you’re working with?
    I’m having some small security issues with my latest site and I’d like to find something more
    risk-free. Do you have any suggestions?

    June 14, 2014
  • Spot on with this write-up, I seriously believe this
    website needs much more attention. I’ll probably be back again to read through
    more, thanks for the advice!

    June 21, 2014

Leave a comment


Name*

Email(will not be published)*

Website

Your comment*

Submit Comment

© Copyright Theatrium Design: The Green Room Blog - Theme by Pexeto
Get Adobe Flash player