ddsmoothmenu.js not displaying menu under correct heading

[Nap]

If I've posted this in the incorrect forum, ie my problem is not actually a bug in the script but a mistake in its usage, I apologise in advance.

1) Script Title: ddsmoothmenu.js


2) Script URL (on DD): http://www.mumsmedicinecabinet.com.au/cms/
This site is built using Joomla 1.5.23 with Virtuemart shopping cart using a Template Monster Template.

3) Describe problem: On that page (referred to by the above URL), there is a menu bar that uses the ddsmoothmenu.js script to display a submenu.

Personal Care // Dietary Suppliments // Books // Pantry // Garden

The headings: Personal Care & Dietary Suppliments each display a list of sub-options.

There are two (2) problems I've identified:
1) There is not enough padding space on the last menu item thus making it difficult to read the text of the last option.
2) Whilst the position of the Personal Care sub-menu is correctly placed under its heading, Dietary Suppliments is incorrectly displayed under Personal Care as well.

I've posted images of the problem on my site. Both images demonstrate the problem relating to lack of padding space at the bottom of the last menu item, and the second picture demonstrates the alignment problem.

If these problems were created by poor coding practice on the part of the Template Monster designer feel free to let me know, and I will raise the problem with them. At this point I'm not sure where the problem actually is.

Cheers,
Nap

[ddadmin]

The HTML markup of your DD smooth menu has deviated from that of the original's, which most likely is the cause of the 2nd issue:

<div class='ddsmoothmenu' id='smoothmenu1'><div id="relative_div" style="position:relative;z-index:0"></div><ul class="level1"><li class="level1 item1 parent"><a class="level1 item1  parent" href="/cms/index.php/online-store?page=shop.browse&amp;category_id=1" target="_self" title="Personal Care" ><span>Personal Care</span></a><ul class="level2"><li class="level2 item1"><a class="level2 item1 " href="/cms/index.php/online-store?page=shop.browse&amp;category_id=6" target="_self" title="Foot Care" ><span>Foot Care</span></a></li><li class="level2 item2"><a class="level2 item2 " href="/cms/index.php/online-store?page=shop.browse&amp;category_id=7" target="_self" title="Hair Care" ><span>Hair Care</span></a></li><li class="level2 item3"><a class="level2 item3 " href="/cms/index.php/online-store?page=shop.browse&amp;category_id=8" target="_self" title="Oral Care" ><span>Oral Care</span></a></li><li class="level2 item4"><a class="level2 item4 " href="/cms/index.php/online-store?page=shop.browse&amp;category_id=9" target="_self" title="Personal Care" ><span>Personal Care</span></a></li><li class="level2 item5"><a class="level2 item5 " href="/cms/index.php/online-store?page=shop.browse&amp;category_id=18" target="_self" title="Skin Care" ><span>Skin Care</span></a></li></ul></li><li class="level1 item2 parent"><a class="level1 item2  parent" href="/cms/index.php/online-store?page=shop.browse&amp;category_id=2" target="_self" title="Dietary Supplements" ><span>Dietary Supplements</span></a><ul class="level2"><li class="level2 item1"><a class="level2 item1 " href="/cms/index.php/online-store?page=shop.browse&amp;category_id=19" target="_self" title="Minerals" ><span>Minerals</span></a></li><li class="level2 item2"><a class="level2 item2 " href="/cms/index.php/online-store?page=shop.browse&amp;category_id=20" target="_self" title="Amino Acids" ><span>Amino Acids</span></a></li><li class="level2 item3"><a class="level2 item3 " href="/cms/index.php/online-store?page=shop.browse&amp;category_id=21" target="_self" title="Herbs" ><span>Herbs</span></a></li><li class="level2 item4"><a class="level2 item4 " href="/cms/index.php/online-store?page=shop.browse&amp;category_id=22" target="_self" title="Enzymes" ><span>Enzymes</span></a></li><li class="level2 item5"><a class="level2 item5 " href="/cms/index.php/online-store?page=shop.browse&amp;category_id=23" target="_self" title="Oils" ><span>Oils</span></a></li></ul></li><li class="level1 item3"><a class="level1 item3 " href="/cms/index.php/online-store?page=shop.browse&amp;category_id=3" target="_self" title="Books" ><span>Books</span></a></li><li class="level1 item4"><a class="level1 item4 " href="/cms/index.php/online-store?page=shop.browse&amp;category_id=4" target="_self" title="Pantry" ><span>Pantry</span></a></li><li class="level1 item5"><a class="level1 item5 " href="/cms/index.php/online-store?page=shop.browse&amp;category_id=5" target="_self" title="Garden" ><span>Garden</span></a></li></ul></div>

The part that concerns me more is the added DIV tag in red below, while the extra span tags may or may not be an issue. Compare your markup to the original as far as structure:

<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Item 1</a></li>
<li><a href="#">Folder 0</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>
  </ul>
</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>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</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>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Folder 3.1.1</a>
		<ul>
    		<li><a href="#">Sub Item 3.1.1.1</a></li>
    		<li><a href="#">Sub Item 3.1.1.2</a></li>
    		<li><a href="#">Sub Item 3.1.1.3</a></li>
    		<li><a href="#">Sub Item 3.1.1.4</a></li>
    		<li><a href="#">Sub Item 3.1.1.5</a></li>
		</ul>
    </li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
  </li>
  </ul>
</li>
<li><a href="http://www.dynamicdrive.com/style/">Item 4</a></li>
</ul>
<br style="clear: left" />
</div>

