problem with Nested Side Bar Menu

**himalay137** · 03-21-2009, 06:54 AM

Hi,
I want to use Nested Side Bar Menu.
DD Link here:
http://www.dynamicdrive.com/style/cs...side_bar_menu/

here is the CSS code:

Code:

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.sidebarmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: bold 13px Verdana;
width: 180px; /* Main Menu Item widths */
border-bottom: 1px solid #ccc;
}
 
.sidebarmenu ul li{
position: relative;
}

/* Top level menu links style */
.sidebarmenu ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white;
text-decoration: none;
padding: 6px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}

.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background-color: #012D58; /*background of tabs (default state)*/
}

.sidebarmenu ul li a:visited{
color: white;
}

.sidebarmenu ul li a:hover{
background-color: black;
}

/*Sub level menu items */
.sidebarmenu ul li ul{
position: absolute;
width: 170px; /*Sub Menu Items width */
top: 0;
visibility: hidden;
}

.sidebarmenu a.subfolderstyle{
background: url(right.gif) no-repeat 97% 50%;
}

 
/* Holly Hack for IE \*/
* html .sidebarmenu ul li { float: left; height: 1%; }
* html .sidebarmenu ul li a { height: 1%; }
/* End */

</style>

<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"
    }
    }
  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>

When I paste whole code between <head> and </head> tag HTML editor shows an error:
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Element type "menuids.length" must be followed by either attribute specifications, ">" or "/>".

When I paste CSS code between <head> and </head> tag and JS code between <body> and </body> tag no error found but side bar menu doesn’t work.

Pls help me to solve it.
thnx

**ddadmin** · 03-21-2009, 07:29 AM

Just wrap the script in the CDATA tag, ie:

Code:

<script type="text/javascript">
/*<![CDATA[*/
//The JavaScript code itself
//The JavaScript code itself
// etc...
/*]]>*/
</script>

to make it XHTML valid. See this page for more info: http://www.dynamicdrive.com/style/bl...tml-compliant/

**himalay137** · 03-21-2009, 09:39 AM

hi ddadmin,
thnx a lot. now how to add arrow (right.gif)? i upload the gif file to www.110mb.com but when i open the file, no gif file is opened but a msg is there :" You're seeing this page because account contains no index file. (EG: index.htm). " same result for any img file. what can i do?

how to convert it as a horizontal menu?
where the change is needed?
again thnx

**ddadmin** · 03-21-2009, 05:14 PM

By default the right arrow image should be uploaded to the sub directory "media/" directly beneath your current page. You can change that to an absolute URL to ensure it's the correct path, ie:

Code:

background: url(http://mysite.com/images/right.gif) no-repeat 97% 50%;

how to convert it as a horizontal menu?

You'll need to go with a horizontal menu instead, some of which can be found here: http://www.dynamicdrive.com/style/cs...y/category/C1/

**himalay137** · 04-03-2009, 06:13 AM

Originally Posted by ddadmin

By default the right arrow image should be uploaded to the sub directory "media/" directly beneath your current page. You can change that to an absolute URL to ensure it's the correct path, ie:

Code:

background: url(http://mysite.com/images/right.gif) no-repeat 97% 50%;

You'll need to go with a horizontal menu instead, some of which can be found here: http://www.dynamicdrive.com/style/cs...y/category/C1/

because of using blogger.com I've no directory or sub-directory to upload.
What can I do?...pls reply...

**bluewalrus** · 04-03-2009, 12:59 PM

You have to have a directory that is where the image is uploaded to even if it is not yours. If you load your image online copy out the address from the browser like http://www.site.com/blah.jpg then copy that and put it in where DDAdmin said to put it (the red text). If it is on some other page right click or control click and view properties and that should give the full path. copy and paste that path in a new browser window to make sure it is correct it should load just the image. Then put that in where ddadmin said.

**himalay137** · 04-04-2009, 08:43 AM

Originally Posted by bluewalrus

You have to have a directory that is where the image is uploaded to even if it is not yours. If you load your image online copy out the address from the browser like http://www.site.com/blah.jpg then copy that and put it in where DDAdmin said to put it (the red text). If it is on some other page right click or control click and view properties and that should give the full path. copy and paste that path in a new browser window to make sure it is correct it should load just the image. Then put that in where ddadmin said.

I'm trying to use http://www.dynamicdrive.com/cssexamples/media/right.gif from dd link but failed. how can I use it?
thnx

**bluewalrus** · 04-04-2009, 08:44 PM

background: url(http://www.dynamicdrive.com/cssexamples/media/right.gif) no-repeat 97% 50%;

But you should be hosting it where your code is...

**dassyka** · 08-20-2009, 01:26 PM

Hi, l'm new here and i hope you can help me. I want to use the nested side bar menu vertical and it's super nice but... i want to know how can i make it fit with my extensible design! For example, the div where i want to put the menu is 40% and the menu width is 180px. But when i want to replace the px number by a % to fit my design, i don't know how to do it correctly because it doesn't work!

And also, when my submenu appear, what is bellow it doesn't move down. How can i fix this?

Can you help me?

**ddadmin** · 08-21-2009, 06:25 AM

Dassyka, please start a new thread when asking your own question.

Thread: problem with Nested Side Bar Menu

Thread Tools

Search Thread

problem with Nested Side Bar Menu

The Following User Says Thank You to ddadmin For This Useful Post:

The Following User Says Thank You to ddadmin For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions