Multi Level Dropdown and iPhone

[MargateSteve]

I am trying to implement a multi level dropdown menu that will work the same way on iPhone and other touchscreen devices as it does in normal browsers.

 

An example of what I am after can be found at http://www.margate-fc.com/welcome.php. That has been created using Spry and pulls the menu from my database into an unordered list. However, if there is a better way to do this with CSS or even jQuery, I am happy to go down that route. If have look at a few suggestions around the web but never got any to work. The main problem I have had is not being able to make the item containers all flexible width.

 

This works fine but the problem I am having is that I am trying to get the top level items to also link to a page. Basically if someone does not like using drop down navigation, they can click to go to a category page. There is no problem with this on a standard desktop browser as it can differentiate between a hover and a click. However, I have found no way to do this on a touch screen device.

 

My theory is that if I can set up the script to treat a single tap as a hover and a double tap as a click this would work fine but whether this can be done via the javascript in spry, or if there is a way of completely coding it separately, I have no clue!

 

Any suggestion would be greatly appreciated.

Thanks in advance

Steve

 

The code to pull the menu from the database

// create build menu function
function build_menu($data, $id=0, $pre='  '){
// for every bit of data, call it $row
foreach ($data[$id] as $row){
// if $data[$row['menu_id']] exists...
	if (isset($data[$row['id']])){
// then do this...
// display hyperlink/s in a list
		echo "$pre<li class=\"MenuBarItemSubmenu\"><a  href=\"/$row[link]\">".$row['label']."</a>\n";
// build the menu
		echo "$pre  <ul>\n";
		build_menu($data, $row['id'], $pre.'    ');
		echo "$pre  </ul>\n$pre</li>\n";
// if $data[$row['menu_id']] doesn't exist...
// just show the rest of the hyperlinks in a list
	} else echo "$pre<li><a href=\"/$row[link]\">$row[label]</a></li>\n";
}
}
// select menu items from the `menus` table
$res = mysql_query('SELECT id, label, link , parent FROM menu ORDER BY parent, sort DESC, label') or die(mysql_error());
// pull table records until there is none and assign them to arrays
while ($row = mysql_fetch_assoc($res)) $data[$row['parent']][] = $row;
//print_r($data);
// build the multi layer menu
echo '<ul id="MenuBar">',"\n";
build_menu($data);
echo '</ul>';

 

The spry menu js is at

http://www.margate-fc.com/inc/spry/Spry-UI-1.7/includes/SpryMenu.js