Headers and Footers with <li> click transitions

Headers and Footers with <li> click transitions

Hello,
So I'm new to JQuery mobile, and so I'm still trying to firmly grasp how it deals with pages. 
What I'm trying to do is have an unordered list <ul> with list items <li> under to make a kind of hierarchy menu. I have a header and a footer in the page that I want to stay even when the user clicks on one of the list items.

What JQuery mobile is doing is creating a new header with a title of clicked list item, and then showing subsequent lists. What I want to do is keep that original header and footer even when the user clicks on the list item. How can I do this? Here is my code.

  2. <!DOCTYPE html>

  4. <html>
  5. <head>
  6.     <link rel="stylesheet" type="text/css" href="../js/lib/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
  7.     <link rel="stylesheet" type="text/css" href="../css/NewProduct.css">
  8.        <script type="text/javascript" src="../js/lib/jquery-1.8.1.js"></script>
  9.     <script type="text/javascript" src="../js/lib/jquery.mobile-1.2.0/jquery.mobile-1.2.0.js"></script>
  10.     <script type="text/javascript" src="../js/config/config.js"></script>    
  11.     <script type="text/javascript" src="../js/objects/database.js"></script>
  12.     <script type="text/javascript" src="../js/objects/session.js"></script>
  13.     <script type="text/javascript" src="../js/globals.js"></script>
  14.     <script type="text/javascript" src="../js/views/NewProduct.js"></script>

  16.     <title>New Product</title>
  17. </head>

  19. <body>
  20. <div data-role="page">

  22.     <div data-role="header" data-theme="b" >
  23.     <a href="#" class="ui-btn-left" data-rel="back" data-icon="back"  data-add-back-btn="true" >Back</a>
  24.         <h1>New Product</h1>
  25.     </div>

  28. <input type="search" name="search" id="searchProducts" value="" data-mini="false" placeholder="Product or UPC"/>

  30. <ul data-role="listview" data-autodividers="true" data-divider-theme="d">
  31.     
  32. <li><a id="kraft" data-transition="slide">Kraft</a>
  33.        
  34.         <ul data-role="listview" data-autodividers="true" data-divider-theme="d">
  35.            
  36. <li><a id="kraft-Dairy" data-transition="slide">Dairy</a>
  37.                 
  38.         <ul data-role="listview" data-autodividers="true" data-divider-theme="d">
  39.                     
  40. <li><a id="kraft-Dairy-SqueezyCheesy">Squeezy Cheesy</a></li>
  41.                         
  42. <li><a  id="kraft-Veggies-WholeMilk">Whole Milk</a></li>
  43. </ul>
  44.                     
  45.         </li>
  46.                 
  47. <li><a  id="kraft-Veggies" data-transition="slide">Veggies</a></li>
  48.                 
  49. </ul>
  50.             
  51.         </li>
  52.         
  53. <li><a  id="nestle" data-transition="slide">Nestle</a></li>
  54.         
  55. <li><a  id="pillsbury" data-transition="slide">Pillsbury</a></li>
  56. </ul>  
  57.     
  58.       <div data-role="footer" data-theme="c" class="ui-bar" data-position="fixed" style="padding:0;">
  59.           <a href="#" class="ui-btn-left" data-icon="ROER-burrisLogo" data-iconpos="notext"></a>
  60.           <h4>Prototype</h4>
  61.           <p class="ui-btn-right"><img data-inline="true" src="../img/ROERLogo-03.png" width="40" height="34"></p>      
  62.       </div>
  63.     
  64.     
  65.     </div>
  66. </body>
  67. </html>