javascript - 如何让子菜单出现在该导航菜单中的菜单左侧？

Question

你知道如何让子菜单出现在主菜单的左侧吗？当它突然从右边弹出到任何地方时..我在这里有点紧张。我必须承认这一切都不是我自己写的，所以我不确定在哪里或如何改变它。我希望您不要介意 - 这是我定制的免费使用。

我真的很感激帮助。提前非常感谢您!

/*navmenu-right*/

var mcVM_options = {
  menuId: "menu-vr",
  alignWithMainMenu: false
};
/* www.menucool.com/vertical/vertical-menu.*/
init_v_menu(mcVM_options);

function init_v_menu(a) {
  if (window.addEventListener) window.addEventListener("load", function() {
    start_v_menu(a)
  }, false);
  else window.attachEvent && window.attachEvent("onload", function() {
    start_v_menu(a)
  })
}

function start_v_menu(i) {
  var e = document.getElementById(i.menuId),
    j = e.offsetHeight,
    b = e.getElementsByTagName("ul"),
    g = /msie|MSIE 6/.test(navigator.userAgent);
  if (g)
    for (var h = e.getElementsByTagName("li"), a = 0, l = h.length; a < l; a++) {
      h[a].onmouseover = function() {
        this.className = "onhover"
      };
      h[a].onmouseout = function() {
        this.className = ""
      }
    }
  for (var k = function(a, b) {
      if (a.id == i.menuId) return b;
      else {
        b += a.offsetTop;
        return k(a.parentNode.parentNode, b)
      }
    }, a = 0; a < b.length; a++) {
    var c = b[a].parentNode;
    c.getElementsByTagName("a")[0].className += " arrow";
    b[a].style.left = c.offsetWidth + "px";
    b[a].style.top = c.offsetTop + "px";
    if (i.alignWithMainMenu) {
      var d = k(c.parentNode, 0);
      if (b[a].offsetTop + b[a].offsetHeight + d > j) {
        var f;
        if (b[a].offsetHeight > j) f = -d;
        else f = j - b[a].offsetHeight - d;
        b[a].style.top = f + "px"
      }
    }
    c.onmouseover = function() {
      if (g) this.className = "onhover";
      var a = this.getElementsByTagName("ul")[0];
      if (a) {
        a.style.visibility = "visible";
        a.style.display = "block";
      }
    };
    c.onmouseout = function() {
      if (g) this.className = "";
      this.getElementsByTagName("ul")[0].style.visibility = "hidden";
      this.getElementsByTagName("ul")[0].style.display = "none"
    }
  }
  for (var a = b.length - 1; a > -1; a--) b[a].style.display = "none"
}

/*nav-menu right*/

#menu-vr,
#menu-vr ul {
  width: 200px;
  position: relative;
  font-size: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  z-index: 9;
  margin-top: 135px;
  float: right;
  text-align: right;
}


/* Top level menu links style
---------------------------------------*/

#menu-vr li {
  background: url(bg.gif) repeat-x 0 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

#menu-vr li a {
  font: normal 17px Gitan Latin;
  display: block;
  color: black;
  text-decoration: none;
  line-height: 39px;
  padding-right: 26px;
  border: none;
}

#menu-vr ul li a {
  line-height: 39px;
}

#menu-vr li a.arrow:hover {
  background-image: url(../assets/ringsenberg-menue-pfeil-links.svg);
  background-repeat: no-repeat;
  background-position: 30px 12px;
}


/*Sub level menu items
---------------------------------------*/

#menu-vr li ul {
  position: absolute;
  width: 200px;
  /*Sub Menu Items width */
  visibility: hidden;
  margin: 0px;
}

#menu-vr a.arrow {
  background-image: url(../assets/ringsenberg-menue-pfeil-links.svg);
  background-repeat: no-repeat;
  background-position: 30px 12px;
}

#menu-vr li:hover,
#menu-vr li.onhover {
  transition: all .5s;
  background: rgba(198, 156, 109, .2);
  border-bottom: solid;
  border-width: 1px;
  border-color: #C69C6D;
}

#menu-vr ul li {
  background: none;
}

#menu-vr ul li:hover,
#menu-vr ul li.onhover {
  background: #FFF;
  background: rgba(198, 156, 109, .2);
  border-right: solid;
  border-width: 1px;
  border-color: #C69C6D;
}

#menu-vr li a.top {
  color: white;
  transition: all .5s;
}

#menu-vr li a.top:hover {
  color: black;
  background: rgba(226, 205, 182, 1)
}

<ul id="menu-vr">
  <li><a href="#" class="top">Home</a></li>
  <li><a href="#">a</a>
    <ul class="sub">
      <li><a href="vertical-menu#1">Vertical Menu</a></li>
      <li><a href="vertical-menu#2">Vertical Menus</a></li>
    </ul>
  </li>
  <li><a href="#">ab</a>
    <ul class="sub">
      <li><a href="#">Sub Item 3.1</a></li>
      <li><a href="#">Sub Item 3.2</a></li>
      <li><a href="#">Sub Item 3.3</a></li>
      <li><a href="#">Sub Item 3.4</a></li>
      <li><a href="#">Sub Item 3.5</a></li>
    </ul>
  </li>
  <li><a href="#">abc</a></li>
  <li><a href="#">abcd</a>
    <ul class="sub">
      <li><a href="#">Sub Item 5.1</a></li>
      <li><a href="#">Sub Item 5.2</a></li>
      <li><a href="#">Sub Item 5.3</a></li>
    </ul>
  </li>
