0

I have a menu that slides from left to right that I use for mobile devices. It is to open and close on click of the menu button. It works great on the iPhone. But when I try it on the Ipad, the menu is automatically open and there is no functionality to it. Pressing the menu button that usually would close the menu does nothing. Here is the code.

JavaScript:

<script src="https://example.com/jquery-3.1.0.min.js"></script> 
  <script type="text/javascript"> 

     (function() { 

        var bodyEl = $('body'), 
             navToggleBtn = bodyEl.find('.nav-toggle-btn'); 

         navToggleBtn.on('click', function(e) { 
             bodyEl.toggleClass('active-nav'); 
             e.preventDefault(); 
         }); 

     })(); 

           </script>

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 

<link rel="stylesheet" type="text/css" href="m.login.css"/>

</head>

<body>
<div class="container">
<nav> 

             <a href="m.home.php" class="white">Home</a><br /> 
             <hr/>
             <a href="m.order.php" class="white">Order Now</a><br />
             <hr/>
             <a href="how-it-works.php" class="white">How It Works</a><br /> 
             <hr/>
             <a href="pricing.php" class="white">Pricing</a> <br />

      </ul> 

     </nav>


   <div class="content"> 
   <div class="home_background">

<div class="home_white_header">
<table width="380" border="0" cellspacing="0">
 <tbody>
  <tr>
  <td width="200" class="menu_button_table"><a href="#" class="nav-toggle-btn"></a> </td>
  <td width="100" class="logo_table"><a href="m.home.php"><img src="images/logo_black.png" width"115" height="30" alt=""/></a></td>
 </tr>
 </tbody>
</table>

</div>
<hr />
<div class="login_box">
<div class="login_box_logo">
<center><img src="images/logo_white.png" width="230" height="60" alt=""/></center>

 </div><!-- end login box logo -->

  </div><!-- end login box -->

   Login form goes here  
  <!-- home background end --> </div>

JavaScript for menu is placed here

<!-- content end --></div>
<!-- container end --></div>

</body>
</html>

CSS:

* { 
             margin: 0; 
             padding: 0; 
         } 

         body { 
             font-family: Open Sans, Arial, sans-serif; 
             font-size: 16px;
             overflow: hidden;
             width: 1020px;

         } 

         nav { 
             position: fixed; 
             z-index: 1000; 
             top: 0; 
             bottom: 0;
             padding-top: 20px; 
             padding-left: 0px;
             width: 230px; 
             background-color: #d6d6d6; 
             transform: translate3d(-230px, 0, 0); 
             transition: transform 0.4s ease; 
             font-family: "Open Sans"; color: #000;
             font-size: 20px;


         } 
         .active-nav nav { 
             transform: translate3d(0, 0, 0); 
         } 
         nav ul { 
             list-style: none; 
             margin-top: 100px; 
         } 
         nav ul li a { 
             text-decoration: none; 
             display: block; 
             text-align: center; 
             color: #fff; 
             padding: 0px 0; 
         } 

         .nav-toggle-btn { 
             display: block; 
             position: absolute; 
             left: 10px; 
             width: 38px; 
             height: 32px; 
             background-image: url(images/m.menu-button-white.png);
         } 

         .content { 
             padding-top: 0px; 
             height: 2350px; 
             background-color: #fff; 
             text-align: center; 
             transition: transform 0.4s ease; 
        } 
         .active-nav .content { 
             transform: translate3d(230px, 0, 0); 
         }

One thing I tried was to load the jquery-3.1.0.min.js to my local server but that didn't help. I am still learning JavaScript so I am not sure what to try next. Can someone please help?

user3765759
  • 7
  • 5
  • It would be helpful to see more html. Looks like you are operating on body tag not the menu. Also, what is that stray `` end tag hanging out between the ` – atomSmasher Aug 31 '16 at 18:45
  • I updated the html. To be honest I am not sure. I got this code from a tutorial. Is it missing a
      ? Everything works great on the iPhone and Android.
     – user3765759 Aug 31 '16 at 19:02
  • Try adding touchstart to your on event. See this answer http://stackoverflow.com/a/7892971/778144. – atomSmasher Aug 31 '16 at 19:21
  • Thanks but it still only works on the iPhone even with touchstart added @atomSmasher – user3765759 Aug 31 '16 at 19:34

0 Answers0