0
ここにこのメニューがあります。それはうまく動作します。私はページの左側と右側にそれぞれ1つずつ必要です。私は左のメニューだけを持っていると完全に動作します。しかし、すぐに私は右のメニューのJavaScriptコードを追加すると、左のもののjsに影響するように見え、サブメニューはもう表示されません。右メニューのjavascriptを追加すると、左側のサブメニューが表示されません。しかし、なぜ？
誰かお手伝いできますか？
が
/*navmenu-left*/
var mcVM_options = {
menuId: "menu-v",
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"
}
/*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-v,
#menu-v ul {
width: 200px;
position: relative;
font-size: 0;
list-style: none;
margin: 0;
padding: 0;
display: block;
z-index: 9;
margin-top: 135px;
float: left;
}
/* Top level menu links style
---------------------------------------*/
#menu-v li {
background: url(bg.gif) repeat-x 0 2px;
list-style: none;
margin: 0;
padding: 0;
}
#menu-v li a {
font: normal 17px Gitan Latin;
display: block;
color: black;
text-decoration: none;
line-height: 39px;
padding-left: 26px;
border: none;
}
#menu-v ul li a {
line-height: 39px;
}
#menu-v li a.arrow:hover {
background-image: url(../assets/ringsenberg-pfeil-rechts.svg);
background-repeat: no-repeat;
background-position: 170px 12px;
}
/*Sub level menu items
---------------------------------------*/
#menu-v li ul {
position: absolute;
width: 200px;
/*Sub Menu Items width */
visibility: hidden;
margin: 0px;
}
#menu-v a.arrow {
background-image: url(../assets/ringsenberg-pfeil-rechts.svg);
background-repeat: no-repeat;
background-position: 170px 12px;
}
#menu-v li:hover,
#menu-v li.onhover {
transition: all .5s;
background: rgba(198, 156, 109, .2);
border-bottom: solid;
border-width: 1px;
border-color: #C69C6D;
}
#menu-v ul li {
background: none;
}
#menu-v ul li:hover,
#menu-v ul li.onhover {
background: #FFF;
background: rgba(198, 156, 109, .2);
border-right: solid;
border-width: 1px;
border-color: #C69C6D;
}
#menu-v li a.top {
color: white;
transition: all .5s;
}
#menu-v li a.top:hover {
color: black;
background: rgba(226, 205, 182, 1)
}
/*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-left: 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-v">
<li><a href="#" class="top">Home</a></li>
<li><a href="#">Instrumente</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="#">Restauration</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="#">Grafikdesign</a></li>
<li><a href="#">CNC-Fertigung</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>
<ul id="menu-vr">
<li><a href="#" class="top">Home</a></li>
<li><a href="#">Instrumente</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="#">Restauration</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="#">Grafikdesign</a></li>
<li><a href="#">CNC-Fertigung</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>
！関数名..ありがとう！ –