Slide-in menu doesn't work
Hi... I'm building a new mobile site using jQM 1.4.3, and I'm wondering if someone can help me resolve an issue with my slider menu (if that is where the problem is!) I've streamlined my html here to demonstrate the issue.
Here are the steps to duplicate the problem:
1. From the Home page, click the "More" button on the bottom navbar. The slider menu opens.
2. Click Music. The Music page loads.
3. Click the "More" button on the bottom again. The slider menu opens.
4. Click Home. The Home page loads.
5. Click the "More" button the bottom again. Nothing happens. The slider won't open.
I'm able to repeat this behavior every time from either page. I can't seem to figure out what is causing this behavior!
I'd be so grateful to anyone who can help me solve the mystery!!! :)
Thank you in advance!!
-Jeanne
<!--////////////////////////HOME PAGE//////////////////////////-->
<div data-role="page" id="home" data-add-back-btn="true" data-theme="a">
<div data-role="header" data-position="fixed" data-theme="a">
<h1>HOME</h1>
<a href="#" data-rel="back" data-transition="slide" class="ui-btn ui-alt-icon ui-icon-carat-l ui-btn-icon-left ui-nodisc-icon" data-iconshadow="false"></a>
</div>
<div data-role="panel" id="fullmenu">
<div>
<ul data-role="listview">
<li><a href="#home" data-transition="slide">Home</a></li>
<li><a href="#music" data-transition="slide">Music</a></li>
</ul>
</div>
</div>
<!-- /panel -->
<div role="main" class="ui-content">
HOME PAGE COMING SOON
</div>
<div data-role="footer" data-position="fixed" data-theme="a">
<div data-role="navbar" data-iconpos="top">
<ul>
<li><a href="#music" data-transition="slide" data-icon="music" class="ui-nodisc-icon" data-iconshadow="false">Music</a></li>
<li><a href="#videos" data-transition="slide" data-icon="video" class="ui-nodisc-icon" data-iconshadow="false">Videos</a></li>
<li><a href="#photos" data-transition="slide" data-icon="photos" class="ui-nodisc-icon" data-iconshadow="false">Photos</a></li>
<li><a href="#social" data-icon="social" class="ui-nodisc-icon" data-iconshadow="false">Social</a></li>
<li><a href="#fullmenu" data-icon="more" class="ui-nodisc-icon" data-iconshadow="false">More</a></li>
</ul>
</div>
</div>
</div>
<!--////////////////////////MUSIC PAGE//////////////////////////-->
<div data-role="page" id="music" data-add-back-btn="true" data-theme="a">
<div data-role="header" data-position="fixed" data-theme="a">
<h1>MUSIC</h1>
<a href="#" data-rel="back" data-transition="slide" class="ui-btn ui-alt-icon ui-icon-carat-l ui-btn-icon-left ui-nodisc-icon" data-iconshadow="false"></a>
</div>
<div data-role="panel" id="fullmenu">
<div>
<ul data-role="listview">
<li><a href="#home" data-transition="slide">Home</a></li>
<li><a href="#music" data-transition="slide">Music</a></li>
</ul>
</div>
</div>
<!-- /panel -->
<div role="main" class="ui-content">
MUSIC PAGE COMING SOON
</div>
<div data-role="footer" data-position="fixed" data-theme="a">
<div data-role="navbar" data-iconpos="top">
<ul>
<li><a href="#music" data-transition="slide" data-icon="music" class="ui-nodisc-icon" data-iconshadow="false">Music</a></li>
<li><a href="#videos" data-transition="slide" data-icon="video" class="ui-nodisc-icon" data-iconshadow="false">Videos</a></li>
<li><a href="#photos" data-transition="slide" data-icon="photos" class="ui-nodisc-icon" data-iconshadow="false">Photos</a></li>
<li><a href="#social" data-icon="social" class="ui-nodisc-icon" data-iconshadow="false">Social</a></li>
<li><a href="#fullmenu" data-icon="more" class="ui-nodisc-icon" data-iconshadow="false">More</a></li>
</ul>
</div>
</div>
</div>