Problem
=======

The side menubar is moving at 1 pixel per frame and catches up with the position of the mouse. When releasing the left mouse button, the menu stays there and CSS does not do the transitioning according to whether 'cbMenu' is checked or not. The browsers I've tried that have this behavior is in Firefox and Chrome.

Also, if I move my mouse too fast to the right, the left position of the menu will exceed the left side of the browser window, which is 0, and it is equivalent to setting the menu's left property greater than 0 in CSS. The menu won't move since the "onmousemove" event is slow to react. Sometimes the menu moves very fast but not always.

Code
====

HTML
----

The code below is actually written in PHP, so I'm only showing the top half.

```
  <div class="header_menu_outer">
    <input type="checkbox" id="cbMenu" class="cbmenu" name=""
      value="" />
    <div id="mainmenu" class="header_menu_inner">
      <header id="header" class="header">
        <label for="cbMenu" class="menuicon_label">&#9776;
        </label>
        <h1 class="header_h1">Grayson Peddie's Course Notes</h1>
      </header>

      <nav id="nav" class="nav">
        <ul class="nav_menu">
          <li class="nav_menu_li">
            <a class="nav_menu_a" href="/">Home</a>
          </li>
          <?php for($i = 0; $i < count($cnmdirs); $i++) { ?>
          <li class="nav_menu_li">
            <a class="nav_menu_a" href="/<?=$cnmdirs[$i] ?>"><?=$cnmNames[$i]["title"] ?></a>
          </li>
          <?php } ?>
        </ul>
      </nav>
    </div>
  </div>

  <main id="content" class="content" role="main">
    <div class="inner_header">
      <label for="cbMenu" class="menuicon_label">&#9776;
      </label>
      <h2 class="inner_header_h2"><?=$pageTitle ?></h2>
    </div>

```

The closing tag for '' is in a different PHP file in MVC (model, view, and controller).

CSS
---

```
@media screen and (max-width: 1200px ) {
  #cbMenu:checked + .header_menu_inner { left: 0; transition: left 0.5s linear; }
  #cbMenu + .header_menu_inner { transition: left 0.5s linear; }
  .menuicon { display: table-cell; width: 2.5em; line-height: 2.5em; text-align: center; }
  body {
    grid-template-columns: 0 auto;
  }
  .header_menu_inner { left: -400px; z-index: 10; }
}

```

Javascript
----------

```
var mouseCX = 0; // Store the position of the mouse coordinate in X.
var mainmenu = document.getElementById("mainmenu");
var content  = document.getElementById("content");
var cbMenu = document.getElementById("cbMenu");
var menu_offsetX = 0;
var mouseDown = false;

// Get the current x-position of the mouse and store in mouseCX. "C" is "client."
document.body.onmousemove = function(event) {
    // Get the position of the mouse or touch point.
    mouseCX = (typeof event.touches !== "undefined") ? event.touches[0].clientX :
        event.clientX;
    // Only if the finger on the touchscreen or the left mouse button is held down.
    if(mouseDown)
    {
        // Don't exceed the browser's left X coordinate of 0 or higher.
        if(mainmenu.offsetLeft <= 0)
        {
            // Move the side menu according to the stored distance
            // between the mouse position and initial menu position,
            // along with the current position of the mouse or touch.
            mainmenu.style.left = (mouseCX - menu_offsetX) + 'px';
        }
    }
}

var beginMenuMovement = function()
{
    // For the first line, if the side menu bar is open and if the mouse cursor is
    // not positioned over the side menu bar, don't perform the rest of the code.
    // Or in the second line, if the menu bar is not opened and starts from the center
    // of the screen, then again, do not perform instructions in the onmousedown event.
    if((cbMenu.checked && !this.matches('#mainmenu')) ||
       (!cbMenu.checked && mouseCX > 100))
        return false;

    // The web page must be within 1200 pixels in width as the menu
    // is hidden by default.
    if(window.innerWidth < 1200)
    {
        mouseDown = true;
        // If the menu's left position is -400 pixels, then the
        // absolute value is 400 pixels. Add in the position of
        // the mouse in X coordinate to get the distance between
        // the menu and mouse position.
        menu_offsetX = Math.abs(mainmenu.offsetLeft) + mouseCX;
    }
}

mainmenu.onmousedown = beginMenuMovement;
content.onmousedown = beginMenuMovement;
mainmenu.ontouchstart = beginMenuMovement;
content.ontouchstart = beginMenuMovement;

var endMenuMovement = function()
{
    if(window.innerWidth < 1200)
    {
        mouseDown = false;

        // The entire width of the menu would be 400 pixels. Divide by 2 to
        // get 200 pixels at a negative value. If the position of the menu
        // is less than -200 pixels, the cbMenu should be left unchecked and
        // should transition back to -400 pixels. If the left position is
        // greater than -200 pixels, the cbMenu should be checked and the
        // CSS transition should begin transitioning to 0.
        // Related in CSS: transition: left 0.5s linear
        menu_minWidth = (mainmenu.offsetWidth / 2) - mainmenu.offsetWidth;
        if(mainmenu.offsetLeft > menu_minWidth)
        {
            cbMenu.checked = true;
        }
        else
        {
            cbMenu.checked = false;
        }
    }
}

mainmenu.onmouseup = endMenuMovement;
content.onmouseup = endMenuMovement;
mainmenu.ontouchend = endMenuMovement;
content.ontouchend = endMenuMovement;

```

Expected Behavior
=================

I want the menu to react instantly according to the position of the mouse cursor.

HTML Code Explained:
====================

The slideout menu uses a checkbox trick for those who have JavaScript turned off. If a user clicks in a hamburger label (☰), the menu will slide out until the user closes the menu by clicking in the hamburger label. This is useful if a user who browses the Internet uses NoScript in Firefox as there can be bad/malicious scripts floating in the Internet. The only functionality a user won't be able to do without Javascript is swipe from left to right to open the menu from the side of a touchscreen.

Note:
=====

No jQuery code please. The jQuery library is bloated in file size, so I want to keep my script small. Sure, jQuery is great and easy to use, but many people might forget how big the jQuery library is.

Also, I've included a touch tag, although I'm only focusing on using a mouse. I have implemented a single touch functionality, but I couldn't get the menu to slide out.

Question
========

In addition to my question from the title of my thread regarding how to get the menu to react in according to the position of the mouse, how can I get the code for "onmouseup" to behave similar to CSS transition?