Creating iPad Friendly Drop Down Menus

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.

Share on Facebook