向右打开的菜单栏

向右打开的菜单栏

开发工具与关键技术：MVC，HTML、JavaScript
撰写时间：2019.06.09

实现一个鼠标移上去之后可以向右打开隐藏域（菜单栏），鼠标移开菜单栏又隐藏
导航栏隐藏时的样子：（鼠标未移上去时和鼠标移开时的样子）

然后当我把鼠标移到“慧管货”那里的时候，菜单栏就会从右边出现：

这个用的大多数都是 onmouseover和onmouseout，一个是鼠标移到目标上 一个是鼠标移开时，这个方法可以用jquery-3.2.1.min.js 或者 jquery.form.min.js 插件就能实现效果。
下面就是框架的布局：
最外层用<table border="0" cellpadding="0" cellspacing="0" width="100%">...</table>
Border：边框 ，Cellpadding：单元格边距，cellspacing：单元格间距，width：宽度
侧边的导航用 <ul>...</ul> 标签


隐藏域的结构：

这只是拿了销售那部分出来分析，剩下的其实都是一样的，先给一个大的框架，里面分成两个部分，每部分里面又装着几部分…

以上内容是对框架的搭建的简单说明，下面就要实现效果：

<script>
$(function () {
     $(".main").css("height", ($(window).height() - 97) + "px");
         /* 鼠标移出左侧菜单的时候，隐藏二级菜单 */
      $(".leftMenu").hover(function () {// 对div的处理
          t = setTimeout(function () {
             hideSecondMenu();
          }, 10);
       });
 });
// 打开二级菜单
function showMenuDiv(obj) {
   // 移除一级菜单的选中样式
   $(".icon").parent().removeClass("select");
   // 关闭全部的二级菜单
   $(".mGoodsSon").hide();
   // 获取一级菜单id
   var id = $(obj).attr("id");
   // 根据一级菜单id，获取二级菜单id，并打开二级菜单
   $("#" + id + "Div").show();
}
// 给一级菜单增加选中样式
function addMenuSelect(obj) {
    // 获取二级菜单id
    var id = $(obj).attr("id");
    // 获取一级菜单id
    id = id.substring(0, 5);
    // 给一级菜单增加选中样式
    $("#" + id).addClass("select");
}
var t;
// 解决div中存在ul时，频繁调用onmouseout方法的问题
// 解决setTimeout对象传递问题
 // 延迟关闭二级菜单
function delayHideSecondMenu(obj) {
   var showsecondmenu = ($(obj).attr("secondmenu"));
     if ($('#' + showsecondmenu).is(":visible")) {
         return;
      }
      t = setTimeout(function () {
           hideSecondMenu();
      }, 10);
}
// 清除延迟事件
 function clearTime() {
    clearTimeout(t);
}
// 关闭二级菜单
 function hideSecondMenu() {
     $("#firstmenu li").removeClass("select");
     // 隐藏二级菜单
     $(".secondMenu").hide();
}
// 展示二级菜单
  function showSecondMenu(obj) {
     // 因为关闭二级菜单的时候存在延时关闭所二级菜单，所以在打开二级菜单的时候也需要延时打开，否则容易出现打开另外一个二级菜单之后调用关闭所有二级菜单的方法。
     t = setTimeout(function () {
         delayShowSecondMen(obj);
      }, 20);
  }
 function delayShowSecondMen(obj) {
    $("#firstmenu li").removeClass("select");
    // 隐藏二级菜单
    $(".secondMenu").hide();
    var secondmenu = $(obj).attr("secondmenu");
     $(obj).addClass("select");
    var clientHeight = window.document.body.clientHeight;
    var menuHeight = $("#" + secondmenu).css("height");
        menuHeight = menuHeight.substring(0, menuHeight.indexOf("px"));
    var top = $("#" + secondmenu).css("top");
        top = top.substring(0, top.indexOf("px"));
    if (clientHeight - menuHeight < top) {
         top = clientHeight - menuHeight - 20;
    }
    $("#" + secondmenu).css("top", top + "px");
$("#" + secondmenu).show();
}
    </script>