Ultimate Fade-in slideshow overlaps Smooth Menu

**vanquish** · 08-04-2010, 02:12 PM

1) Script Title:
Ultimate Fade-in slideshow
/
Smooth Navigational Menu (v1.4)

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

3) Describe problem:
Hello there, I love the DD scripts but I do have a little problem. The menu at the top goes behind the slideshow that is underneath, like this:

I put the slideshow script underneath the menu script and tried using z-index but couldn't make it work. This is the code in short

Code:

...

MENU SCRIPT HEAD
<link rel="stylesheet"...
</script>  

SLIDESHOW HEAD
<script type="text/javascript"...
</script>
</head>

<body>
MENU
<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li>...
</div>

SLIDESHOW
<div id="fadeshow1" ;></div>
...

in long

Code:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<style type="text/css">
#left30z3	{left:30px;top:30px;z-index:3;}
  </style>

<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.3.2/jquery.min.js"></script>
<script type="text/javascript" src="ddsmoothmenu.js">

/***********************************************
* Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* 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
	//customtheme: ["#804000", "#482400"],
	contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})

</script>  

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="fadeslideshow.js">
/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript">

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [560, 184], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
				["http://www.dynamicdrive.com/forums/designfiles/logo.gif", "", "", "Special: So bizarr-blutig endet TWILIGHT"],					
		["http://www.dynamicdrive.com/forums/designfiles/logo.gif", "", "", "Bericht: Universal Studios Hollywood, Los Angeles - Der Themenpark besucht"]
	],
	displaymode: {type:'auto', pause:5000, cycles:0, wraparound:false, randomize:true},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "peekaboo",
	togglerid: ""
})

</script>


</head>

<body>

<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Item 1</a></li>
<li><a href="#">Folder 0</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>
  </ul>
</li>
<li><a href="#">Folder 1</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>
  </ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
  <ul>
  <li><a href="#">Sub Item 2.1</a></li>
  <li><a href="#">Folder 2.1</a>
    <ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Folder 3.1.1</a>
		<ul>
    		<li><a href="#">Sub Item 3.1.1.1</a></li>
    		<li><a href="#">Sub Item 3.1.1.2</a></li>
    		<li><a href="#">Sub Item 3.1.1.3</a></li>
    		<li><a href="#">Sub Item 3.1.1.4</a></li>
    		<li><a href="#">Sub Item 3.1.1.5</a></li>
		</ul>
    </li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
  </li>
  </ul>
</li>
<li><a href="http://www.dynamicdrive.com/style/">Item 4</a></li>
</ul>
<br style="clear: left" />
</div>

<div id="fadeshow1" ;></div>



</body>

</html>

Additional problem: How can I deactivate the silver shadow of the submenus? In IE6 there's only a neat silver border, but in Firefox 368 there is such a blocky shadow (see above). The code in the CSS reads

Code:

/* ######### CSS for shadow added to sub menus  ######### */

.ddshadow{
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: silver;
}

.toplevelshadow{ /*shadow opacity. Doesn't work in IE*/
opacity: 0.8;
}

Thanks very much

**azoomer** · 08-04-2010, 02:48 PM

try this css to get the slideshow behind the menu

Code:

#fadeshow1 {
 z-index: 1;
}

you should remove the red ; in this part
<div id="fadeshow1" ;></div>

to remove the shadow you can try this

Code:

.toplevelshadow { 
  display: none !important;
}

**vanquish** · 08-04-2010, 06:35 PM

It worked! Thank you so very much, have a great day my friend

Thread: Ultimate Fade-in slideshow overlaps Smooth Menu

Thread Tools

Search Thread

Ultimate Fade-in slideshow overlaps Smooth Menu

Bookmarks

Bookmarks

Posting Permissions