title: Using a jquery added class to move a mobile menu onscreen
body: <p>I have a mobile menu that slides to the left from off the screen to the right. It works very well using the below code. However, when it's off the screen, I can actually scroll my mobile view over to the right and see it off the screen rather than not be shown at all, and the mobile screen width staying put. How do I fix this issue?</p>
  
  <pre><code>.mobile-menu {
  width:200px;
  border:1px solid #eee;
  background-color:#f2f2f2;
  height:285px;
  position:absolute;
  top:35px;
  right:-200px;
  z-index:99999;
  display:none;
  
  -webkit-transition: right 0.1s ease-out;  /* Chrome 1-25, Safari 3.2+ */
   -moz-transition: right 0.1s ease-out;  /* Firefox 4-15 */
     -o-transition: right 0.1s ease-out;  /* Opera 10.50–12.00 */
        transition: right 0.1s ease-out;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
  }
  .mobile-on-screen {
  right:0 !important;
  display:block;
  }
  </code></pre>