1
メインメニューの左側にサブメニューを表示させる方法を知っていますか？それがどこにもまっすぐに飛び散るので、私はここで少しひどいです。私は自分自身でこれをすべて書いたわけではないことを認めなければならないので、どこでどのように変更できるかはわかりません。あなたが気にしないことを願っています。私がカスタマイズしたものを自由に使うことができます。このナビメニューのメニューの左にサブメニューを表示する方法は？
私は本当に助けになるでしょう。あまり前もってありがとう！スクリプトは、左から右へsubmenu位置を設定するため
/*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>
に
b[a].style.left = c.offsetWidth + "px";を変更します –
あなたを助けてくれてうれしいです。 –