...

View Full Version : Problem with menu code



jjsaw5
12-13-2007, 06:22 PM
I have a horizontal menu with three levels

1st Selection
- 2nd Selection
- 3rd Selection

The 2nd Selection drops strait down, which is what i want. The 3rd Selection opens strait down also but i need it to open to the right. Would someone be able to take a look at the code and let me know what i am doing wrong?

Apostropartheid
12-13-2007, 06:24 PM
How can we look at code we can't see?

jjsaw5
12-13-2007, 07:54 PM
I apologise here is the javascript code i will post the css and html code as well



var cssmenuids=["cssmenu1"] //Enter id(s) of CSS Horizontal UL menus, separated by commas
var csssubmenuoffset=-1 //Offset of submenus from main menu. Default is 0 pixels.

function createcssmenu2(){
for (var i=0; i<cssmenuids.length; i++){
var ultags=document.getElementById(cssmenuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].style.top=ultags[t].parentNode.offsetHeight+csssubmenuoffset+"px"
var spanref=document.createElement("span")
spanref.className="arrowdiv"
spanref.innerHTML="&nbsp;&nbsp;&nbsp;&nbsp;"
ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)
ultags[t].parentNode.onmouseover=function(){
this.style.zIndex=100
this.getElementsByTagName("ul")[0].style.visibility="visible"
this.getElementsByTagName("ul")[0].style.zIndex=0
}
ultags[t].parentNode.onmouseout=function(){
this.style.zIndex=0
this.getElementsByTagName("ul")[0].style.visibility="hidden"
this.getElementsByTagName("ul")[0].style.zIndex=100

}
}
}
}

if (window.addEventListener)
window.addEventListener("load", createcssmenu2, false)
else if (window.attachEvent)
window.attachEvent("onload", createcssmenu2)

jjsaw5
12-13-2007, 07:54 PM
css code


.horizontalcssmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.horizontalcssmenu ul li{
position: relative;
display: inline;
float: left;

}

/*Top level menu link items style*/
.horizontalcssmenu ul li a{
display: block;
width: 120px; /*Width of top level menu link items*/
padding: 2px 8px;
border: 1px solid #202020;
border-left-width: 0;
text-decoration: none;
background: url(untitled.bmp) center center repeat-x;
color: white;
font: bold 13px Tahoma;
}

/*Sub level menu*/
.horizontalcssmenu ul li ul{
left: 0;
top: 0;
border-top: 1px solid #202020;
position: absolute;
display: block;
visibility: hidden;
z-index: 100;
}

/*Sub level menu list items*/
.horizontalcssmenu ul li ul li{
display: inline;
float: none;
}


/* Sub level menu links style */
.horizontalcssmenu ul li ul li a{
width: 160px; /*width of sub menu levels*/
font-weight: normal;
padding: 2px 5px;
background: url(untitled1.bmp) center center repeat-x;
border-width: 0 1px 1px 1px;
}

.horizontalcssmenu ul li a:hover{
background: url(untitled1.bmp) center center repeat-x;
}

.horizontalcssmenu ul li ul li a:hover{
background: url(untitled2.bmp) center center repeat-x;
}

jjsaw5
12-13-2007, 07:55 PM
html code



<html>
<head>
<link rel="stylesheet" type="text/css" href="csshorizontalmenu.css" />

<script type="text/javascript" src="csshorizontalmenu.js">

/***********************************************

* CSS Horizontal List Menu- by JavaScript Kit (www.javascriptkit.com)
* Menu interface credits: http://www.dynamicdrive.com/style/csslibrary/item/glossy-vertical-menu/
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more

***********************************************/

</script>




</head>
<body>

<div class="horizontalcssmenu">
<ul id="cssmenu1">
<li style="border-left: 1px solid #202020;"><a href="http://www.javascriptkit.com/">Home</a></li>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml" >Free JS</a></li>
<li><a href="http://www.javascriptkit.com/">JS Tutorials</a></li>
<li><a href="#">References</a>
<ul>
<li><a href="http://www.javascriptkit.com/jsref/">JS Reference</a></li>
<ul>
<li><a href="http://www.javascriptkit.com/jsref/">JS Reference</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
<li><a href="http://www.javascriptkit.com/dhtmltutors/cssreference.shtml">CSS Reference</a></li>
</ul>

<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
<li><a href="http://www.javascriptkit.com/dhtmltutors/cssreference.shtml">CSS Reference</a></li>
</ul>
</li>
<li><a href="http://www.javascriptkit.com/howto/">web Tutorials</a></li>
<li><a href="#">Resources</a>
<ul>
<li><a href="http://www.dynamicdrive.com">Dynamic HTML</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS Library</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a></li>
<li><a href="http://tools.dynamicdrive.com/favicon/">Favicon Generator</a></li>
</ul>
</li>
</ul>
<br style="clear: left;" />
</div>

<p id="iepara">Rest of content here</p>


</body>
</html>

rsandersva
12-15-2007, 04:58 PM
I'm not sure this is the solution you want...if you're after a menu that will do:

Menu Item 1
---Menu Item 1.A
------Menu Item 1.A.1
------Menu Item 1.A.2
---Menu Item 1.B
Menu Item 2
etc...

Then you need to add a sub sub-level to the CSS code. There is no change to the script. Here's the code I inserted:


/*NEW - Sub sub-level menu*/
.horizontalcssmenu ul li ul li ul{
left: 0;
top: 0;
border-top: 1px solid #202020;
position: absolute;
left: 40px; /*this is the offset for the sub sub-menu to allow the sub-menu to be seen*/
display: block;
visibility: hidden;
z-index: inherit;
}

/*NEW- Sub sub-level menu list items*/
.horizontalcssmenu ul li ul li ul li{
display: inherit;
float: right;
}


/*NEW- Sub sub-level menu links style */
.horizontalcssmenu ul li ul li ul li a{
width: 65px; /*width of sub menu levels*/
display:block;
font-weight: normal;
padding: 2px 2px;
background: #E9B229;
border-width: 0 1px 1px 1px;
}

The left:40px moves the sub sub-level over so that you can still see the next menu item below it. If you'd like to see it in action take a look at the menu here (http://www.fcps.edu/LangleyHS/).

Rob

jjsaw5
12-17-2007, 06:12 PM
Rob, THANK YOU SO MUCH!!! The addition is exactly what i was looking for, i can't thank you enough!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum