View Full Version : All levels navigation onclick instead of onmouseover for IE8

09-21-2009, 09:30 AM
All Levels Navigation ver. 2.2

The DD Admin kindly posted an amended js file to enable the drop down menu to appear by onClick instead of onMouseOver at the following url


However, I am having problems getting it working on IE8, when click on the navigation the page simply went blank and nothing happens. I tried amending the META forcing the browser to emulate IE7 but no joy. It would be great if you could advise how to rectify this.

Many thanks in advance.


09-22-2009, 05:01 AM
It should work in IE8, at least with a valid doctype. I just tested this on the default demo of DD, except with the .js file replaced with the modified one referenced in my blog post above:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-base.css" />
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-topbar.css" />
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-sidebar.css" />

<script type="text/javascript" src="ddlevelsfiles/ddlevelsmenu.js">

* All Levels Navigational Menu- (c) Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code



<h3>All Levels Navigtional Menu: Top Menu Bar Example</h3>

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

<script type="text/javascript">
ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")

<p style="margin-top: 2em">More info/ documentation: <a href="http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/">All Levels Navigational Menu</a></p>

<!--HTML for the Drop Down Menus associated with Top Menu Bar-->
<!--They should be inserted OUTSIDE any element other than the BODY tag itself-->
<!--A good location would be the end of the page (right above "</BODY>")-->

<!--Top Drop Down Menu 1 HTML-->

<ul id="ddsubmenu1" class="ddsubmenustyle">
<li><a href="#">Item 1a</a></li>
<li><a href="#">Item 2a</a></li>
<li><a href="#">Item Folder 3a</a>
<li><a href="#">Sub Item 3.1a</a></li>
<li><a href="#">Sub Item 3.2a</a></li>
<li><a href="#">Sub Item 3.3a</a></li>
<li><a href="#">Sub Item 3.4a</a></li>
<li><a href="#">Item 4a</a></li>
<li><a href="#">Item Folder 5a</a>
<li><a href="#">Sub Item 5.1a</a></li>
<li><a href="#">Item Folder 5.2a</a>
<li><a href="#">Sub Item 5.2.1a</a></li>
<li><a href="#">Sub Item 5.2.2a</a></li>
<li><a href="#">Sub Item 5.2.3a</a></li>
<li><a href="#">Sub Item 5.2.4a</a></li>
<li><a href="#">Item 6a</a></li>

<!--Top Drop Down Menu 2 HTML-->

<ul id="ddsubmenu2" class="ddsubmenustyle">
<li><a href="#">Item 1b</a></li>
<li><a href="#">Item 2b</a></li>
<li><a href="#">Item Folder 3b</a>
<li><a href="#">Sub Item 3.1b</a></li>
<li><a href="#">Sub Item 3.2b</a></li>
<li><a href="#">Sub Item 3.3b</a></li>
<li><a href="#">Sub Item 3.4b</a></li>
<li><a href="#">Item 4b</a></li>
<li><a href="#">Item Folder 5b</a>
<li><a href="#">Sub Item 5.1b</a></li>
<li><a href="#">Item Folder 5.2b</a>
<li><a href="#">Sub Item 5.2.1b</a></li>
<li><a href="#">Sub Item 5.2.2b</a></li>
<li><a href="#">Sub Item 5.2.3b</a></li>
<li><a href="#">Item 6b</a></li>

<!--Top Drop Down Menu 3 HTML-->

<ul id="ddsubmenu3" class="ddsubmenustyle">
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a></li>
<li><a href="http://tools.dynamicdrive.com/favicon/">FavIcon Generator</a></li>
<li><a href="http://www.dynamicdrive.com/emailriddler/">Email Riddler</a></li>
<li><a href="http://tools.dynamicdrive.com/password/">htaccess Password</a></li>
<li><a href="http://tools.dynamicdrive.com/userban/">htaccess Banning</a></li>


In IE8, clicking the top menu items reveals the sub menus as expected.

10-17-2009, 11:27 PM
I am having serious incompatability issues with IE8 and only IE8.


Mouseover dropdowns don't work and actually move the images...