如何使侧面菜单栏根据鼠标位置移动并立即做出反应？

编程问答 2022-08-13

问题描述

问题

侧面菜单栏以每帧1像素的速度移动，并追上鼠标的位置。释放鼠标左键时，菜单将停留在该位置，并且CSS不会根据是否选中'cbMenu'进行转换。我尝试过的具有这种行为的浏览器是在Firefox和Chrome中。

此外，如果我将鼠标移至右侧太快，菜单的左侧位置将超出浏览器窗口的左侧，即0，这等效于将菜单的left属性设置为大于0。 CSS。由于“ onmousemove”事件反应缓慢，因此菜单不会移动。有时菜单移动非常快，但并非总是如此。

代码

HTML

下面的代码实际上是用PHP编写的，所以我只显示上半部分。

  <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>

''的结束标记位于MVC中的另一个PHP文件中（模型，视图和控制器）。

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;

预期行为

我希望菜单根据鼠标光标的位置立即做出反应。

解释的HTML代码：

对于那些关闭了JavaScript的用户，滑出菜单使用复选框技巧。如果用户单击汉堡标签（☰），菜单将滑出，直到用户通过单击汉堡标签关闭菜单。如果浏览Internet的用户在Firefox中使用NoScript，这很有用，因为Internet中可能会漂浮有不良/恶意脚本。从左向右滑动以从触摸屏的侧面打开菜单。如果没有Javascript，用户将无法执行的唯一功能。

注意：

请没有jQuery代码。 jQuery库的文件大小过大，因此我想使脚本保持较小。当然，jQuery非常棒且易于使用，但是许多人可能会忘记jQuery库的大小。

尽管我只专注于使用鼠标，但我还添加了一个触摸标签。我已经实现了单点触摸功能，但无法使菜单滑出。

问题

除了我的线程标题中的有关如何使菜单根据鼠标的位置做出反应的问题之外，我如何获得“ onmouseup”的代码以类似于CSS转换？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmljavascriptmousetouch