Neither is really the "best way," especially Javascript. Mobile phones return us to the 90's when bandwidth is *really* important, many users have to pay for bandwidth, and each cycle of memory eats both battery and bandwidth. I can read on my Android what's using the most battery, and almost see it drain on heavy sites.
The best way IMO is to detect it at a server level by user agent. On linux with .htaccess:
RewriteCond %{HTTP_USER_AGENT} android.+mobile|blackberry|iphone|ipod|ipad [NC]
RewriteRule ^$ /mobile-phone-site.php [L]
But, in your case, if it's **only** the menu you want to modify (I'm guessing it's not, as other parameters need to be modified for mobile,) You can use the same method in PHP:
$ua = $_SERVER['HTTP_USER_AGENT'];
switch ($ua) {
case preg_match('/android.+mobile/i'):
// Android menu
break;
case preg_match('/iphone|ipod/i'):
// iphone/ipod menu - they're generally the same
break;
case preg_match('/ipad/i'):
// ipad, whole new world
break;
case preg_match('/blackberry/i'):
// Even these have different handling depending on model
default:
// normal browsers
}
That's of course really incomplete, as it will only address those devices. To pander to all mobile browsers, back to the 90's again, with a long list of UA's . . .