ALl Levels Menu broken in IE8/9

[Beverleyh]

DD demo link: http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/index.htm

Related thread: http://www.dynamicdrive.com/forums/showthread.php?78354-ddlevelsmenu-uber-menu-has-problem-with-submenus&p=312813#post312813

Primary problem

Hi ddadmin,

While helping out on the related thread link above, I noticed that the All Levels Menu demo page is broken in IE8/9 modes in IE Dev Tools.

The red arrows are missing and the sub-menus do not activate.

Looks like its down to incompatibility with matchMedia and addListener.


Secondary problem

DD demo link: http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/generator.htm

The extra span element on the parent list of the Uber Round Color Tabs menu is causing the sub-title to return as 'null' in mobile view. Something to check over, although as a workaround, I bypassed the extra spans by using multiple background-images here: http://www.dynamicdrive.com/forums/showthread.php?78354-ddlevelsmenu-uber-menu-has-problem-with-submenus&p=312813#post312813

[ddadmin]

Thanks for the heads up. I actually didn't know about the emulation mode in IE Developer Tools. I've been using IETester, a third party software instead, but the former looks better, thanks!

I've fixed the bug in the menu not running in IE8/9. More details on the other thread: http://www.dynamicdrive.com/forums/showthread.php?78354-ddlevelsmenu-uber-menu-has-problem-with-submenus&p=312813#post312813

[Beverleyh]

Just copying the info here to keep things together... I posted it on the other thread too so feel free to delete that one once you've read it.


This demonstrates the problem ddadmin: http://fofwebdesign.co.uk/template/_testing/test/ddlevelsmenu/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)