PDA

View Full Version : jQuery Multi Level CSS Menu #2 prevents Lightbox working



tom182
09-16-2011, 03:05 PM
1) jQuery Multi Level CSS Menu #2:

2) http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/

3) hi, I'm struggling here with getting my menu to work with the lightbox, I have uploaded it to http://www.rme.ie/cssmenu/temp.html . No dropdowns appear under main menu when the lightbox code is in. If I delete the lightbox code the menu works perfectly. I'm more designer than programmer so please go easy,

<!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>
<link href="lightbox.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="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="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="jqueryslidemenu.js"></script>

<script type="text/javascript">
jQuery.noConflict();
</script>


<!-- By Deleting the following 4 lines my drop down menu will work, but obviously kills the lightbox feature :-( -->


<script src="lightbox_assets/js/prototype.js" type="text/javascript"></script>
<script src="lightbox_assets/js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="lightbox_assets/js/lightbox.js" type="text/javascript"></script>





<style type="text/css">
body {
background-color: #000;
}
</style>
</head>
<body onload="initLightbox()">



<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Avantia 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>
<div class="right">
<a href="images/gallery/brooklands_6_tn.jpg" rel="lightbox[Ballingappa]"><img src="images/gallery/ballingappa_1_tn.jpg" width="148" height="95" /></a>
</div>
</body>

</html>




Would greatly appreciate any insight to how i can resolve this,
Thanks
TOm