In other words, the original expected menu structure should just be a parent DIV with a nested UL in it, nothing more, nothing less. It shouldn't be hard to recreate the exact menu look you have on your page now without making all the changes you've made to the menu structure- if you want for me to take a stab at it, please post all the images of the menu involved (ie: background image, bullet etc) in the post below first.

[jscheuer1]

There could also be other problems but here in http://www.mumsmedicinecabinet.com.au/cms/templates/theme123/css/template.css around line #1829 (line wrapping added):

.moduletable-categories ul.level2 { background:url(../images/cat-ul2-bg.png) left top no-repeat;
   width:87px; height:138px; padding-top:20px;padding-left:31px; padding-right:37px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(); 
position:absolute !important; left:0 !important; top:38px !important;  list-style-type:none; margin:0; visibility:hidden; }

That highlighted rule forces them to be all the way to the left. It should either be removed or changed. If removing it doesn't take care of the problem. Try changing it to:

 left:auto !important;

Which does take care of the problem in IE 8+, Firefox, Chrome, and Opera.

The browser cache may need to be cleared and/or the page refreshed to see changes.

[Nap]

@jscheuer1
THANK YOU. I have no idea how you managed to find it, but it certainly fixed the alignment problem.

@ddadmin
The code you highlighted in red is added via the php file: class.vm_cat_menu_specific.php
As I'm not sure how Template-Monster setup their template, I'm going to leave it in there for the moment. Now that I've got the alignment problem sorted, I'll see if I can work out the padding issue.

Thank you both for having such a detailed look at the code. Much appreciated!

Cheers,
Nap

[Nap]

I'm fairly certain I've worked out the problem with the padding at the bottom.
The background image for the dropdown list is not scaled in height for the number of items in the list.
When I added a 6th item to the 'Personal Care' list, the background image doesn't reach down far enough and the 6th item is effectively invisible against what is showing behind the menu.

Is this a function of the DD script or a mistake on the part of Template Monster?

Cheers,
Nap

[jscheuer1]

If I'm following what you're saying I think it's the template. In it the background image for the drop downs is:

mumsmedicinecabinet.com.au/cms/templates/theme123/images/cat-ul2-bg.png

The style for this is in mumsmedicinecabinet.com.au/cms/templates/theme123/css/template.css around line #915.

The background-repeat there is no-repeat, so you can only have as many items in the drop down as will fit over this image. You can have more but they will not be easy to see against the otherwise transparent background. On the Personal Care drop down, Minerals is there, just very hard to see.

If this image is allowed to repeat, although minerals will now be easy to see, the overall effect is not good.

To fix this and still have the same look you would need either individual background images for each drop down or a way to have two or three images - a top, middle (the middle could conceivably be a solid color background with no image) and a bottom image with the middle image/color allowed to repeat/expand as much as is needed. Or you could go for no background image at all and just use a solid color background. But for either of these latter two solutions the width and height of each drop down would probably need more individual control.

Anyways, that line (around #915) is (again wrapped to fit better):

.moduletable-categories ul.level2 { background:url(../images/cat-ul2-bg.png) left top no-repeat;   width:87px; height:338px; 
padding-top:20px;padding-left:31px; padding-right:37px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(); 
position:absolute !important; left:auto !important; top:38px !important;  list-style-type:none; margin:0; visibility:hidden; }

If it were made to be:

.moduletable-categories ul.level2 { background: #455028; width:87px !important; 
padding-left:31px; padding-right:37px;  
position:absolute !important; left:auto !important;  list-style-type:none; margin:0; visibility:hidden; }

You lose the interesting background image, but things otherwise work out fairly well, at least in limited testing.

The browser cache may need to be cleared and/or the page refreshed to see changes.

[Nap]

jscheuer1, that is what I suspected.
I've searched google and I've found a CSS snippet that might possibly work. What do you think?

img#background {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%:
  display: block;
  z-index: -1;
}

<body>
<div>
<img id="background" src="cat-ul2-bg.png">
</div>

I've contacted Template Monster, but they don't see this issue a problem and told me to manually change the background. Which is not a solution in my opinion as each submenu may have differing number of items in the list.

Cheers,
Nap

[jscheuer1]

How about CSS 3 where the background image can stretch and shrink as needed? For IE 8 and less you could use a fall back CSS 2 solid color like I mentioned in my last post. But for IE 9 and all others, change line 915 in mumsmedicinecabinet.com.au/cms/templates/theme123/css/template.css from (again I'm wrapping the line for readability):

.moduletable-categories ul.level2 { background:url(../images/cat-ul2-bg.png) left top no-repeat;   
width:87px; height:338px; padding-top:20px;padding-left:31px; padding-right:37px; 
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(); position:absolute !important;
 left:auto !important; top:38px !important;  list-style-type:none; margin:0; visibility:hidden; }

to:

.moduletable-categories ul.level2 { background:url(../images/cat-ul2-bg.png) left top no-repeat; 
background-size: auto 100%; 
width:87px !important; padding-top:20px;padding-left:31px; padding-right:37px; 
position:absolute !important; 
left:auto !important; top:38px !important;  list-style-type:none; margin:0; visibility:hidden; }

I've marked the removed styles in red, and highlighted the added ones. That alpha image loader is only used by IE and isn't being used correctly there. We may actually be able to use it to get the image to scale itself in IE 8 and less

But for now, just try out the above as I've indicated it. View in any browser except IE 8 and less. The browser cache may need to be cleared and/or the page refreshed to see changes.