CSS Navigation Menu IPad and IPhone - iphone

Question

I have a css menu that works well in most desktop browsers, but I have had issues get my drop down menu to work on IPad and Iphone. Here is the site in question: http://bakersfield.kernhigh.org/
I am quite new to css and javascript, so any help would be great.
Thanks

Answer 1

Currently, iOS does not support :hover, so your navigation will not unfold in iOS as it does on a desktop.
Have you considered jQuery Mobile? I would only suggest that if you were developing a seperate mobile version, though.
Otherwise, you could use this jquery (you must also include jQuery then):
$('nav li').bind('touchstart', function(){
$(this).addClass('hover');
}).bind('touchend', function(){
$(this).removeClass('hover');
});
This will add a class (hover) upon the touch, and remove it upon removal of the finger.
You will of course have to edit this for your needs. I only say this because you say you are new to javascript and I don;t want to confuse you.

Answer 2

Drop down menus can suck, especially making them work with touch screen devices since you can't 'hover' on a touchscreen. This is how I do my drop down menus, it is pure CSS, and I have tested it on chrome, ff, ie7+, safari, iPhone and multiple Android (of course, you will want to tweak colors and sizing):
HTML
<div id="navigation">
<ul id="nav">
<li><a href="index.html>Home</a></li>
<li>Drop Down <!--Notice didn't close the li yet->
<ul>
<li>Drop Down Item</li>
<li...../li>
etc...
</ul>
</li>
<li>Another Drop Down</li>
<ul>
...
</ul
</li>
</ul>
</div>
CSS:
#nav {
display: block;
text-align: center;
font-size: 1em;
position: relative;
height: 3em;
width: 950px;
margin-right: auto;
margin-left: auto;
list-style-type: none;
}
#nav li {
float: left;
display: block;
width: 75px;
height: 3em;
position: relative;
}
#nav li a {
text-decoration: none;
display: block;
height: 1em;
padding-top: 1em;
padding-bottom: 1em;
}
#nav li a:hover {
color: #990000;
background-color: #999999;
}
#nav li ul {
width: 100%;
display: none;
z-index: 9999;
position: absolute;
}
#nav li ul li {
display: block;
clear: both;
width: 100%;
height: 100%;
background-color: #B5BDC8;
}
#nav li:hover ul {
display: block;
}
The idea behind all of this is to create a list, then inside that other lists to create the drop down elements....
Then, from there, display only the primary list items to begin with, then show the drop down menu on hover (or in the case of a mobile device on click by making the main list item a link to "#" thus creating and active/hover state)...
The only issue is that by using display:none it isn't screen reader friendly, however I always include site navigation at the bottom that is screen reader friendly, and SEO friendly as well.
You can see an example of this in action on this website I am working on here

Answer 3

In general, drop down menu's such as this usually aren't good practice to have for mobile sites. This is because you can't really hover over a navigation item with your finger, and pressing an item could prove difficult without zooming in on the menu.
A solution is having different CSS styles for your navigation when being viewed on a mobile device. Here is a great resource for helping you convert your navigation to be more mobile friendly:
http://css-tricks.com/convert-menu-to-dropdown/