ddlevelsmenu uber menu has problem with submenus

[marymcc]

1) Script Title: ddlevelsmenu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici.../generator.htm

3) Describe problem: Using the uber menu, the mobile submenu comes up with the submenu items, but the back arrow has the word 'null' instead of the name of the submenu. It seems to be caused by the <scan> around the submenu name, but the <scan> is required for the uber menu.

[Beverleyh]

<scan>? There isn't such a thing as a <scan> tag. Make sure that you are using a <span> tag instead and if you need more help, Or if the problem persists, please post a link to your page.

[marymcc]

<scan>? There isn't such a thing as a <scan> tag. Make sure that you are using a <span> tag instead and if you need more help, Or if the problem persists, please post a link to your page.

The <scan> above was a typo. http://sandhillsmoaa.com/ , The Gallery menu item is the submenu item. This is the code:
<li><a href="gallery.html"rel="ddsubmenu1"><span>Gallery</span></a></li>

[Beverleyh]

Hmmm, there appears to be a span-related bug in the js file (it doesn't like the extra element).

You can fix it by reverting back to the span-less version though. The span element is only needed to hold the extra rounded right corner image, but you can use a different technique and put both rounded corner images on the main .ubercolortabs a element instead.

Here's what to do...

1. Remove all the <span> tags from the main/parent menu, so the markup looks like this;

<li><a href="gallery.html" rel="ddsubmenu1">Gallery</a></li>

2. In the topbar.css file, replace these lines;

background: #0D3684 url(roundleft.gif) no-repeat left top; /*default background color of tabs, left corner image*/
padding: 0 0 1px 3px;

With these lines;

background: url(roundright.gif) no-repeat right top, url(roundleft.gif) no-repeat left top;
background-color: #0D3684;
padding: 7px 9px 4px 9px;

3. In the same topbar.css file, delete these lines;

.ubercolortabs a span{
float: left;
display: block;
background: transparent url(roundright.gif) no-repeat right top; /*right corner image*/
padding: 7px 9px 3px 6px;
cursor: pointer;
}

.ubercolortabs a span{
float: none;
}

...

.ubercolortabs a:hover span{
background-color: transparent;
}

This multiple background-image technique works in all modern browsers and IE9+. IE8 users will just see square cornered tabs.

While I'm here, I think that there many be another underlying problem with the menu though -- nothing to do with the above changes - just an observation I made while comparing the DD installations to the zip package download. I opened the default demo page in IE8 and IE9 modes to test, and I they appear to be broken (no red arrows or drop-downs/fly-outs). May the mobile update has lost backwards compatibility. I'll file a bug report for ddadmin to pick up.

[marymcc]

Beverleyh,
It works beautifully. I knew the <span> was the problem, but didn't know how to fix it. Thank you so much for your help. I'll have to watch for a fix for the IE8 & 9 problem.
Mary

[ddadmin]

Thanks for notifying me of the IE8/9 issue. To fix it, inside the .js file, find the line:

mql: window.matchMedia("screen and (max-width: 700px)"), // CSS media query to switch to mobile menu when matched

and change that to:

mql: (window.matchMedia)? window.matchMedia("screen and (max-width: 700px)") : {matches:false, addListener: function(){}}, // CSS media query to switch to mobile menu when matched

I'll update the official .js file soon with the changes.

Regarding the other issue, I'm not sure I understand actually:

but the back arrow has the word 'null' instead of the name of the submenu.

There is no back arrow used in the menu, only a down and right pointing arrow. They both show up inside the Uber menu for me.

[Beverleyh]

This demonstrates the problem ddadmin: http://fofwebdesign.co.uk/template/_...smenu/demo.htm

Top-level menu markup provided by the generator is different to the standard menu and looks like this;

<div id="ddtopmenubar" class="ubercolortabs">
<ul>
<li><a href="http://www.dynamicdrive.com"><span>Home</span></a></li>
<li><a href="http://www.dynamicdrive.com/new.htm" rel="ddsubmenu1"><span>DHTML</span></a></li>
<li><a href="http://www.dynamicdrive.com/style/" rel="ddsubmenu2"><span>CSS</span></a></li>
<li><a href="http://www.dynamicdrive.com/forums/"><span>Forums</span></a></li>
<li><a href="http://tools.dynamicdrive.com/" rel="ddsubmenu3"><span>Web Tools</span></a></li>
</ul>
</div>

1. Reduce the browser width to trigger the mobile menu.

2. Click on any of the top-level headings that have subs (DHTML, CSS and Web Tools)

3. The first line (the title) says "< null"

This only happens on the first sub-level (because of the extra span in the markup). Deeper sub-menus carry the correct title.

Tested in IE11 and Chrome (same issue)