</ul>

Answer 1

子菜单出现在右侧是因为脚本设置子菜单位置从左到右，需要将其更改为从右到左。

更改了b[a].style.left = c.offsetWidth + "px";

至b[a].style.right = c.offsetWidth + "px";

/*navmenu-right*/

var mcVM_options = {
  menuId: "menu-vr",
  alignWithMainMenu: false
};
/* www.menucool.com/vertical/vertical-menu.*/
init_v_menu(mcVM_options);

function init_v_menu(a) {
  if (window.addEventListener) window.addEventListener("load", function() {
    start_v_menu(a)
  }, false);
  else window.attachEvent && window.attachEvent("onload", function() {
    start_v_menu(a)
  })
}

function start_v_menu(i) {
  var e = document.getElementById(i.menuId),
    j = e.offsetHeight,
    b = e.getElementsByTagName("ul"),
    g = /msie|MSIE 6/.test(navigator.userAgent);
  if (g)
    for (var h = e.getElementsByTagName("li"), a = 0, l = h.length; a < l; a++) {
      h[a].onmouseover = function() {
        this.className = "onhover"
      };
      h[a].onmouseout = function() {
        this.className = ""
      }
    }
  for (var k = function(a, b) {
      if (a.id == i.menuId) return b;
      else {
        b += a.offsetTop;
        return k(a.parentNode.parentNode, b)
      }
    }, a = 0; a < b.length; a++) {
    var c = b[a].parentNode;
    c.getElementsByTagName("a")[0].className += " arrow";
    b[a].style.right = c.offsetWidth + "px";
    b[a].style.top = c.offsetTop + "px";
    if (i.alignWithMainMenu) {
      var d = k(c.parentNode, 0);
      if (b[a].offsetTop + b[a].offsetHeight + d > j) {
        var f;
        if (b[a].offsetHeight > j) f = -d;
        else f = j - b[a].offsetHeight - d;
        b[a].style.top = f + "px"
      }
    }
    c.onmouseover = function() {
      if (g) this.className = "onhover";
      var a = this.getElementsByTagName("ul")[0];
      if (a) {
        a.style.visibility = "visible";
        a.style.display = "block";
      }
    };
    c.onmouseout = function() {
      if (g) this.className = "";
      this.getElementsByTagName("ul")[0].style.visibility = "hidden";
      this.getElementsByTagName("ul")[0].style.display = "none"
    }
  }
  for (var a = b.length - 1; a > -1; a--) b[a].style.display = "none"
}

/*nav-menu right*/

#menu-vr,
#menu-vr ul {
  width: 200px;
  position: relative;
  font-size: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  z-index: 9;
  margin-top: 135px;
  float: right;
  text-align: right;
}


/* Top level menu links style
---------------------------------------*/

#menu-vr li {
  background: url(bg.gif) repeat-x 0 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

#menu-vr li a {
  font: normal 17px Gitan Latin;
  display: block;
  color: black;
  text-decoration: none;
  line-height: 39px;
  padding-right: 26px;
  border: none;
}

#menu-vr ul li a {
  line-height: 39px;
}

#menu-vr li a.arrow:hover {
  background-image: url(../assets/ringsenberg-menue-pfeil-links.svg);
  background-repeat: no-repeat;
  background-position: 30px 12px;
}


/*Sub level menu items
---------------------------------------*/

#menu-vr li ul {
  position: absolute;
  width: 200px;
  /*Sub Menu Items width */
  visibility: hidden;
  margin: 0px;
}

#menu-vr a.arrow {
  background-image: url(../assets/ringsenberg-menue-pfeil-links.svg);
  background-repeat: no-repeat;
  background-position: 30px 12px;
}

#menu-vr li:hover,
#menu-vr li.onhover {
  transition: all .5s;
  background: rgba(198, 156, 109, .2);
  border-bottom: solid;
  border-width: 1px;
  border-color: #C69C6D;
}

#menu-vr ul li {
  background: none;
}

#menu-vr ul li:hover,
#menu-vr ul li.onhover {
  background: #FFF;
  background: rgba(198, 156, 109, .2);
  border-right: solid;
  border-width: 1px;
  border-color: #C69C6D;
}

#menu-vr li a.top {
  color: white;
  transition: all .5s;
}

#menu-vr li a.top:hover {
  color: black;
  background: rgba(226, 205, 182, 1)
}

<ul id="menu-vr">
  <li><a href="#" class="top">Home</a></li>
  <li><a href="#">a</a>
    <ul class="sub">
      <li><a href="vertical-menu#1">Vertical Menu</a></li>
      <li><a href="vertical-menu#2">Vertical Menus</a></li>
    </ul>
  </li>
  <li><a href="#">ab</a>
    <ul class="sub">
      <li><a href="#">Sub Item 3.1</a></li>
      <li><a href="#">Sub Item 3.2</a></li>
      <li><a href="#">Sub Item 3.3</a></li>
      <li><a href="#">Sub Item 3.4</a></li>
      <li><a href="#">Sub Item 3.5</a></li>
    </ul>
  </li>
  <li><a href="#">abc</a></li>
  <li><a href="#">abcd</a>
    <ul class="sub">
      <li><a href="#">Sub Item 5.1</a></li>
      <li><a href="#">Sub Item 5.2</a></li>
      <li><a href="#">Sub Item 5.3</a></li>
    </ul>
  </li>
</ul>