Log in

View Full Version : JquerySlideMenu sub menus hidden by slide show in div below menu


JD2
02-24-2010, 02:21 AM
I am trying to use the JquerySlideMenu in a basic web page (using CS4 for developing the page), but in a div below the menu I have a slide show that hides the drop down sub menus. Any help would be greatly apprecaited, as I am new at web development.

source posted below



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<!-- Menu javascript -->
<link rel="stylesheet" type="text/css" href="css/jqueryslidemenu.css" />

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jqueryslidemenu.js"></script>

<!-- End Menu Insert -->

<link rel="shortcut icon" href="images/ghi.ico">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- picture slideshow javascript -->
<script src="js/mootools.v1.11.js" type="text/javascript"></script>
<script src="js/jd.gallery.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" />

<link href="css/generous_hands_main.css" rel="stylesheet" type="text/css" /><!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixLtHdr #sidebar1 { width: 230px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixLtHdr #sidebar1 { padding-top: 30px; }
.twoColFixLtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
</head>

<body class="twoColFixLtHdr">

<div id="container">
<div id="header">
<table width="100%" border="0" class="twoColFixLtHdr">
<tr>
<th scope="col" width="30%"><img src="images\ghlogo.gif" width="60%" height="94" alt="Generous Hands Logo" /></th>
<th scope="col">
<table width="100%" border="0" class="twoColFixLtHdr">
<tr>
<th scope="col" width="100%"><h1 align="center">Generous Hands, Inc.</h1></th>
</tr>
<tr>
<td scope="col" width="100%">
<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Item 1</a></li>
<li><a href="#">Item 2</a></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>
</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>
</td>
</tr>
</table>
</th>
</tr>
</table>
<!-- end #header --></div>
<div id="sidebar1">
<h3>Sidebar1 Content</h3>
<p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the left side of the #mainContent div if it will always contain more content. </p>
<!-- end #sidebar1 --></div>
<div id="mainContent">
<center>
<div id="myGallery">
<div class="imageElement">
<h3>Kids Helping Kids</h3>
<p></p>
<p><img src="images/anna big backpack.jpg" class="full" />
<!--<img src="images/yca1.jpg" class="thumbnail" />-->
</p>
</div>
<div class="imageElement">
<h3>August 2009 Fresh Food Initiative</h3>
<p></p>
<p><img src="images/IMG_0592.jpg" class="full" />
<!--<img src="images/yca2.jpg" class="thumbnail" />-->
</p>
</div>
<div class="imageElement">
<h3>Generous Hands Wins the 2008 Kalamazoo County State Bank Chili Cook Off</h3>
<p></p>
<p><img src="images/IMG_1025.jpg" class="full" />
<!--<img src="images/yca2.jpg" class="thumbnail" />-->
</p>
</div>
<div class="imageElement">
<h3>Generous Hands Volunteers</h3>
<p></p>
<p><img src="images/IMG_0648.jpg" class="full" />
<!-- <img src="images/homephoto.jpg" class="thumbnail" /> -->
</p>
</div>
</div>
</center>


<!-- timed gallery
<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
showCarousel: false,
useThumbGenerator: true
});
}
window.addEvent('domready', startGallery);
</script>
-->

<!-- Simple showcase slideshow -->
<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
showArrows: true,
showCarousel: false,
embedLinks: false
});
}
window.addEvent('domready', startGallery);
</script>


<!-- Simple timed slideshow
<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
showArrows: false,
showCarousel: false
});
}
window.addEvent('domready', startGallery);
</script>
-->
</h2>
<h3>&nbsp;</h3></center>
<!-- end #mainContent --></div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<div id="footer">
<p> <left><strong>Our Sponsors</strong> </left></p>

</p>
</div>
<div id="footer">
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
simcomedia
02-24-2010, 04:19 PM
Try adding z-index: 100; to this class:

<div id="myslidemenu" class="jqueryslidemenu">

That should bring it forward. It's a common problem where pulldowns fall behind a flash video or some other active element.