Question

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?

Javascript/css sliding nav works on iphone but not ipad

0 个答案: