在wordpress上显示基于移动操作系统的不同菜单

Question

I'd like to run a wordpress blog showing at jquerymobile message bar on the footer. I've set up jquerymobile into the blog and added this bit of code in the footer.php in wordpress and this is working fine. :

<div data-role="footer" data-id="foo1" data-position="fixed">
    <div data-role="navbar">
        <ul>
            <li><a href="a.html">menu1</a></li>
            <li><a href="b.html">menu2</a></li>
            <li><a href="b.html">menu3</a></li>
                    <li><a href="b.html">menu4</a></li>
    </div><!-- /navbar -->
</div> 

Now, I would like to be able to display for instance, only menu1 and menu2 when somebody is coming from an IOS OS, menu3 and menu4 when somebody is coming from an Android OS, and nothing when somebody is trying to come from any device other OS.

To be honest, I have no knowledge of php so I have been trying to add some pieces of code I've been finding crawling the forum, but without success. My last try was adding this bit of code in footer.php, using the PHP class Mobiledetect. I've installed the Mobile_Detect.php at the root of the wordpress installation of this testing website http://www.rumeurps4.fr/. With this code, no message bar is displayed.

<?php
include 'Mobile_Detect.php';
$detect = new Mobile_Detect();
if($detect->isiOS()){

  <div data-role="footer" data-id="foo1" data-position="fixed">
    <div data-role="navbar">
        <ul>
            <li><a href="a.html">menu1</a></li>
            <li><a href="b.html">menu2</a></li>


    </div><!-- /navbar -->
</div>
}
else
if($detect->isAndroidOS()){
 <div data-role="footer" data-id="foo1" data-position="fixed">
    <div data-role="navbar">
        <ul>
            <li><a href="a.html">menu3</a></li>
            <li><a href="b.html">menu4</a></li>

    </div><!-- /navbar -->
</div>
}
?>

I'm sure it's not that complicated, just lacking basic php knowledge I guess. I will keep looking, but I would really appreciate some help.