Forums

tannercampbell

http://3rconcepts.com/test

Client has suddenly asked for the site to be iPad compatible ... I figured no big deal, iPad has a grown up browser, if it works in Safari it works on iPad ... whoops. You can't hover on an iPad, so my drop downs aren't showing up. Is there a quick to moderately quick fix for this? Or should I just build another header with a different menu system and throw it up on ipad.3rconcepts.com or something?

Thanks.

JoshWhite

I'm wondering if you can make it work using javascript.

For example, go to www.woot.com on your ipad or iphone - If you look at the 4 blocks of "other woots" on the right, they have a hover status that shows a little text bubble of what the item is.

On the ipad/iphone, when you tap any of those links, instead of just going there, the first tap brings up that more info bubble. A second tap follows the link.

Could one do something similar on purpose using a javascript based rollover drop down? I'm definitely no expert in javascript so this is just me thinking out loud :)

soap

hovers for normal browsers. clicks for mobile devices.

tannercampbell

Soap -- could you elaborate on what you just said? I don't think I've ever used clicks? like a:click {}?

TheDoc

Hmmm, not working at all?

On my iPhone if I click on a menu that has a drop down, it'll show me the drop down and then I have to click again for my page choice.

jhl

alternatively you can use :focus

tannercampbell

JHL & Soap. I'm new to CSS could you elaborate on what you mean when you say click and focus? I don't have the strongest understanding of all variables just yet :/

shagzdesign

They mean that Mobile Safari translates the drop down menu's hover to work with a click. Meaning that when you are using Mobile Safari you press once on the drop down for it to open, and then again on your selection.

iancoates

Check out www.cssplay.co.uk. Stu has developed a lot of css only menus for mobile and ipad browsers.

rwardjr

this above link http://3rconcepts.com/test goto ERROR 404 - PAGE NOT FOUND

Darrenbrett

Could someone clarify: does this mean the drop-menu will NOT work in Safari mobile, or only that its slightly more cumbersome?

AndyHowells

A hover drop down won't work (because there is no hover) however, the way I've had success with menus is converting them into full on drop downs.

mikehas

Has anyone come up with a solution for this? I have a drop down menu that displays the submenu on hover of a parent element.
I use jquery to disable default behavior so that on click of the parent element the submenu is shown. But now I want on the second click the default behavior to be enabled again. Anyone any ideas. This is the code I use to prevent default behavior:

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

Cheers,
Michael

Hompimpa

<script type="text/javascript">
	$(document).ready(function() {
	  $('#nav > li > a').click(function() {
	    if ($(this).parent().children('ul').length) {
	      return false;
	    } else {
              return true;
            }
	  });
	});
	</script>

????

Jeyjoo

Here is the simplest solution I found. Adding the following line inside to your span, li or anchor causes the iPad to behave like safari on mac and onclick open the dropdown

  onClick="return true"

So on tap, the dropdown opens on iPad.

See it in action here - http://www.naturalsal.it/

treehouse : what would you like to learn today?

Forums

CSS Dropdown menu -- for the iPad?