JavaScript Forum

**thomashw** · 01-03-2008, 03:24 PM

I'm trying to make a vertical menu which originally can expand by two, to expand by three.

Could someone help?

Here is my HTML file. I've made the necessary edits for it, but the third option is currently not working.

Code:

<ul id="menu" class="menu">
<li><a href="http://www.javascriptkit.com/">JavaScript Kit</a></li>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml" >Free JavaScripts</a></li>
<li><a href="http://www.javascriptkit.com/">JavaScript Tutorials</a></li>
<li><a href="/v2/v3/cate/ext.php" title="Exterior">Exterior</a>
    <ul>
    <li><a href="/v2/v3/cate/acura/acura_ext.php" title="Acura">Acura</a>
		<ul>
		<li><a href="#" title="CSX '07+ (FD2)">CSX '07+ (FD2)</a></li>
		</ul>
	</li>
    </ul>
</ul>

Here is my stylesheet:

Code:

.menu, .menu li > ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 182px; /*WIDTH OF MAIN MENU ITEMS*/
}

.menu li{
position: relative;
}

.menu li > ul{ /*SUB MENU STYLE*/
position: absolute;
width: 182px; /*WIDTH OF SUB MENU ITEMS*/
left: 0;
top: 0;
display: none;
filter:alpha(opacity=100);
-moz-opacity:1;
background-color: #FFFFFF;
border: 1px solid black;
}

.menu li a{
display: block;
width: auto;
padding: 2px 0 2px 0;
text-decoration: none;
}

.menu .arrowdiv{
position: absolute;
right: 2px;
}

.menu li a:visited, .menu li a:active{
color: #1F4E16;
}

.menu li a:hover{
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
}

* html .menu li { float: left; height: 1%; }
* html .menu li a { height: 1%; }

And the javascript:

Code:

var menuids=new Array("menu") //Enter id(s) of UL menus, separated by commas
var submenuoffset=-2 //Offset of submenus from main menu. Default is -2 pixels.

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.className="arrowdiv"
		spanref.innerHTML="&nbsp;&nbsp;"
		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)

Thank you!