nested side menu error

[Fia]

1) Script Title: Nested Side Bar Menu

2) Script URL (on DD): http://www.dynamicdrive.com/style/

3a) Describe problem: When i don't use all the menues(var menuids=["recmenu1","recmenu2","recmenu3","recmenu4","recmenu5","recmenu6","recmenu7"])
I get an error on page. I load a diffren amount of menues all the time depending on how many days the user have chosen (maximum 7). is there a fix for that?

3b)I also would like all the popout ul to hide on mousedown.so when the user click the button the menu goes back to normal. is there a way to do that?

3c) is there a way to make only one leverbuttons longer then the other. I would like the last button on my menu to be longer. I've tryed
.sidebarmenu ul li ul li ul{
width:250px;
}
but that didn't work the first button showed right on the last ul but the onece that came after showed a big gap

[ddadmin]

I assume you're talking about this menu. There should be no limit as to the number of menus you can have on the same page beyond 7. Do you have a link to the problem page?

As far as hiding the sub menus when they are clicked on, try adding the code in red to the existing script:

<script type="text/javascript">

//Nested Side Bar Menu (Mar 20th, 09)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas

function initsidebarmenu(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
  if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
   ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
  else //else if this is a sub level submenu (ul)
    ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    ultags[t].parentNode.onclick=function(){
	this.getElementsByTagName("ul")[0].style.display="none"
	}
    }
  for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
  ultags[t].style.visibility="visible"
  ultags[t].style.display="none"
  }
  }
}

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

</script>

[Fia]

Hi!

it's compilcated I would have to explain to you how to get the menue upp(it's in swedish) and give you login. But the problem is that in the javascript i have put 7 menus in the array but sometime only 3 menus are used ect.
var menuids=["recmenu1","recmenu2","recmenu3","recmenu4","recmenu5","recmenu6","recmenu7"]
so when there are menues that are not used I get this error. It is also on the other pages where the no menue is not used.


Meddelande: 'document.getElementById(...)' is null or not an object
on this row
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")

Closing the menue om click worked great,thank you.

how about making the third ul level button longer then the first two, is that possible?

[ddadmin]

If the script is giving you errors because some of the menus defined inside your array are not present on the page, try adding the code in red to the existing script:

function initsidebarmenu(){
for (var i=0; i<menuids.length; i++){
	if (!document.getElementById(menuids[i]))
		continue
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")

how about making the third ul level button longer then the first two, is that possible?

By 3rd UL level button, do you mean the 3rd sub menu levels?

[Fia]

Yes!
I've tried this
.sidebarmenu ul li ul li ul{
width:250px;
}

and it works on the first menu that pops out but the next one showes a big gap(moves to much to the right) like it read the new width to offset or something.

Thanks again for the last solution. I think it would be a good idea to put that in the original script. couldn't hurt

[ddadmin]

You might just try adding an inline style into the desired ULs to affect their widths separately from the global CSS's:

<div class="sidebarmenu">
<ul id="sidebarmenu1">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  </ul>
</li>
<li><a href="#">Item 3</a></li>

<li><a href="#">Folder 2</a>
  <ul>
  <li><a href="#">Sub Item 2.1</a></li>
  <li><a href="#">Folder 2.1</a>
    <ul style="width:250px">
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Sub Item 2.1.3</a></li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
  </li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
</div>

[Fia]

No didn't work. The first ul menue comes right but the the nex ul menue that are suppose to be longer showes up way to the right like it takes the new value of 250px and make the next button that long.

<div class="receptmenu">
<ul id="recmenu1">
<li><a href="#">Välj Recept 1 </a>
<ul>
 <li><a href="#">Vegetariskt</a> 
<ul style="width:250px;"> //This one come out ok!!!
<li><a id="rec3" href="javascript:putrec(3,11);">fiarecept3</a></li>
<li><a id="rec5" href="javascript:putrec(5,11);">testrecept1</a></li>
</ul>
</li>
<li><a href="#">Vegan</a>
<ul style="width:250px;"> //This one showes way out to the right!!
<li><a id="rec10" href="javascript:putrec(10,11);">vego</a></li> 
</ul>
</li>

It is probably not possible to do!

Thanx alot for all your help,

Fia