Hi folks,

 

I'm asking for your help with this vertical menu that is sending me crazy.

 

I am trying to to offer a sub menu off the main side navbar.

 

I have done it to a fashion but now the main nav title has moved to the left AND ITS MAKING ME MAD!!

 

Please take a look at the link below and look at the list item "cable and cable management" to see what i'm talking about.

 

http://www.grasskickers.co.uk/menu/menu.html

 

I've played about with this so much now that the code is probably really poorly written.

 

As always your help is very much appreciated.

 

Thanks

OD

Hi,

 

I don't understand Javascript but if you modify your Javascript for this it whould go to the position, bue the sub-menu doesn't appear.

Javascript code:

var menuids = new Array("sidenav");
var submenuoffset = 0; 

function createcssmenu() {
for (var i=0; i<menuids.length; i++) {
var ultags = document.getElementById(menuids[i]).getElementsByTagName("ul");
for (var t = 0; t < ultags.length; t++) {
	var spanref = document.createElement("span");
	spanref.innerHTML = "  ";
	ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref);
	ultags[t].parentNode.onmouseover = function() {
		this.getElementsByTagName("ul")[0].style.left = this.parentNode.offsetWidth+submenuoffset+"px";
		this.getElementsByTagName("ul")[0].style.display = "block";
	}
	ultags[t].parentNode.onmouseout = function() {
		this.getElementsByTagName("ul")[0].style.display="none";
	}
   }
 }
}

if (window.addEventListener) {
window.addEventListener("load", createcssmenu(), false);
}
else if (window.attachEvent) {
window.attachEvent("onload", createcssmenu());
}

 

Regards.

It's not the javascript code that's causing the trouble; it's the css file (although it doesn't show the position to the left when javascript/ActiveX is disabled).

 

I added background-colors first to see what was happening and saw that the | had extra width causing a space on the right, pushing it left.

.side_navbar li { background-color: pink;
position: relative;
width: 250px;
height: 18px;
display: block;
text-align: right;
padding-top: 3px;
}	

.side_navbar a{ background-color: yellow; 
text-decoration: none;
color: #444;
outline: none;
}	
.side_navbar #nav2 span{ background-color: #eee; 
color: #5c27d7; 
}

 

Make these edits first to see the extra #eee gray background at the side of |.

 

and move the position of the <span>|</span> in the markup:-

<div id="nav2"><li><a href="#">CABLE AND CABLE MANAGEMENT 
</a><span>|</span><ul><li><a href="cable.html">Cable</a></li>

 

and the | moves to the far right.

 

and to reduce the width of the gray space next to the | add a negative margin-left

.side_navbar #nav2 span{ background-color: #eee;  
color: #5c27d7; margin-left: -5px; 
}

Nice

Thanks very much Wickham.....you truly are a genius.