[solved] Drop-down menus on the iPad

DoctorWho · Post by **DoctorWho** » Mon Dec 05, 2011 9:12 pm

I don't know if this is the right place for this topic, feel free to move it if need be.

Has anyone gotten the drop-down menus to work with the iPad and other touch screen devices? If so, how is it done?

Wishbone · Post by **Wishbone** » Mon Dec 05, 2011 9:47 pm

Which dropdown menus? Any?

DoctorWho · Post by **DoctorWho** » Mon Dec 05, 2011 11:47 pm

When I view my site on an iPad the drop-down menu don't work. I've done something wrong in the CSS?

Wishbone · Post by **Wishbone** » Tue Dec 06, 2011 3:15 am

I recently created a site where it was very important to the client that everything was very functional on the iPad, and because of this, I learned a lot about the issues with mobile devices and navigation. One major issue is that there is no concept of 'hovering'... The only options are touch or drag.

I just took a look at your site on my son's iPad, and it looks like the menu pops up when you touch (instead of hover), but since you touched it, it also gets processed as a click and navigates away.

One thing you might want to do is for all the top-level menu items that have sub-menus, make them section headers instead. This way, when a user clicks on a iPad, you get the menu, and since it's not a link, it won't navigate away.

A better idea would be to do keep it the way it is, but do some jquery OS detection, and if it's a mobile device, do a 'preventDefault' on all the top-levels with submenus, so it works as normal for computers, but do what you want on mobile devices.

DoctorWho · Post by **DoctorWho** » Tue Dec 06, 2011 4:19 am

Thanks wishbone! I actually tried using section headers, but I couldn't get it to work on the iPad.

Sadly, I don't know any jquery. Could you please point me in right direction to learn jquery?

Thanks!

Wishbone · Post by **Wishbone** » Tue Dec 06, 2011 5:35 am

Just google jquery tutorials. It's really easy.. In the simplest form, you specify a css selector and tell it to do something.

If you couldn't get section headers to work, leave it a link and try the following:

Place the following in your <head>

Code: Select all

<__script__ src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></__script>

<__script__ type="text/javascript">
$(document).ready(function() {
  $('#nav>li>a').click(function(event) {
    if ($(this).parent().children('ul').length) {
      event.preventDefault();
    }
  });
});
</__script>

What this does is:
* Load jquery
* Wait until the document is ready (all html objects loaded)
* When '#nav>li>a' (main menu link) is clicked..
* Check to see if the link's (<a>) parent element (<li>) has any children <ul>'s (submenus)
* If so, prevent the link from being followed when it is clicked.

On a regular computer it will still dropdown when hovered, and on the iPad, it will show the submenu, but not go anywhere when clicked.

Completely untested, of course.

DoctorWho · Post by **DoctorWho** » Tue Dec 06, 2011 4:16 pm

Thanks again Wishbone!

I'll add the code and stop by Best Buy to try it on an iPad after work.

I don't have an iPad.

DoctorWho · Post by **DoctorWho** » Wed Dec 07, 2011 8:29 pm

The drop-down menu now fully work on the iPad! I've wanting this for so long!

Major thanks Wishbone!

rap3r · Post by **rap3r** » Sun Dec 18, 2011 9:17 pm

Hi,

I have the same problem on my web page. Menu doesn't drop once you click on it on iPad. www.urskahrovat.si

After I copied text in right after <head> I receive this error:
string(229) "Smarty error: [in tpl_head:22 line 6]: syntax error: unrecognized tag: $('#nav>li>a').click(function(event) { if ($(this).parent().children('ul').length) { event.preventDefault(); (Smarty_Compiler.class.php, line 446)" string(110) "Smarty error: [in tpl_head:22 line 6]: syntax error: unrecognized tag '' (Smarty_Compiler.class.php, line 590)"

Can you please help me to solve this also on my web page? What did I do wrong?

Thank you

Dr.CSS · Post by **Dr.CSS** » Mon Dec 19, 2011 4:47 pm

That means you put some code that has { } in it and smarty wants to parse it as a {tag} so you need to wrap it in {literal} { the code } {/literal}...

rap3r · Post by **rap3r** » Tue Dec 20, 2011 2:17 pm

Hi,

Thanks. I put code as you mentioned. Now I don't receive any error but drop down menues still doesn't work on iPad 2 5.0.

Any idea what can be done?
Thanks

rap3r · Post by **rap3r** » Wed Dec 21, 2011 12:48 pm

DoctorWho wrote:The drop-down menu now fully work on the iPad! I've wanting this for so long!

Major thanks Wishbone!

Can you please help me what did you do on your page for drop down to start work?
Thanks!

CMS Made Simple Forums

[solved] Drop-down menus on the iPad

[solved] Drop-down menus on the iPad

Re: Drop-down menus on the iPad

Re: Drop-down menus on the iPad

Re: Drop-down menus on the iPad

Re: Drop-down menus on the iPad

Re: Drop-down menus on the iPad

Re: Drop-down menus on the iPad

Re: Drop-down menus on the iPad

Re: [solved] Drop-down menus on the iPad

Re: [solved] Drop-down menus on the iPad

Re: [solved] Drop-down menus on the iPad

Re: Drop-down menus on the iPad