Lots of ways. But if you're already using a process that requires js, may as well put the UA detection into the same function. If the user doesn't have js, no point in even checking.
Now, what about other mobiles? You'd want to screen out androids and so on too wouldn't you?
Alternative approach: Can you code it to detect mouse-hovers that are not clicks? This alone might make the mobiles problem go away. In a browser, a click is always preceded by a hover. In a tablet, there's only one mouse event. (Talking here about vanilla html, not custom-written apps.)
Oh, oops, you're thinking about position. I thought you were concerned about the opened-out navigation bar taking up too much real estate. So I was thinking only of disabling the popup element.
I don't have the exact UA-detection formula at my fingertips, but it's quite basic; you can find it anywhere, down to and including w3schools.
It's not really a matter of "disabling" a script. You'd be adding one nest to the structure:
if (action is mouse-hover) THEN if (user-agent is on this short list-- or is NOT on this other short list, whichever is convenient and appropriate) THEN carry on with the function.
Menu activation is something that typically happens more than once on a page, let alone more than once on a site, so you probably don't want to check the UA every time. Check once and set either a global variable or a cookie, depending on how long you want it to last.
:: detour here to do what I should have done in the first place: check the actual link with an iPad ::
There's a preliminary hiccup where the navigation footer expands and drifts upward as I scroll, but as soon as I "click" it collapses and stays at the bottom. There may be a glitch in the way your source site detects user-agents. But, hey, nothing wrong with writing code that's better than the original ;)