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

**AHY8008** · 11-11-2015, 11:23 AM

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.

**Beverleyh** · 11-11-2015, 04:18 PM

Can you post your link that demonstrates the problem please?

**AHY8008** · 11-17-2015, 11:43 PM

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>

<!-- Markup for mobile menu toggler. Hidden by default, only shown when in mobile menu mode -->
<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.

Click image for larger version.

Name: Screenshot (320).jpg
Views: 97
Size: 20.6 KB
ID: 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.