Can't get menu to drop down

**Buzzle** · 04-07-2014, 11:32 AM

1) Script Title: Nested side bar menu

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

3) Describe problem: I'm a newbie to scripts so please be patient with me...

I am trying to create a vertical, drop down menu to replace my old Spry menus that no longer work properly on tablet devices.

I have copied the CSS into a new CSS stylesheet and attached this to my page. I also copied the code from <script type="text/javascript"> to </script> and pasted it into the <head> of my page. I then copied the HTML into my file and, in Dreamweaver, it looks about right. However, when I preview it, I can't get it to drop down (it doesn't drop down in the Demo on the DD site either, by the way).

In the code view of Dreamweaver CS5, there is a syntax error reported on the following line: var ultags=document.getElementById(menuids<i>).getElementsByTagName("ul")

Unfortunately, I haven't a clue to where to start to resolve this so would appreciate some help in correcting this, please.

Should I have downloaded a .js file to my site? If so, where would I have found this?

I'm not ready to upload my site to the web yet - is this why I can't see the dropdown menus properly? If this is the problem, how can I preview this menu?

If anyone is able to help this beginner, I'd be so grateful. Thank you.

**ddadmin** · 04-07-2014, 05:51 PM

There was a problem with the code on the demo page which I've now fixed (a CMS issue). Try recopying and pasting the code onto your page to see if that fixes the problem.

**Buzzle** · 04-08-2014, 02:41 PM

Thanks for fixing this. I've recopied over the code and it's taking shape. However, I noticed there are two copies of each style on the stylesheet. Do I need both copies?

By default, all the menu items had bullet points. I've edited .sidebarmenu ul li and removed the bullets but the menus are still indented. Then, when I click on an item with a submenu, this also shows white space to the left so that, as I move the mouse over to select an item on the submenu, it crosses a white area and the submenu disappears.

Despite playing around with various settings (padding, margins etc), I cannot seem to work out how to remove this and align the menu items to the left of the div. I'm sure I'm being really thick but it's been a long day. Please can someone help me? Thanks.

**ddadmin** · 04-08-2014, 05:34 PM

No you only need one copy of the stylesheet (another CMS output issue, I've since updated the code on the demo page).

To your other issues, do they also occur on the default menu code for you, as I don't see them myself? It sounds like you're trying to alter the menu so the sub menus drop down to the left of the main menu, is that right?

**Buzzle** · 04-08-2014, 06:33 PM

Thanks for updating the code. I'm flipping between work and home computers so excuse the delay.

The demo menu looks fine now and, with a bit of editing for colours, fonts etc does exactly what I'm looking for. No, all I did was remove the bullets - I'm certainly not even going to think of dropping down to the left - that's way beyond me!

It's a bit like there's a hanging indent without the bullet. I saw another post from someone who seemed to have the same problem only they posted just a couple of minutes later to say they'd solved the problem so there was no time or need for anyone to post a solution. Sadly, I'm not as bright.

However, I'm truly grateful for your help and, indeed, for the generosity with which you make these menus available in the first place. Next project involves a horizontal menu but I'm trying not to run before I can crawl.

If I can post what I've done to a 'quiet' part of my site, I'll do that and send you a link but, as it's at work, this may be difficult.

Thank you.

**ddadmin** · 04-09-2014, 10:30 PM

Hmm perhaps a screen shot of the 'hanging indent' would help. Do you see this problem with the DD demo?

**Buzzle** · 04-10-2014, 02:29 PM

Click image for larger version.

Name: vertical-menu-dd.jpg
Views: 168
Size: 40.7 KB
ID: 5417

The demo is fine. I've attached a snapshot of the menu. There's white space to the left of each menu item on the main branch and then again for each submenu item which makes them impossible to select.

It's probably something very simple in CSS which I have failed to identify.

Also, selecting a menu item with a submenu causes the menu to shift down slightly. You'll see a white space has developed below Folder 2. This disappears when another item is selected.

**ddadmin** · 04-10-2014, 07:27 PM

Hmm my best guess without actually seeing a demo of the issue is that there is some other CSS on your page affecting the menu. If you can, either post a zip file on the problem page here, or perhaps online (ie: to http://jsfiddle.net/).

**Buzzle** · 04-11-2014, 08:10 AM

Can't see how to post a zip file here so will try and explain what I have. I have three files in my site:

menutest.html (the page on which I am creating the menu)
sidebarmenu.css
right.gif

I copied the CSS from the demo page to create sidebarmenu.css. I have made a couple of modifications to this:

.sidebarmenu ul li: Changed width to 200px as it was filling the whole screen; also changed list-style-type to none to remove the bullets

I also copied the script into the <head> section of my html file.

I have looked at the page in different browsers. All continue to show the white area to the left of each menu and submenu item. In IE8, the menu items drop down on selection of any menu item with a submenu (this doesn't happen with Chrome or Firefox) and submenu items cannot be selected. With Chrome and Firefox, submenu items can be selected.

On closer inspection of the html, I see that class list includes styles: sidebarmenu and subfolderstyle. sidebarmenu appears to be in used in the very first line of code in the <body> of the page: <div class="sidebarmenu">

The only styles I have are in the image below: