Page 1 of 1
[solved] Drop-down menus on the iPad
Posted: Mon Dec 05, 2011 9:12 pm
by DoctorWho
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?
Re: Drop-down menus on the iPad
Posted: Mon Dec 05, 2011 9:47 pm
by Wishbone
Which dropdown menus? Any?
Re: Drop-down menus on the iPad
Posted: Mon Dec 05, 2011 11:47 pm
by DoctorWho
When I view
my site on an iPad the drop-down menu don't work. I've done something wrong in the CSS?
Re: Drop-down menus on the iPad
Posted: Tue Dec 06, 2011 3:15 am
by Wishbone
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.
Re: Drop-down menus on the iPad
Posted: Tue Dec 06, 2011 4:19 am
by DoctorWho
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!
Re: Drop-down menus on the iPad
Posted: Tue Dec 06, 2011 5:35 am
by Wishbone
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.
Re: Drop-down menus on the iPad
Posted: Tue Dec 06, 2011 4:16 pm
by DoctorWho
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.
Re: Drop-down menus on the iPad
Posted: Wed Dec 07, 2011 8:29 pm
by DoctorWho
The drop-down menu now fully work on the iPad! I've wanting this for so long!
Major thanks Wishbone!
Re: [solved] Drop-down menus on the iPad
Posted: Sun Dec 18, 2011 9:17 pm
by rap3r
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
Re: [solved] Drop-down menus on the iPad
Posted: Mon Dec 19, 2011 4:47 pm
by Dr.CSS
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}...
Re: [solved] Drop-down menus on the iPad
Posted: Tue Dec 20, 2011 2:17 pm
by rap3r
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
Re: Drop-down menus on the iPad
Posted: Wed Dec 21, 2011 12:48 pm
by rap3r
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!