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

AHY8008

11-11-2015, 11:23 AM

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

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.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.

Beverleyh

11-11-2015, 04:18 PM

Can you post your link that demonstrates the problem please?

AHY8008

11-17-2015, 11:43 PM

<!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>

molendijk

11-18-2015, 12:15 AM

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.

AHY8008

11-18-2015, 12:46 AM

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.

5738

ddadmin

11-18-2015, 07:25 AM

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

molendijk

11-18-2015, 05:46 PM

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.

ddadmin

11-18-2015, 08:05 PM

Hmm it works for me: 5741

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

molendijk

11-18-2015, 08:55 PM

Ddadmin, this (mesdomaines.nu/smoothmenu_issue) illustrates the issue.

ddadmin

11-18-2015, 10:05 PM

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

molendijk

11-18-2015, 11:27 PM

That solves the problem. Thanks!

AHY8008

11-18-2015, 11:55 PM

Now, I think it work.
Thanks a lots... ;)