Smooth Navigational Menu (v3.0)

2 Attachment(s)

Smooth Navigational Menu (v3.0) - z-index bug

1) Script Title: Smooth Navigational Menu (v3.0)

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

3) Describe problem: Z-index problem. The sub menu is UNDER the previous sub-menu. So, the submenu cannot be seen. The problem happen when sub-menu have another sub-menu (folder). Here I attached screenshot so that it clearer... The problem is in the circle... It suppose to show Sub Item 2.1.1.2 and Sub Item 2.1.1.3 instead of Folder 2.2 and Folder 2.3.

Can you post your link that demonstrates the problem please?

Code:

<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="ddsmoothmenu.css" /> <link rel="stylesheet" type="text/css" href="ddsmoothmenu-v.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> <script type="text/javascript" src="ddsmoothmenu.js"> /*********************************************** * Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) * Please keep this notice intact * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code ***********************************************/ </script> <script type="text/javascript"> ddsmoothmenu.init({ mainmenuid: "smoothmenu1", //menu DIV id orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v" classname: 'ddsmoothmenu', //class added to menu's outer DIV //customtheme: ["#1c5a80", "#18374a"], contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"] }) ddsmoothmenu.init({ mainmenuid: "smoothmenu2", //Menu DIV id orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v" classname: 'ddsmoothmenu-v', //class added to menu's outer DIV //method: 'toggle', // set to 'hover' (default) or 'toggle' arrowswap: true, // enable rollover effect on menu arrow images? //customtheme: ["#804000", "#482400"], contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"] }) </script> <meta charset="utf-8"> <title>Dynamic Drive Smooth Navigation Menu</title> </head> <body>  <a class="animateddrawer" id="ddsmoothmenu-mobiletoggle" href="#"> <span></span> </a> <h2>Example 1</h2> <div id="smoothmenu1" class="ddsmoothmenu"> <ul> <li><a href="http://www.dynamicdrive.com">Item 1</a></li> <li><a href="http://www.dynamicdrive.com">Folder 0</a> <ul> <li><a href="http://www.dynamicdrive.com">Sub Item 1.1</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 1.2</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 1.3</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 1.4</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 1.2</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 1.3</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 1.4</a></li> </ul> </li> <li><a href="http://www.dynamicdrive.com">Folder 1</a> <ul> <li><a href="http://www.dynamicdrive.com">Sub Item 1.1</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 1.2</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 1.3</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 1.4</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 1.2</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 1.3</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 1.4</a></li> </ul> </li> <li><a href="http://www.dynamicdrive.com">Item 3</a></li> <li><a href="http://www.dynamicdrive.com">Folder 2</a> <ul> <li><a href="http://www.dynamicdrive.com">Sub Item 2.1</a></li> <li><a href="http://www.dynamicdrive.com">Folder 2.1</a> <ul> <li><a href="http://www.dynamicdrive.com">Sub Item 2.1.1</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 2.1.2</a></li> <li><a href="http://www.dynamicdrive.com">Folder 2.1.1</a> <ul> <li><a href="http://www.dynamicdrive.com">Sub Item 2.1.1.1</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 2.1.1.2</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 2.1.1.3</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 2.1.1.4</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 2.1.1.5</a></li> </ul> </li> <li><a href="http://www.dynamicdrive.com">Sub Item 2.1.4</a></li> </ul> </li> <li><a href="http://www.dynamicdrive.com">Sub Item 2.2</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 2.3</a></li> <li><a href="http://www.dynamicdrive.com">Folder 2.2</a> <ul> <li><a href="http://www.dynamicdrive.com">Sub Item 2.2.1</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 2.2.2</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 2.2.3</a></li> </ul> </li> <li><a href="http://www.dynamicdrive.com">Folder 2.3</a> <ul> <li><a href="http://www.dynamicdrive.com">Sub Item 2.3.1</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 2.3.2</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 2.3.3</a></li> </ul> </li> <li><a href="http://www.dynamicdrive.com">Sub Item 2.4</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 2.5</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 2.6</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 2.7</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 2.8</a></li> </ul> </li> <li><a href="http://www.dynamicdrive.com/style/">Item 4</a></li> </ul> <br style="clear: left" /> </div> <h2 style="margin-top:200px">Example 2</h2> <div id="smoothmenu2" class="ddsmoothmenu-v"> <ul> <li><a href="http://www.dynamicdrive.com">Item 1</a></li> <li><a href="http://www.dynamicdrive.com">Folder 0</a> <ul> <li><a href="http://www.dynamicdrive.com">Sub Item 1.1</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 1.2</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 1.3</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 1.4</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 1.2</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 1.3</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 1.4</a></li> </ul> </li> <li><a href="http://www.dynamicdrive.com">Folder 1</a> <ul> <li><a href="http://www.dynamicdrive.com">Sub Item 1.1</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 1.2</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 1.3</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 1.4</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 1.2</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 1.3</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 1.4</a></li> </ul> </li> <li><a href="http://www.dynamicdrive.com">Item 3</a></li> <li><a href="http://www.dynamicdrive.com">Folder 2</a> <ul> <li><a href="http://www.dynamicdrive.com">Sub Item 2.1</a></li> <li><a href="http://www.dynamicdrive.com">Folder 2.1</a> <ul> <li><a href="http://www.dynamicdrive.com">Sub Item 2.1.1</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 2.1.2</a></li> <li><a href="http://www.dynamicdrive.com">Folder 2.1.1</a> <ul> <li><a href="http://www.dynamicdrive.com">Sub Item 2.1.1.1</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 2.1.1.2</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 2.1.1.3</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 2.1.1.4</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 2.1.1.5</a></li> </ul> </li> <li><a href="http://www.dynamicdrive.com">Sub Item 2.1.4</a></li> </ul> </li> <li><a href="http://www.dynamicdrive.com">Sub Item 2.2</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 2.3</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 2.4</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 2.5</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 2.6</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 2.7</a></li> <li><a href="http://www.dynamicdrive.com">Sub Item 2.8</a></li> </ul> </li> <li><a href="http://www.dynamicdrive.com/style/">Item 4</a></li> </ul> <br style="clear: left" /> </div> </body> </html>

Problem confirmed. When the window has a certain size, sub-items 2.1.1.2 and 2.1.1.3 are hidden by folders 2.2 and 2.3. This raises the question of how the menu handles zIndex.

1 Attachment(s)

It turn out that, all folder have the highers z-index except the selected one.
* The selected folder is hidden as shown in the green rectangle, and other folders have highest z-index as shown in circle.

Attachment 5738

1 Attachment(s)

Ok, try the below updated .js file, which should address the issue.

No luck, I'm afraid. Sub-items 2.1.1.2 and 2.1.1.3 continue to hide behind folders 2.2 and 2.3 when the subitems of folder 2.1.1 are displayed to its left.

1 Attachment(s)

Hmm it works for me: Attachment 5741

Can you paste the HTML markup you're using to test out the menu?

Ddadmin, this illustrates the issue.

1 Attachment(s)

Ah ok now I see it :) How about try the attached modified .js file...