如何獲取子菜單顯示在此navmenu菜單的左側？

Question

你知道我怎樣才能讓子菜單出現在主菜單的左邊？當它彈出到右側無處..我在這裏有點過度訓練。我不得不承認，我沒有自己編寫所有這些，所以我不確定我能在哪裏或如何改變這一點。我希望你不介意 - 這是我自定義的免費使用。

我會真的appreaciate幫助。提前感謝你！

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

子菜單右邊出現，因爲腳本設置從左至右submenu位置，你需要將其更改爲從右到左。

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