Add third level to JavaScript 2-level menu

[Stang02GT]

Hello,

I am creating a menu and a friend gave me some code to play with and i have gotten the menu just how i want it except of one thing. The code that generates the menu is only set up for 2 levels. You mouse over the a section of the menu and a sub section with display giving you options regarding the previouse level.

I need to be able to have a 3rd level generate from the 2nd level.


This menu is comprised of
an HTML file
JavaScriptfile
an a CSS file.

If anyone would be willing to take a look at these files and help me out that would be great!

Thank you very much.

[gits]

hi ...

is it too much code to be posted here? ... in case its not then please post it or post a link to a testpage ...

kind regards

[Stang02GT]

there are three different files but here is the Java script file that i need to modify.

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)

[Stang02GT]

Would it be easier if i compressed the the files and e-mailed them?

[acoder]

Why not just post the HTML and CSS for the menu only?

[Stang02GT]

Here is the CSS Code

}
 
/*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;
}
 
.horizontalcssmenu .arrowdiv{
position: absolute;
right: 0;
background: transparent url(menuarrow.gif) no-repeat center left;
}
 
* html p#iepara{ /*For a paragraph (if any) that immediately follows menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}

[Stang02GT]

The first file code that I posted is the JavaScript that needs to be edited, thats where i'm getting caught up at.

[acoder]

Lines 8-22 set up for the main uls. To apply for sub-levels, you would need to get the uls again inside each ul element and apply the same code - the offset will probably be different.

Post the HTML code too.

[Stang02GT]

Ok, how would i change it to make the third level open to the right opposed to strait down?

</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>

This is just a dummy script but the step up is the same. The bold section is an example of a third level, that when scrolled over opens strait down, i need it to open to the right.

[acoder]

Ok, how would i change it to make the third level open to the right opposed to strait down?

You need to recognise it as different from the rest of the lists. You could check that the parentNode is a UL element. If it is, it's a third level list. Take the dimensions of the already open menu level and set the left to the left + width.

[Stang02GT]

You need to recognise it as different from the rest of the lists. You could check that the parentNode is a UL element. If it is, it's a third level list. Take the dimensions of the already open menu level and set the left to the left + width.

I have been tinkering with this since last night and i can't figure it out. I understand what you are saying i just am having trouble putting the code in the right places. If that makes since.

Could you help me out a little more?

[Stang02GT]

I guess to make things easier if anyone can help me i am Trying to modify the menu from this site...


http://www.javascriptkit.com/script/...stopmenu.shtml


i just need to add a thrid level that opens to the right

[acoder]

Is it OK if I offer you this instead (you can modify the CSS to make it look better)? If not, I'll see what changes can be made to this menu.

PS. changed the thread title to give it a better description.

[Stang02GT]

I can get the third level of the menu to open with all of the correct links and fields, is there something i can add to the HTML that would make that third level open to the right or left when it is scrolled over? Or is there something i can add to the javascript?

[acoder]

I can get the third level of the menu to open with all of the correct links and fields, is there something i can add to the HTML that would make that third level open to the right or left when it is scrolled over? Or is there something i can add to the javascript?

Well, in that case, set the style.left to be equal to the style.left property of the second level + the width of the second level menu. This would open it to the right assuming the 'style.top' setting is how you want it.

[Stang02GT]

acoder,

I have something to run by you, let me know what you think/if this is possible.

Could i create a javascript event in the HTML code in the two sections i need the menu to open right?

I could do something like a onMouseover event?

[Stang02GT]

<A HREF="http://www.thescripts.com"
onMouseOver="openright='openright; return true">TSDN</A> 

i know this is probably way off but would it look something like this?

[acoder]

Could i create a javascript event in the HTML code in the two sections i need the menu to open right?

I could do something like a onMouseover event?

You could, but there's no need to. You just need to find the third level menu elements and set the left/top properties.

Set it with, e.g.:

ultag.style.left = parseInt(ultag.parentNode.style.left) + parseInt(ultag.parentNode.style.width) + "px"

You'll need to put the UL sub-sub menu element within the LI tag. To find the third level, usesomething like li.getElementsByTagName("ul") or even ultags[t].getElementsByTagName("ul").

[Stang02GT]

I have figured out a solution to my problem i added items to the CSS file for the third level of the menu. Here is what i added ...

/*3rd level menu*/
.horizontalcssmenu ul li ul li ul{
left: 0;
top: 0;
border-top: 0px solid #202020;
position: absolute;
left: 30px; /*this is the offset for the sub sub-menu to allow the sub-menu to be seen*/
display: block;
visibility: hidden;
z-index: inherit;
}
 
/*3rd  menu list items*/
.horizontalcssmenu ul li ul li ul li{
display: inherit;
float: right;
}
 
 
/*3rd  menu links style */
.horizontalcssmenu ul li ul li ul li a{
width:120px; /*width of sub menu levels*/
display:block;
font-weight: normal;
padding: 2px 2px;
background:  url(untitled.bmp) center center repeat-x;
border-width: 0 1px 1px 1px;
}

[acoder]

I have figured out a solution to my problem i added items to the CSS file for the third level of the menu.

Yes, that's an alternative way and probably better too. Glad you managed to solve it.